Hacking Flickr the JSON wayMonday, 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.
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
“title”: “Photos from everyone tagged hackdayindia”,
“title”: “Open Hack Day coverage in Indian newspaper”,
codepo8 posted a photo:
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 :)“,
“author”: “firstname.lastname@example.org (codepo8)”,
“tags”: “india newspaper bangalore fame midday bradleyhorowitz davidfilo hackday christianheilmann joearnold hackdayindia”
“title”: “Break It”,
code_martial posted a photo:
Joe Arnold does the Break Dance.“,
“author”: “email@example.com (code_martial)”,
“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:
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.