Monday, October 22nd, 2007

A little Flickr hacking (in a good way)

Category: JavaScript

Christian Heilmann is at it again posting an entry about a neat method of grabbing Flickr photos without having to using the Flickr API:

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 went ahead and used his code to create a small demo and it worked like charm. Obviously, the results are unformatted but with a little help from jQuery, Ext, Prototype or YUI, you can certainly add effects to make the layout much nicer.

Here’s the code. It’s small and concise:

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

Based on the pictures, it looks like these Yahoo! guys have entirely too much fun! :)

Posted by Rey Bango at 8:50 am
9 Comments

++++-
4.3 rating from 21 votes

9 Comments »

Comments feed TrackBack URI

That code example is mangled :)

Hey, there is never too much fun.

Comment by Chris Heilmann — October 22, 2007

Hum, this hardly a hack as it’s documented at:
http://www.flickr.com/services/feeds/

you also have other formats, like php, sql or yaml and other feeds than the public photos like someone’s contact photos, comments on your shots, etc…

You can see examples of this being used in the greasemonkeys and other hacks from Flickr Hacks and Flickr Pipes (the later using Yahoo pipes to make the most of the feeds).

These feeds are still pretty limited and you will soon want to use an API authenticated access ;)

Comment by Mortimer — October 22, 2007

@Christian: Sorry about the code. I’ve fixed it.

Comment by Rey Bango — October 22, 2007

I’m with Mortimer, this isn’t a hack, it’s a feature. A documented one at that. And not the “it’s a feature” joke when it’s really a bug.

Comment by Jared — October 22, 2007

Ok, for all the people repeating the obvious, please read the back story to my blog post. This was a talk at the Open Hack Day in India explaining for the “hackers” how to quickly get flickr photos in JavaScript without needing to resort to a backend authentication and other normal measures.

Yes it is not a hack, yes it is (almost) documented (show me a working example ON the flickr site that explains how to use and how to get the other sizes of the pictures). Well done. However, I was asked after the talk to quickly write something together and I did. I also admitted in my blog post that I had talked about that before. Shall I stop doing that?

Comment by Chris Heilmann — October 22, 2007

Isn’t anything that uses api.flickr.com “using the flickr API”?

Comment by Andy — October 22, 2007

It would be a real “hack” to get other sizes without having to authenticate. To my knowledge you have to have an API key to do that. But you could get another size by doing something like:


"http://farm3.static.flickr.com/2116/1552753330_d4c40d1132_m.jpg".substring(0, "http://farm3.static.flickr.com/2116/1552753330_d4c40d1132_m.jpg".length-6) + ".jpg"

The default is to return the “m” size, you can just remove that and add the .jpg back on. I’m sure there is a sexier method to do it, but that works.

I think the big uproar is seeing “flickr” and “hack” in the same title and having an alarm immediately raise (for me at least), then finding out it’s really nothing, let alone something already documented.

Comment by Jared — October 22, 2007

Jared exactly this is explained at the end of the original post.

Comment by Chris Heilmann — October 22, 2007

Isn’t this the same as http://docs.jquery.com/Ajax/jQuery.getJSON ?
Nice article though.

Comment by Dave — October 23, 2007

Leave a comment

You must be logged in to post a comment.