Pulling Your Flickr Feed with jQuery

Feeds are the easiest way to view updated content, whether it's through a feed reader or outputted onto a web site. There are many different types of feeds, such as RSS or Atom, and many different ways display them on your site, such as using MagpieRSS to parse an RSS feed in PHP. However, you can also display feeds on your site using JavaScript, so in this post I'm going to be talking about a feed format called JSON and how you can use JavaScript to parse it out and display it.
JSON (JavaScript Object Notation) is a data format that is easy to read and language-independent, meaning you can parse it using any programming language. Both Yahoo! and Google have been offering data from their sites in JSON format for the past couple years. A good example of this is Flickr. Anyone with a Flickr account can access a JSON feed of their photos.

Finding Your Feed

If we go to the Viget Inspire collection on Flickr, we can click on the feed (orange button, bottom of the page) and bring up a RSS 2.0 feed of all the images in our pool. Flickr's API has many other feed formats, so I suggest going to their site to read up on it because there are a lot of things you can do. If you want the JSON version of the feed, change "format=rss_200" at the end of the query string to "format=json" so that your URL looks like this:

http://api.flickr.com/services/feeds/groups_pool.gne? id=675729@N22&lang=en-us&format=json

Bringing It Into jQuery

So now that you have your JSON feed, lets put it to good use. My co-workers and I are big fans of the JavaScript framework jQuery. With version 1.2, jQuery added support for transferring JSON data across multiple domains (this is referred to as JSONP), so in this example we'll be using it to do all the JavaScript work for us. First off, make sure you've downloaded the latest version of jQuery and added it to your page. Next, add "jsoncallback=?" to the end of your query string (this is the callback name) and put the code inside <script> tags to get things running:

$.getJSON("http://api.flickr.com/services/feeds/groups_pool .gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images")
      .wrap("<a href='" + item.link + "'></a>");
  });
});

See how that function has appendTo("#images")? The JavaScript will be looking for a div with an id of "images" to pull in all the images coming in through the feed, and then wrapping them in a link to the images on Flickr. If you try it out you'll notice it just displays all the images in a row. Obviously this doesn't look very good, so you can use CSS and jQuery to display things nicely. I decided to use the jQuery cycle plugin which has numerous cool effects. Download the plugin and make sure you include a link to it in your page. So at this point your HTML should look something like this:

<div id="images"></div>  
<div class="flickrNav">
    <a id="prev" href="#">Prev</a><a id="next" href="#">Next</a>
</div>

and the CSS could be something like this:
#images { height: 185px; width: 240px; padding:0; margin:0; overflow: hidden;}
#images img { border:none;}

Then we'll add in the cycle plugin code inside our initial function that creates the images out of the JSON feed:

$.getJSON("http://api.flickr.com/services/feeds/groups_pool .gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images")
      .wrap("<a href='" + item.link + "'></a>");
  });
  $('#images').cycle({
    fx:     'fade',
    speed:    'fast',
    timeout:  0,
    next:   '#next',
    prev:   '#prev'
  });
});

Notice that I put some options in the cycle method for previous and next id's. As you can probably guess, these links will allow the user to navigate through the list of images.

Getting More Than Just Pretty Pictures

At this point images should be showing up, but that JSON feed has a lot of other information in it you can pull in. For any attribute you want to display you just need to write it in the format of $("div name you are targeting").html(name of JSON object you want to display). In our example, if we wanted to show the title of the photo pool, the description of the pool, and a link to the pool on Flickr we would write the following into our jQuery function:

$.getJSON("http://api.flickr.com/services/feeds/groups_pool .gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images")
      .wrap("<a href='" + item.link + "'></a>");
  });

  $("#title").html(data.title);
  $("#description").html(data.description);
  $("#link").html("<a href='"+data.link+"' target=\"_blank\">Visit the Viget Inspiration Pool!</a>");
    //Notice that the object here is "data" because that information sits outside of "items" in the JSON feed

  $('#images').cycle({
    fx:     'fade',
    speed:    'normal',
    timeout:  0,
    next:   '#next',
    prev:   '#prev'
  });
});

Notice that we have to call items based on where they are located in the JSON feed. For example, "item.link" will link to the image but "data.link" will link to the overall photo pool. You can look at the actual JSON feed and see how its organized. Next add the HTML so jQuery has something to update:

Now you've got yourself a nice feed of Flickr images and can all the CSS you want to make it look more stylish:

If you're reading this in an RSS reader, you won't be able to see the JavaScript effects I'm talking about. Click here to read.

Viget Inspiration group Pool

The design lab at Viget Labs putting together colors, sites, and anything else that visually inspires us. This group is just so the designers have something the site (www.viget.com/inspire) can pull from, so don't feel bad if you don't get added!

Visit the Viget Inspiration Pool!