Displaying public Flickr Photos on Your Website

In this tutorial, I’m going to show you how to display public photos from your (or any one else’s) Flickr photo set onto your website. The main reason I do this is because I have a wedding photography page and I like to showcase some photos on it. And since my photo sets are nicely organized on Flickr, I like to use Flickr to host my images instead of re-hosting them on my web server.

There are a few reasons why I (and you) would want to do this:

• I have a Flickr Pro account and can upload infinite number of photos.
• By not uploading photos onto my web host, I save server space and avoid duplicity of photos.
• Having images load from a different domain, speeds up the time taken for a page to load and also saves me a ton of bandwidth.
• The Flickr API is awesome!

Now to my use case. I basically wanted to display the public photos from a particular photo set on my website. For those of you who are not familiar with Flickr terms, a set is just like an album. You can have collections and sets in Flickr. Just imagine that you have a huge cupboard. Sets are like albums, collections are like shelves and the cupboard is your Flickr account.

With my current workflow, I had to go to the individual image on Flickr (refer to image below), click on the “Share” menu, select “Copy the HTML”, select the size I want, copy the code, paste it into the source code of the the album page. Whoaaa dude!!! That’s a lot of steps! And, I’d repeat these actions for some 60 to 70 photos. What a waste of time!

Back to my use case. In order to get public images from my set (without having to go through the tedious process pictured above), I require the set ID. Lets take an example of a wedding album belonging to Samantha & Brijesh.

Here is a screenshot of the album that I see. Note: I get to see all the photos, but only make a few public since no one wants to go through 200+ photos. I keep the number to less than 100 since folks tend to get bored after a point.

The URL to the page is below.

http://www.flickr.com/photos/lovelldies/sets/72157632700264359/

The set ID is the bunch of numbers (in this case 72157632700264359) that come after /sets/

Now that we have that figured out, lets look at the code. Documentation inline. For you to get through this tutorial, you will need to know the basics of JavaScript, jQuery and how the Flickr API works.

/**
 * Function to get images from Flickr
 *
 * @setId The flickr set the images belong to.
 */  
function getImgs(setId) {
  var URL = "https://api.flickr.com/services/rest/" +  // Wake up the Flickr API gods.
    "?method=flickr.photosets.getPhotos" +  // Get photo from a photoset. http://www.flickr.com/services/api/flickr.photosets.getPhotos.htm
    "&api_key=<>" +  // API key. Get one here: http://www.flickr.com/services/apps/create/apply/
    "&photoset_id=" + setId +  // The set ID.
    "&privacy_filter=1" +  // 1 signifies all public photos.
    "&per_page=20" + // For the sake of this example I am limiting it to 20 photos.
    "&format=json&nojsoncallback=1";  // Er, nothing much to explain here.

  // See the API in action here: http://www.flickr.com/services/api/explore/flickr.photosets.getPhotos
  $.getJSON(URL, function(data){
    $.each(data.photoset.photo, function(i, item){
      // Creating the image URL. Info: http://www.flickr.com/services/api/misc.urls.html
      var img_src = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg";
      var img_thumb = $("<img/>").attr("src", img_src).css("margin", "8px")
      $(img_thumb).appendTo("#flickr-images");
    });
  });
}

$(document).ready(function() {
  getImgs("72157632700264359"); // Call the function!
});

And that’s it. As simple as that!