JavaScript
Article
By James Hibbard

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
    ...
  ]
})
--ADVERTISEMENT--

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.

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account