Hacking Flickr the JSON way

This was part of my presentation at the Open Hack Day in India and I just got the time to write it up.

Here you’ll learn how to get Flickr photos into your JavaScript solutions without having to resort to using the full API. As this is a hack you will only get the latest 20 photos, if you need more detailed data like restricted to sets or more at once you’ll need to resort to the flickr API.

I mentioned it earlier for some of the Flickr badges shown here and my 24 ways article on how to use Flickr in JavaScript but it is good to have a quick step-by-step to learn how to use Flickr with JavaScript without needing to resort to a full-fledged API call.

Step 1: Locate the photos you want to use on flickr.com

Just surf around the site and find a site that does have an RSS feed. For example, my Flickr stream at http://flickr.com/photos/codepo8 or all the photos of Open Hack Day India at http://flickr.com/photos/tags/hackdayindia/.

Notice that only tags work, not search!

Step2: Click the RSS link or RSS icon (in Firefox) and change the ending of the URL call

This will get you the URL to the RSS feed, for example

http://api.flickr.com/services/feeds/photos_public.gne?tags=hackdayindia&lang=en-us&format=atom

and all you need to do to use this information directly in JavaScript is rename the “atom” at the end to “json”.

Do this and you’ll get a bunch of JavaScript instead of the atom feed:

http://api.flickr.com/services/feeds/photos_public.gne?tags=hackdayindia&lang=en-us&format=json

jsonFlickrFeed({
    "title": "Photos from everyone tagged hackdayindia",
    "link": "http://www.flickr.com/photos/tags/hackdayindia/",
    "description": "",
    "modified": "2007-10-12T14:08:47Z",
    "generator": "http://www.flickr.com/",
    "items": [
     {
      "title": "Open Hack Day coverage in Indian newspaper",
      "link": "http://www.flickr.com/photos/codepo8/1552753330/",
      "media": {"m":"http://farm3.static.flickr.com/2116/1552753330_d4c40d1132_m.jpg"},
      "date_taken": "2007-10-12T15:08:47-08:00",
      "description": "<p><a href="http://www.flickr.com/people/codepo8/">codepo8</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/codepo8/1552753330/" title="Open Hack Day coverage in Indian newspaper"><img src="http://farm3.static.flickr.com/2116/1552753330_d4c40d1132_m.jpg" width="209" height="240" alt="Open Hack Day coverage in Indian newspaper" /></a></p> <p>The Bangalore newspaper Midday put up this article about the Open Hack Day and apparently I am an ethical Hacker surrounded by Brad and David :)</p>",
      "published": "2007-10-12T14:08:47Z",
      "author": "nobody@flickr.com (codepo8)",
      "author_id": "11414938@N00",
      "tags": "india newspaper bangalore fame midday bradleyhorowitz davidfilo hackday christianheilmann joearnold hackdayindia"
     },
     {
      "title": "Break It",
      "link": "http://www.flickr.com/photos/code_martial/1536271756/",
      "media": {"m":"http://farm3.static.flickr.com/2283/1536271756_c0da3d5f9b_m.jpg"},
      "date_taken": "2007-10-06T23:18:58-08:00",
      "description": "<p><a href="http://www.flickr.com/people/code_martial/">code_martial</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/code_martial/1536271756/" title="Break It"><img src="http://farm3.static.flickr.com/2283/1536271756_c0da3d5f9b_m.jpg" width="160" height="240" alt="Break It" /></a></p> <p>Joe Arnold does the Break Dance.</p>",
      "published": "2007-10-10T20:43:01Z",
      "author": "nobody@flickr.com (code_martial)",
      "author_id": "61697474@N00",
      "tags": "yahoo dance bangalore taj hackers hacking 50mmf18af hax0rz tajresidency joearnold hackdayindia"
     },

// ... and so on ....
        ]
})

Step 3: Write your display function

As you can see, the Flickr API encloses the dataset inside a function call that executes jsonFlickrFeed, which allows you to define a function with that name:

<script>
function jsonFlickrFeed(o){
  alert(o);
}
</script>
<script src="http://api.flickr.com/services/feeds/photos_public.gne?tags=hackdayindia&lang=en-us&format=json"></script>

The data of the JSON object is a tad askew, especially the encoded output inside the description is pretty much useless in JavaScript. However it is really easy to get the image data and display all the images using the media.m property of each item:

<script>
function jsonFlickrFeed(o){
  var i=0;
  while(o.items[i]){
    document.write('<img src="' + o.items[i].media.m + '" alt="' + o.items[i].title +'">')
    i++;
  }
}
</script>
<script src="http://api.flickr.com/services/feeds/photos_public.gne?tags=hackdayindia&lang=en-us&format=json"></script>

I trust you know however that using document.write is the main reason for hair loss and other problems in this world, so use some nice DOM scripting instead. This was just for the sake of this example.

Step4: Choose the size of the photos with different file endings.

The only remaining annoyance is the size of the photos. Once again, hacking the URLs of flickr helps you there. By default, flickr will choose _m which is the medium size of the photos. Simply rename the _something to the size you need:

• _b is the big size (1024)
• _t is the thumbnail
• _s is the 75×75 pixels square
• _m is the medium size
• removing the _? extenstion means you choose the small size.

You can also get the sizes by clicking around the image detail pages, for example http://www.flickr.com/photo_zoom.gne?id=1536271606&size=s and checking the image properties.

Happy Hacking!

This entry was posted on Monday, October 22nd, 2007 at 12:32 am and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.