Load Flickr Pictures using JSONP API

This article was last updated June 23, 2016, with code revisions, a CodePen demo, and improved formatting.

Flickr, a Yahoo-owned platform for sharing photos and videos, provides a public API to retrieve photo lists based on specific criteria.

To receive JSON-formatted API responses, include the format=json parameter in your request. For example, this retrieves photos tagged "kitten":

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

This Flickr API query doesn't require authentication. A complete list of parameters is available here: https://www.php.cn/link/b1370fcd515bccf46591ed09a543d21b.

Flickr JSON Object Structure

A typical Flickr JSON response looks like this:

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="%5C%22http://www.flickr.com/people/112684907@N06/%5C%22">stefanhuber92 posted a photo: <p><a and='\"href=\"http://www.flickr.com/photos/112684907@N06/27665373772/\"' mogli='\"of=\"' simba='\"title=\"Portrait\"'><img alt='\"Portrait\"' and='\"height=\"240\"' mogli='\"of=\"' simba='\"src=\"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg\"'    style="max-width:90%"177\"'> ",
      "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 ...
  ]
})</a></p></a></p>

Fetching Flickr Images with the JSONP API

The JSON response is wrapped in the jsonFlickrFeed function. This allows us to integrate Flickr images into our webpage:

function jsonFlickrFeed(json) {
  $.each(json.items, function(i, item) {
    $("<img  alt="Load Flickr Pictures using JSONP API" >").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" }
});

For more on JSONP, see: jQuery’s JSONP Explained with Examples

Demo

View the resulting output here:

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

Further details on the Flickr API are available on the API homepage.

Frequently Asked Questions (FAQs)

This section answers common questions about using the Flickr API to load photos, covering topics such as obtaining the correct JSON object, understanding API keys, searching for photos, error handling, displaying photos, uploading photos, pagination, metadata retrieval, accessing user photos, and API key necessity. (The original FAQ section is retained, but rephrased for conciseness and to avoid repetition.)

The above is the detailed content of Load Flickr Pictures using JSONP API. For more information, please follow other related articles on the PHP Chinese website!