Christian Heilmann

⚡️Hacking Flickr the JSON way

Monday, October 22nd, 2007 at 12:32 am

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“},
“date_taken”: “2007-10-12T15:08:47-08:00”,
“description”: “

codepo8 posted a photo:

"Open

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 :)

“,
“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“},
“date_taken”: “2007-10-06T23:18:58-08:00”,
“description”: “

code_martial posted a photo:

"Break

Joe Arnold does the Break Dance.

“,
“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:




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:




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!

Share on Twitter