Json Flickr Feed example

» 31 July 2008 » In Ajax Articles »

In many cases, you want to show pictures on your website. In some of these cases, you’ll want users to upload their own pictures. This could mean that you would have to build an upload system, with lot’s of security issues around it, and it also means that you’ll have to have a lot of webspace available at your webhost. Luckily, there is a really easy and neat solution to this.

has been the number 1 for storing pictures online for some years, and they are offering developers a nice API, which means that we can use many of their functions in our own solutions. In this case, we are going to use it to grab the latest pictures from a Flickr group. But how? With JSON (JavaScript Object Notation). Jquery is able to transfer data between domains, and this means that with a little code, we can use this to show our pictures from the rss feed from the Flickr group.

I’ve put together an example on how to do this (you can download this as a .zip file at the bottom of the article).

What you need to pull this together is:

  • Jquery
  • A couple of lines in your htm file
  • Another couple of lines in your css document
  • A Flickr rss (doesn’t have to be yours, just a Flickr rss)

This is the code you need to put in your htm file (in the head tag):

?View Code HTML4STRICT 
<link rel="stylesheet" type="text/css" title="My style" media="screen" href="jsonstylesheet.css" />
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>

And put this where you want inside the body tag (change the url to your own Flickr Rss feed):

?View Code JAVASCRIPT 
<script type="text/javascript">
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("").attr("src", item.media.m).appendTo("#images")
      .wrap("");
  });
 
  $("#title").html(data.title);
  $("#description").html(data.description);
  $("#link").html("_blank\">Click here to get to the Flickr group");
    //Notice that the object here is "data" because that information sits outside of "items" in the JSON feed
});
script>

You also need to put this into your body tag (where you want the images to show):

?View Code HTML4STRICT 
<p>Only the last 20 pictures added to the Flickr group will show. To check out all the pictures, go to the Flickr group here:</p>
<p id="link"></p> 
<div id="images"></div>

To add some styling, add this in you css file:

?View Code CSS 
#images { width: 500px; padding:0; margin:15px 0px 0px 100px; overflow: hidden; }
#images img { border:none; padding-right:5px; padding-bottom:5px;}

That’s it!

Here is a little screenshot on how it will look. Of course, you can style it the way you want with css.

Flickr Feed example with Json

You can download the zip file, containing all you need.

Download: JsonFlickrFeedExample  JsonFlickrFeedExample (16.8 KiB, 1,861 hits)

You can also buy the “Personal homepage” css template, containing this function (only a bit more fancy), plus it integrates feeds from both Twitter and Delicious as well.

Tags: ajax, Feed, Flickr, Javascript, jquery, Json

Trackback URL

7 Comments on "Json Flickr Feed example"

  1. admin
    jatls
    11/08/2008 at 2:52 pm Permalink

    This example looks great however I would like you to consider offering the script for download without registration. Registration is a hassle which I think is likely to drive more people away than bring people in.

    Either way, thanks for sharing.

  2. admin
    admin
    12/08/2008 at 3:04 am Permalink

    Thanks for the notice jatls, it’s now open for everyone to download, no need to register to download it.

  3. admin
    joe
    20/08/2008 at 1:01 am Permalink

    how to get more than 20 pictures?

  4. admin
    admin
    20/08/2008 at 1:36 am Permalink

    It’s not possible to get more than 20 pictures, that’s becuase Flickr’s feed only contains 20. You could look into the Flickr API and see if there is a way to get around it.

  5. admin
    hloo
    31/10/2008 at 2:48 pm Permalink

    OK, (probably very simple), but what if I only need the first 5 photo’s (and not all 20?)

    thanks for this great tutorial!

  6. admin
    smm
    31/01/2014 at 10:14 pm Permalink

    From where i can download the zip file…?

  7. admin
    admin
    31/01/2014 at 11:07 pm Permalink

    Hey smm!
    I’m sorry, there was somehting wrong here. I’ve now opened the download-link again. Thanks for reading, and good luck with your project!

You must be logged in to post a comment.