Multiple ways of Implementing Flickr Public API in jQuery and JavaScript
Flickr is world largest Image and Video hosting website that has close to 7 billion images. It also has APIs for developers to use in their applications.
In this Tutorial I will teach you some of the fantastic ways to “search and get pictures” from these API, and then show these pictures in your web page.
I will use jQuery & JavaScript to consume these APIs.
Note — here I will use Flickr Public API, so I don’t have to authenticate my request using API keys. You check the link to Flickr Public API docs here.
Web Page for searching pictures using Flickr API
In this web page there are 2 controls.
a. A textbox for users to put the search text.
b. A button to click, and that will make Flickr API call.
Flickr Public API
The Flickr Public API returns JSONP instead of JSON and its format is:
jsonFlickrFeed({"title": "Uploads from everyone","link": "https:\/\/www.flickr.com\/photos\/","description": "","modified": "2017-12-31T14:44:56Z","generator": "https:\/\/www.flickr.com","items": [{"title": "DSC_0364.jpg","link": "https:\/\/www.flickr.com\/photos\/carinafneves\/24542361147\/","media": {"m":"https:\/\/farm5.staticflickr.com\/4735\/24542361147_dba818f18d_m.jpg"},"date_taken": "2017-12-22T21:27:58-08:00","description": " <p><a href=\"https:\/\/www.flickr.com\/people\/carinafneves\/\">ninafneves<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/carinafneves\/24542361147\/\" title=\"DSC_0364.jpg\"><img src=\"https:\/\/farm5.staticflickr.com\/4735\/24542361147_dba818f18d_m.jpg\" width=\"160\" height=\"240\" alt=\"DSC_0364.jpg\" \/><\/a><\/p> ","published": "2017-12-31T14:44:56Z","author": "nobody@flickr.com (\"ninafneves\")","author_id": "114340513@N07","tags": ""},{"title": "636503534996139526","link": "https:\/\/www.flickr.com\/photos\/161579948@N08\/24542362237\/","media": {"m":"https:\/\/farm5.staticflickr.com\/4633\/24542362237_204b3ca4e6_m.jpg"},"date_taken": "2017-12-31T06:45:02-08:00","description": " <p><a href=\"https:\/\/www.flickr.com\/people\/161579948@N08\/\">truyentranhth<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/161579948@N08\/24542362237\/\" title=\"636503534996139526\"><img src=\"https:\/\/farm5.staticflickr.com\/4633\/24542362237_204b3ca4e6_m.jpg\" width=\"163\" height=\"240\" alt=\"636503534996139526\" \/><\/a><\/p> ","published": "2017-12-31T14:45:02Z","author": "nobody@flickr.com (\"truyentranhth\")","author_id": "161579948@N08","tags": ""},{"title": "Hello 2018","link": "https:\/\/www.flickr.com\/photos\/wolfcat_aus\/25537966958\/","media": {"m":"https:\/\/farm5.staticflickr.com\/4645\/25537966958_108ab49ec6_m.jpg"},"date_taken": "2018-01-01T00:03:22-08:00","description": " <p><a href=\"https:\/\/www.flickr.com\/people\/wolfcat_aus\/\">wolfcat_aus<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/wolfcat_aus\/25537966958\/\" title=\"Hello 2018\"><img src=\"https:\/\/farm5.staticflickr.com\/4645\/25537966958_108ab49ec6_m.jpg\" width=\"240\" height=\"140\" alt=\"Hello 2018\" \/><\/a><\/p> ","published": "2017-12-31T14:44:46Z","author": "nobody@flickr.com (\"wolfcat_aus\")","author_id": "7519521@N06","tags": "nikon d7100 nikond7100sigma 150500mm nikond7100 sigma1835mmf18 sigma art lens f18 sigma1835mmf18dchsmartlens nye newyearseve melbourne australia 2018"},......]})
You can also check its format by clicking this link.
The JSONP has a wrapper function jsonFlickrFeed.
You can change the wrapper function name by passing the jsoncallback to the API URL.
Take for example, if I pass abc for jsoncallback in the API URL, then the URL becomes:
https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=abc&format=json
And so the wrapper function becomes abc like this:
abc({"title": "Uploads from everyone","link": "https:\/\/www.flickr.com\/photos\/","description": "","modified": "2017-12-31T14:44:56Z","generator": "https:\/\/www.flickr.com","items": [{"title": "DSC_0364.jpg","link": "https:\/\/www.flickr.com\/photos\/carinafneves\/24542361147\/","media": {"m":"https:\/\/farm5.staticflickr.com\/4735\/24542361147_dba818f18d_m.jpg"},"date_taken": "2017-12-22T21:27:58-08:00","description": " <p><a href=\"https:\/\/www.flickr.com\/people\/carinafneves\/\">ninafneves<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/carinafneves\/24542361147\/\" title=\"DSC_0364.jpg\"><img src=\"https:\/\/farm5.staticflickr.com\/4735\/24542361147_dba818f18d_m.jpg\" width=\"160\" height=\"240\" alt=\"DSC_0364.jpg\" \/><\/a><\/p> ","published": "2017-12-31T14:44:56Z","author": "nobody@flickr.com (\"ninafneves\")","author_id": "114340513@N07","tags": ""},......]})
The Page HTML Code
Now I am coming to the implementation part, see my web page HTML code which only has 3 things:
- Textbox
- Button
- Div.
You put your search tags on the textbox and click the button. Then the API call is made, and images (which are received from Flickr API), are shown on the div.
<input id="search" type="text" placeholder="search text" /><button id="submit">Submit</button><div id="outputDiv"></div>
Here I will implement this API with jQuery AJAX method.
I have to use jsonp for dataType and jsonFlickrFeed for jsonpCallback properties.
So the jQuery AJAX Method code will be:
var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" + $("#search").val();$.ajax({url: flickerAPI,dataType: "jsonp", // jsonpjsonpCallback: 'jsonFlickrFeed', // add this propertysuccess: function (result, status, xhr) {$.each(result.items, function (i, item) {$("<img>").attr("src", item.media.m).appendTo("#outputDiv");if (i === 5) {return false;}});},error: function (xhr, status, error) {console.log(xhr)$("#outputDiv").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)}});
Explanation: On the success callback function I have used .each() method to loop through the contents and show the first 5 images on the outputDiv.
Also see how I have appended the search text value to the url field.
CHECK THE DEMO — — Download
2. Implementing Flickr Public API with jQuery getJSON Method
Now I will use jQuery getJSON Method to implement Flickr Public API.
Note that I am passing jsoncallback to the URL for changing the JSONP wrapping function. Also check how the tags, tagmode, format fields values are passed as the 2nd parameter.
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";$.getJSON(flickerAPI, {tags: $("#search").val(),tagmode: "any",format: "json"}).done(function (result, status, xhr) {$.each(result.items, function (i, item) {$("<img>").attr("src", item.media.m).appendTo("#outputDiv");if (i === 5) {return false;}});}).fail(function (xhr, status, error) {alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)});
CHECK THE DEMO — — Download
3. Implementing Flickr Public API with JavaScript
We can also implement this Flickr API with JavaScript. As this API is returning jsonp, therefore I will create a script tag and assign its src property to the API url.
Next I append this script to the page head.
Finally create a JavaScript function called jsonFlickrFeed, which will be called automatically when the jsonp is downloaded completely.
To show the images you can loop through them with .forEach() method of JavaScript and show it inside the div.
HTML of the Page
<input id="search" type="text" placeholder="search text" /><button id="submit" onclick="JavaScriptFetch()">Submit</button><div id="outputDiv"></div>
JavaScript code
function JavaScriptFetch() {var script = document.createElement('script');script.src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" + document.getElementById("search").value;;document.querySelector('head').appendChild(script);}function jsonFlickrFeed(data) {var image = "";data.items.forEach(function (element) {image += "<img src=\"" + element.media.m + "\"/>";});document.getElementById("outputDiv").innerHTML = image;}
CHECK THE DEMO — — Download
Conclusion
Overall I think jQuery is a great library to implement API’s of all sorts and I myself use it on my codes.
I hope I have explained the codes clearly.
Please do me a clap
If you really like this article then please do me a clap, it will surely bring a smile to my face and will motivate me to create & publish new article on CodeBurst every week.
Your comments are most welcome.
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
