Displaying public Flickr Photos on Your Website

In this particular tutorial, i will show you the way to display public photos from the Flickr photo set onto your website. I like to use Flickr to host my

images instead of re-hosting them on my web server.

There are some logic behind why I (and you also) would want to make this happen:

  • By not uploading photos onto my webhost, I save server space and get away from duplicity of photos.
  • Having images load at a different domain, increases enough time taken for the page to load and in addition saves me a lot of bandwidth.

Here first I have introduce what is flickr and How to use Flickr API

What is Flickr?

Flickr is almost certainly the best online photo management and sharing application in the world. On Flickr, members upload photos, share them securely,

supplement their photos with metadata like license information, geo-location, people, tags, etc., and interact with their family, friends, contacts or

anyone in the community. Practically all the features on Flickr's various platforms -- web, mobile and desktop -- are accompanied by a longstanding API

program. Since 2005, developers have collaborated on top of Flickr's APIs to build fun, creative, and gorgeous experiences around photos that extend beyond

Flickr.

Getting the most out of the Flickr API

  • We encourage all sorts of integrations, such as features and products that:
  • Help people make their photos available to people who matter to them
  • Enable new ways of organizing photos and videos
  • Are fun!

How to Get Flickr API key ?

Go Flickr API

Then Click Request an API key

Now In Below you can apply for create Flikr API key

Now How to get Set ID ? Follow as per below given

Now Clik Your Photos Albums

Now You can get your Set ID for Displaying Photos in Your Website

Now In beow i explain code For get Photos from Flickr

function getFlickrImages(setId) {
  var URL = "https://api.flickr.com/services/rest/" +  // Wake up the Flickr API gods.
    "?method=flickr.photosets.getPhotos" +  // Get photo from a photoset. https://www.flickr.com/services/api/flickr.photosets.getPhotos.htm
    "&api_key={Your API Key here}" +  // 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=28" + // 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: https://www.flickr.com/services/api/explore/flickr.photosets.getPhotos
  $.getJSON(URL, function(data){
    var owner = data.photoset.owner;
    var phot_set_id = data.photoset.id;
    $.each(data.photoset.photo, function(i, item){
      // Creating the image URL. Info: https://www.flickr.com/services/api/misc.urls.html
      var img_src = "https://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg";
      //var img_thumb = $("").attr("src", img_src).attr("id", item.id).css("margin", "8px");
      var link_src = "https://www.flickr.com/photos/" + owner + "/" + item.id + "/in/set-"+phot_set_id;
      var img_link =   $("").attr("href", link_src);
      var img_thumb = $('').attr({src:img_src}).appendTo($('').attr({href:link_src,target:"_blank"}).appendTo($('#flickr-images')));
      
    });
  });
}

$(document).ready(function() {
  getFlickrImages("72157650210689192"); // Call the function!
});

Display Photos in Your DIV

// Show your photos here

Read Document For Geting More Data From Flickr

Demo Download

About The Massive Technolab

Avatar
Who We Are

Massive Technolab is a Leading IT services Company in India that expertise in web Development, Web Design and SEO at affordable rates.

Leave a Comment

comments powered by Disqus