Javascript Flickr Badge

Flickr has recently implemented a JSON format for its RSS feeds, thus enabling a simple way to get photostream information into javascript without even using XMLHttpRequests. I decided to implement a WordPress widget similar to my Flickr Flash Badge Widget, but using elegant javascript instead of yucky Flash with the disgusting magisterLudi trickery that plugin required.

Presenting the Javascript Flickr Badge: the lightweight, fast way to promote your Flickr photostream on your blog.

javascript-flickr-badge.1.5.zip

Features

Customizable thumbnail size, number of rows, and number of columns to fit perfectly into any sidebar.
Works for all available Flickr API feeds:
- Your personal photo stream
- Group Pools
- Your favorites
- Your contacts’ photos
Filtering by tag (user feed only)
Lightweight javascript. No heavy libraries required, except when animations are enabled.
Works on mobile browsers.
All the work happens client-side. No server load.
Animations (using Script.aculo.us):
- Shuffle
- Zoom (just like Flickr’s Flash Badge)
- Vertical Scroll
- …more coming soon…
Localized to Spanish.

Demo Video

Frequently Asked Questions

What’s my Flickr ID?
Your Flickr ID is a unique string used internally by Flickr. You can find your own by using idgettr.

Why is tag filtering limited to only user feeds?
That’s all the Flickr Feed API allows.

Why can’t I see more photos?
The RSS feed from Flickr is limited to twenty photographs.

Can I make a donation?
Yes, thank you.

Screenshot

http://punknomad.com matt derrick

i can’t seem to get any of the animations to work. any idea what might be wrong? thanks!

erik

You have a javascript error. For some reason when the plugin code runs, the $() function has been undefined. Something on your page is doing that, and I don’t think it’s jQuery.

http://www.evolvebranding.co.uk Rob Steele

Hi i can’t seem to get the photos displaying right is there a class to sort out this issue.

http://erikras.com/?utm_source=disqus&utm_medium=profile&utm_campaign=Disqus%2BProfile Erik R.

Rob, you need to either send me a link to where you’ve got it installed or better describe what the problem is if you want me to help you.

http://www.flickr.com/photos/benoitrossignol Ben

Hello,

Thanks for this great extension !
Is it possible to add a space between pictures thumbnails ? I mean a little padding around each image ?

Thanks

erik

Interesting suggestion, Ben. At the moment they are all positioned absolutely, so no css padding settings will affect them.

It will complicate the animations a bit, but I think it’s a good idea. Thanks!

http://www.mcdowellcrook.com/blog mcd

Is there any way to align the slideshow to the right of my sidebar? I tried to div align=”right” the sidebar but it only repositions the title.

http://erikras.com/?utm_source=disqus&utm_medium=profile&utm_campaign=Disqus%2BProfile Erik R.

You might try this:

#jsFlickrBadge { float: right; }

http://twitter.com/VitiligoCorner Vitiligo Corner

hi eric, the title is not showing up, instead there is an unseen link to my flickr page. any suggestions? my site is http://vitiligocover.com, if you get a moment to check it out. cheers, nathalie

http://erikras.com/?utm_source=disqus&utm_medium=profile&utm_campaign=Disqus%2BProfile Erik R.

The title is there, it’s just blue-on-blue. Try adding the following to your css:

#jsFlickrBadgeTitle { color: white !important; }

That should fix it.

http://www.dreamygallery.net Laura

Thank you very much! It’s fantastic! I suggest you insert other aniamtion for a future update
http://www.dreamygallery.net Laura

Thank you very much! It’s fantastic! I suggest you insert other aniamtion for a future update
Michael

Thank you for this great plugin. Unfortunately I can’t get it to display my photostream correctly. Tried nearly every configuration option I could find and it still shows only the very first photo I added to Flickr. Do you have any idea what’s wrong? (see: http://slashho.me). Thanks a lot in advance!

Best regards,
Michael

http://erikras.com/?utm_source=disqus&utm_medium=profile&utm_campaign=Disqus%2BProfile Erik R.

I’m not at a computer at the moment, but I would recommend checking your photostream’s regular rss feed. It sounds like it might be Flickr just getting your feed wrong, in which case your should contact Flickr support. If you are familiar with Firebug or Chrome’s JavaScript console, you can view the actual js file your page is downloading. If it contains all your photos, but my plugin is only displaying one, then let me know and I’ll debug it at my earliest opportunity.
–
Erik Rasmussen

Michael

Hi Erik,

thanks for your swift response.
After writing the comment I installed the flash version of your plugin and it immediately showed all photos – just as expected.

Strange thing is: When I returned to my page this morning the flash as well as the Javascript version were displaying all photos correctly. So right now the problem seems to be kind of solved.

Once more thanks a lot for your great work and support!

Kind regards
Michael
Swilli

Hi,

Thank you so much for the plugin. I love it!

Is there a way to add a white border around the images? I want there to be a little bit of separation between each one.

Please let me know.
Thx.
http://www.dreamygallery.net Laura

It’s very nice! But I’ve got a problem… when I update my gallery on Flickr… It doesn’t appear the new image in my website…what’s the mistake?! Thanks a lot
http://topsite.lt/ Tomas D. Davainis

Hi, Erik. Realy a nice and usefull plugin! Is it published on the Official WordPress.org website?
Mindzai

Is there any way to display different photostreams on different pages? For example, show one Flickr set on one page and a different Flickr set on another page?

http://erikras.com/?utm_source=disqus&utm_medium=profile&utm_campaign=Disqus%2BProfile Erik R.

No, there isn’t, sorry. The widget settings are site-wide.

http://pulse.yahoo.com/_D5VJPOC6RPB4VPVV7FF2I2APD4 Eunice

Hi Erik, Thanks for a really great widget I’ve sorted out most of my queries by reading through your excellent replies to other peoples questions, but I can’t find an answer to this one. I’d like to change the colour of the link back to you from blue to black and would be really grateful if you would send me the code to insert into my css. Thanks again.
Sintetica3d

Hi Erik, is there a way to insert a horizontal scroll?
Very useful plugin.
Thanks
Lola J. Lee Beno

Is the plugin compatible with WP 3.3.1?
http://i65designmedia.wordpress.com/ Les Booth

Erik .. thank you for a simple, elegant and effective plug-in. So many WP plug-ins made for Flickr feeds either don’t work or are too cumbersome; and I’m a techie who uses WP daily! Nice to have working solution that is easy to implement and recommend.