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 Mastodon (needs instance)

Share on Twitter

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

Dev Digest 146: 🥱 React fatigue 📊 Query anything with SQL 🧠 AI News

Why it may not be needed to learn React, why Deepfake masks will be a big problem and your spirit animal in body fat! 

Dev Digest 147: Free Copilot! Panel: AI and devs! RTO is bad! Pi plays!

Free Copilot! Experts discuss what AI means for devs. Don't trust containers. Mandated RTO means brain drain. And Pi plays Pokemon!

Dev Digest 148: Behind the scenes of Dev Digest & end of the year reports.

In 50 editions of Dev Digest we gave you 2081 resources. Join us in looking back and learn about all the trends this year.

Dev Digest 149: Wordpress break, VW tracking leak, ChatGPT vs Google.

Slowly starting 2025 we look at ChatGPT vs Google, Copilot vs. Cursor and the state of AI crawlers to replace web search…

Dev Digest 150: Shifting manually to AI.

Manual coding is becoming less of a skill. How can we ensure the quality of generated code? Also, unpacking an APK can get you an AI model.

My other work: