2 Posts Tagged "codeyear"

Blog Pile

Flickry Me

I’m on a code burn. After explaining yesterday how I built a JavaScript fueled site for a random generator, I went on a string of ideas that led me to be exploring ways to access recent photos from flickr using just JavaScript.

Here I will explain how the “flickry me” site works (http://lab.cogdogblog.com/flickry/), which for now randomly displays a full window sized version (that resizes with the window) of one out of 20 of my most recent flickr photos:

I have built sites like Five Card Stories and pechaflickr in the past using server side PHP using phpFlickr, but got curious about what things could be done just in HTML and Javascript.

This began when I looked at the site for the Backstretch jQuery plugin, which provides the clean sizing of the background image– and I noted that while my previous uses of this used a locla image, that there wa sno reason, as shown in the example there, you could not use one via a URL.

This lead me to wonder what I could do with pulling recent photos from flickr. and a few googly clicks later I found the answer at Hacking Flickr the JSON way:

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 liked this approach because you could do it via public API calls to flickr, e.g. you would not need to embed your own API key in the source code.

It is quite simple when you get the idea. What you need to do is find any URL for an RSS feed in flickr, these are generally found in the bottom left of a flickr page for the link “Latest”. Some examples:

  • Your own flickr stream- mine is
    http://api.flickr.com/services/feeds/photos_public.gne?id=37996646802@N01&lang=en-us&format=rss_200
  • Publicly tagged photos, e.g photos tagged “hurleylounge”
    http://api.flickr.com/services/feeds/photos_public.gne?tags=hurleylounge&lang=en-us&format=rss_200
  • Photos from a group, e.g. the 2012/366 photos group
    http://api.flickr.com/services/feeds/groups_pool.gne?id=600611@N20&lang=en-us&format=rss_200