Load Flickr Pictures using JSONP API
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.
Frequently Asked Questions (FAQs) about Loading Flickr Photos Using JSONAPI
How can I get the correct JSON object from the Flickr API?
To get the correct JSON object from the Flickr API, you need to make a request to the Flickr API endpoint with the appropriate parameters. The parameters include the API key, the method (e.g., flickr.photos.search), and the format (e.g., json). Once the request is made, the API will return a JSON object containing the requested data. You can then parse this JSON object to extract the data you need.
What is the purpose of the Flickr API key?
The Flickr API key is a unique identifier that is used to authenticate your application or website with the Flickr API. It is used to track and control how the API is being used, to prevent abuse and ensure fair usage. Without the API key, you won’t be able to make requests to the Flickr API.
How can I search for specific photos using the Flickr API?
To search for specific photos using the Flickr API, you can use the flickr.photos.search method. This method allows you to specify various parameters such as the text (for keyword search), tags, user_id (to search photos from a specific user), and more. The API will return a JSON object containing the photos that match the search criteria.
How can I handle errors when using the Flickr API?
When using the Flickr API, errors can be handled by checking the “stat” field in the returned JSON object. If the “stat” field is “fail”, it means that an error has occurred. The “code” and “message” fields will provide more information about the error.
How can I display the returned photos on my website?
To display the returned photos on your website, you can parse the JSON object to extract the photo URLs. Then, you can use these URLs to create image elements in your HTML. Each image element will display one of the returned photos.
Can I use the Flickr API to upload photos?
Yes, you can use the Flickr API to upload photos. The flickr.photos.upload method allows you to upload a photo by making a POST request to the API. The request must include the photo file and the API key.
How can I paginate the returned photos?
To paginate the returned photos, you can use the “page” and “per_page” parameters in your API request. The “page” parameter specifies the page number, and the “per_page” parameter specifies the number of photos per page.
Can I use the Flickr API to get photo metadata?
Yes, you can use the Flickr API to get photo metadata. The flickr.photos.getInfo method allows you to get information about a specific photo, such as the title, description, tags, and more.
How can I get the user’s public photos using the Flickr API?
To get a user’s public photos, you can use the flickr.people.getPublicPhotos method. This method requires the user_id parameter, which is the ID of the user whose photos you want to get.
Can I use the Flickr API without an API key?
No, you cannot use the Flickr API without an API key. The API key is required for all requests to the API. It is used to authenticate your application or website with the API and to track and control how the API is being used.
Network admin & freelance web developer.
