Javascript Flickr Badge

by Jyst, the Social Media Aggregator.

Your Flickr photos.
Fast and beautiful.

Display your photos on your website with this pure javascript widget.

Wordpress Download Wordpress Plugin - or - Javascript Flickr Badge Download Javascript

Beautiful animations. Pure CSS3.

With a wide variety of gorgeous animations, you can make your photos as subtle or as vibrant a presence on your website as you like. Give them a try...


Only 5K,
2K gzipped. It's fast!

By not requiring a heavy javascript library like JQuery (91K) or Prototype (91K), you can drastically reduce page load times.


Wordpress Plugin. Easy!

Adding your Flickr photos to your Wordpress sidebar could not be easier with the Javascript Flickr Badge Wordpress widget. All the settings are configurable in your blog's admin. Simply download and install the plugin into /wp-admin/plugins, activate it, and drag the widget to your Wordpress sidebar.

You can add spacing between the photos by adding a #jsFlickrBadge a { margin: 5px; } style to your theme's CSS.

Cross Browser Support

Five Browsers
Chrome Firefox Opera Safari Internet Explorer
Vertical Scroll 4.0+ 4.0+ 10.5+ 3.1+ 10.0+
Shuffle 4.0+ 4.0+ 10.5+ 3.1+ 10.0+
Zoom 4.0+ 4.0+ 10.5+ 3.1+ 10.0+
Flip Vertical 12.0+ 10.0+ NO 4.0+ 10.0+
Flip Horizontal 12.0+ 10.0+ NO 4.0+ 10.0+


You must provide a Flickr ID (find yours here) and select a type of photo stream to display. Below is a description of the available feeds.

user public photos from your user photostream
contacts public photos, one per contact, of your contacts
contactsAll public photos, many per contact, of contacts
friends public photos, one per contact, of your contacts marked as "friend"
friendsAll public photos, many per contact, of contacts marked as "friend"
favorites public photos you have marked as "favorite"
group public photos from a group (use group id for Flickr ID)

Non-Wordpress Installation

Calling the Javascript Flickr Badge from any web page is easy. You can rename myElement to whatever you wish.


#myElement a {
  margin: 5px; // optional margin value (may be different for each side)


<div id="myElement"></div>
<script type="text/javascript" src="javascript-flickr-badge.min.js"></script>
<script type="text/javascript">
  jsFlickrBadge(document.getElementById('myElement'), {
      // your Flickr ID (find it here)
      flickrId: '23585397@N00',
      // feed type. user, group, contacts, etc.
      feed: 'user',
      // optional comma-delimited tags to filter by, only used with 'user' feed
      tags: 'badge,awesome',
      // number of rows to display
      rows: 4,
      // number of columns to display
      columns: 4,
      // size of each thumbnail (any bigger than 75 will cause pixelization)
      size: 75,
      // animation to use.
      // one of: vscroll, random, vscroll, shuffle, zoom, scroll, flipX, flipY
      animation: 'vscroll',
      // seconds each animation takes
      animationSpeed: 1,
      // seconds between each animation
      animationPause: 2

That's it! You're done.

comments powered by Disqus