JavaScript
Article

Load Flickr Pictures using JSONP API

By James Hibbard

This article was updated on 23rd June, 2016. Specifically: the code example was revised, a CodePen demo was added and formatting issues were fixed.

Flickr is a leading image and video hosting website owned by Yahoo. They offer a public API which can be used to return a list of photos matching a certain criteria.

To return an API response in JSON format, you would send a parameter format in the request with a value of json. For example, the following will return a list of photos tagged “kitten”.

https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json

This method of querying the Flickr API does not require authentication. You can find a list of possible arguments here: https://www.flickr.com/services/api/flickr.photos.search.html.

A Typical Flickr JSON Object

This is what a typical Flickr JSON object looks like:

jsonFlickrFeed({
  "title": "Recent Uploads tagged kitten",
  "link": "http://www.flickr.com/photos/tags/kitten/",
  "description": "",
  "modified": "2016-06-19T09:32:56Z",
  "generator": "http://www.flickr.com/",
  "items": [
    {
      "title": "Portrait of Simba and Mogli",
      "link": "http://www.flickr.com/photos/112684907@N06/27665373772/",
      "media": {"m":"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg"},
      "date_taken": "2016-06-17T17:09:38-08:00",
      "description": " <p><a href=\"http://www.flickr.com/people/112684907@N06/\">stefanhuber92<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/112684907@N06/27665373772/\" title=\"Portrait of Simba and Mogli\"><img src=\"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg\" width=\"177\" height=\"240\" alt=\"Portrait of Simba and Mogli\" /><\/a><\/p> ",
      "published": "2016-06-19T09:32:56Z",
      "author": "nobody@flickr.com (stefanhuber92)",
      "author_id": "112684907@N06",
      "tags": "pet cats cute eye animal animals cat tiere kitten siblings katze katzen fell haustier liebe tier gemütlich petlove geschwister kuscheln schön catlove süs petlover"
    },
    ...
    19 more items
    ...
  ]
})

Load Flickr Pictures Using the JSONP API

As you can see, the JSON response is wrapped in a function jsonFlickrFeed. We can use this to pull in pictures from Flickr and display them on our web page like so:

function jsonFlickrFeed(json) {
  $.each(json.items, function(i, item) {
    $("<img />").attr("src", item.media.m).appendTo("#images");
  });
};

$.ajax({
  url: 'https://api.flickr.com/services/feeds/photos_public.gne',
  dataType: 'jsonp',
  data: { "tags": "kitten", "format": "json" }
});

If you’d like to learn more about JSONP, read: jQuery’s JSONP Explained with Examples

Demo

This is what we end up with.

See the Pen vKXZrz by SitePoint (@SitePoint) on CodePen.

You can read more about the Flickr API on the API homepage.

  • Pingback: Load Flickr Pictures using JSONP API « Big Engine Media()

  • Pingback: jQuery's JSONP Explained with Examples | jQuery4u()

  • CODER

    THANK YOU!

  • austin-girl

    Such a simple, clear example. THANK YOU!

  • sp

    function jsonFlickrFeed is not present in handleButtonClick. how can you use it?

    • James Hibbard

      As demonstrated in the CodePen. Is that not working for you?

  • James Hibbard

    No worries. Rather than discuss it here, could you post your question in SitePoint forums. Then let me know when you have done so and I’ll answer you there: https://www.sitepoint.com/community/c/javascript

  • WrathChild

    This thing rocks. Thank you for making my life easier. You have managed to explain in one short article what I could not figure out from three hours worth of video lectures. So simple and straight forward.

    • James Hibbard

      Thanks for taking the time to comment. Appreciated :)

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.