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:

<h1 id="title"></h1> //Title of the Flickr pool
<p id="description"></p> //Description of the images pool
<p id="link"></p> //Link to the images pool
<div id="images"></div> //Container for the images
<div id="flickrNav"> //Navigation for the images
    <a id="prev" href="#">Prev</a><a id="next" href="#">Next</a>
</div>

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.

Everything in the box above is being pulled directly from Flickr; pretty cool right? Sure, you could easily make a Flickr badge to display your photos, but this method gives you more control over how it display your data, especially when using a framework like jQuery. There are many other ways to display the content of a feed on a web site, so please share any other methods you might use because I'm really interested to learn more about this stuff.

Why Does Flickr Do That?

On a side note, has anyone else noticed that Flickr puts in extra markup for the description of individual photos in a feed? Each photo description has "(username) posted a photo:" with HTML tags that don't have any class or id names (which makes styling with CSS more difficult). Sure you can use JavaScript to style it or regular expressions to take it out, but I don't really think a feed should be forcing the user to deal with markup like that. I would understand if it was in the feed for the free version of Flickr since it could be promotion for the site, but it exists for paying members too. As far as I know, this is in all feeds that Flickr offers through their API, but I could be wrong. If anyone has any insight into this, please let me know.