Flickr - Photos Share JSON feeds

Posted Sat, 02/13/2010 - 15:59 by admin

Flickr - Photos Share JSON feeds API

Example Flicker JSON query:

http://api.flickr.com/services/feeds/photos_public.gne?tags=surf,pipeline&tagmode=all&format=json&jsoncallback=?

Example Data Output returned:

({
		"title": "Recent Uploads tagged surf and pipeline",
		"link": "http://www.flickr.com/photos/",
		"description": "",
		"modified": "2010-02-11T10:00:51Z",
		"generator": "http://www.flickr.com/",
		"items": [
	   {
			"title": "Ben Siverson",
			"link": "http://www.flickr.com/photos/47427439@N04/4348563078/",
			"media": {"m":"http://farm5.static.flickr.com/4072/4348563078_d50acdc357_m.jpg"},
			"date_taken": "2010-01-27T11:29:36-08:00",
			"description": "<p><a href=\"http://www.flickr.com/people/47427439@N04/\">Alberto de Abreu Sodre<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/47427439@N04/4348563078/\" title=\"Ben Siverson\"><img src=\"http://farm5.static.flickr.com/4072/4348563078_d50acdc357_m.jpg\" width=\"240\" height=\"151\" alt=\"Ben Siverson\" /><\/a><\/p> ",
			"published": "2010-02-11T10:00:51Z",
			"author": "nobody@flickr.com (Alberto de Abreu Sodre)",
			"author_id": "47427439@N04",
			"tags": "water hawaii surf shot board drop fotografia pipeline bodu sodre albertodeabreusodre"
	   },
	   {
			"title": "Volcom Pipeline Pro 2010",
			"link": "http://www.flickr.com/photos/38181364@N03/4346295599/",
			"media": {"m":"http://farm3.static.flickr.com/2748/4346295599_fb15bfecaf_m.jpg"},
			"date_taken": "2010-02-01T20:42:23-08:00",
			"description": "<p><a href=\"http://www.flickr.com/people/38181364@N03/\">Adrian Hopkins<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/38181364@N03/4346295599/\" title=\"Volcom Pipeline Pro 2010\"><img src=\"http://farm3.static.flickr.com/2748/4346295599_fb15bfecaf_m.jpg\" width=\"158\" height=\"240\" alt=\"Volcom Pipeline Pro 2010\" /><\/a><\/p> <p>Jamie O\'Brien holding up the winners trophy at the Volcom Pipeline Pro 2010.<br /> Banzai Pipeline, North Shore, Oahu, HI.<\/p>",
			"published": "2010-02-10T20:23:24Z",
			"author": "nobody@flickr.com (Adrian Hopkins)",
			"author_id": "38181364@N03",
			"tags": "beach water sport hawaii surf oahu action surfer extreme contest pipe champion surfing northshore winner trophy pipeline surfcontest banzaipipeline surfingcontest jamieobrien winnerstrophy volcompipelinepro2010" 
	   } )

Example client side mashup using jQuery Javascript Library:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){

        $("#images").append("<table>");
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=surf,pipe&tagmode=all&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
             $("#images").append("<tr><td>");
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            $("#images").append("</td></tr><tr><td>");     
            $("#images").append("TITLE:"+item.title);
            $("#images").append("</td></tr><tr><td>");
            $("#images").append("TAGS:"+item.tags);
            $("#images").append("</td></tr>");
            if ( i == 6 ) return false;
          });
        });
        $("#images").append("</table>");
  });

  </script>
  <style>img{ height: 100px; float: left; }</style>
</head>
<body>
<h1> FLickr JSON Mashup Example</h1><br><br>
  <div id="images"></div>
</body>
</html>

Result:

Flickr client side mashup JSON example