flickr.callFlickr, flickr.comments & flickr.favorites

Introduction

I was interested in displaying the number of comments and favorites for drawings that I had posted on flickr on my portfolio site, and after a bit of mucking about with the flickr API I was up and running.

This is my exact implementation from my portfolio, so to use this code verbatum you'll need an unordered list inside of a div with an id of "caption". I expect you'll want to change that to suite your own markup. You'll also need your own API key which you'll assign as flickr.key and change the value of flickr.photoURL to the path of your photos.

Overview

The init method make a call to flickr.callFlickr, which takes an object as its argument with two properties: method and cb. Method is the name of the flickr transaction you want to call, and cb is the callback function you intend to route the response through.

flickr.callFlickr will only execute if it finds an element with an id of "flickrImg". It will parse the photo id from the src attribute of the image and then make the transaction request via a script element it creates.

The flickr API will send its JSON response to the method we defined as our callback. The first callback is flickr.comments which checks to make sure we got comments back and populates a list item element with the data, taking plurality into account. It then calls flickr.callFlickr, this time with a request for favorites.

flickr.favorites does essesntially the same thing as flickr.comments - it makes sure there is a comment count, and then appends the data to the list item element.

Usage

After assigning your flickr image an id of "flickrImg", simply call flickr.init() from the window's load event or wherever you like.

As an Exercise for the Reader

My requirements were that this only need work on a gallery page with a single image. You, however, may need it to work on the front page of your blog with multiple images. A modification using class names instead of id so that multiple photos could be used is not too far a stretch from the current implimentation.

Example

Colored pencil portrait entitled Clara, Newborn

Colored Pencil on Cold Press Illustration Board
August 2007
8.5 x 11"

The Source

var flickr = {
	photoURL: "http://flickr.com/photos/sgchipman/", // update this to your photo path!
	key:"yourKeyHere",
	init: function() {
		flickr.callFlickr({method:"flickr.photos.comments.getList",cb:"flickr.comments"});
	},
	
	callFlickr: function(argObj) {
		if(!document.getElementById("flickrImg")) return;

		var src = document.getElementById("flickrImg").getAttribute("src");
		flickrPhotoID = src.substring(src.lastIndexOf("/")+1,src.indexOf("_"));
		var flickrScript = document.createElement("script");
		flickrScript.setAttribute("src","http://api.flickr.com/services/rest/?format=json&jsoncallback=" + argObj.cb + "&method=" + argObj.method + "&api_key=" + flickr.key + "&photo_id=" + flickrPhotoID);
		flickrScript.setAttribute("type","text/javascript");
		document.getElementsByTagName("head")[0].appendChild(flickrScript);
	},
	
	comments: function (response) {
		if(response.comments.comment){
			var li = document.createElement("li");
			li.setAttribute("id","flickrData");
			var plural = response.comments.comment.length>1?"s":"";
			li.innerHTML = "This drawing has <b><a href=\"" + flickr.photoURL + flickrPhotoID + "\">" + response.comments.comment.length + "</b> comment" + plural + "</a></b> on Flickr";
			document.getElementById("caption").getElementsByTagName("ul")[0].appendChild(li);
		}
		flickr.callFlickr({method:"flickr.photos.getFavorites",cb:"flickr.favorites"});
	},
	
	favorites: function(response) {
		if(response.photo.total) {
			var favURL = flickr.photoURL + flickrPhotoID + "/favorites";
			var plural = response.photo.total>1?"people call":"person calls";
			if(!document.getElementById("flickrData")) {
				var li = document.createElement("li");
				li.setAttribute("id","flickrData");
				li.innerHTML = "<b><a href=\"" + flickr.photoURL + flickrPhotoID + "/favorites\">" + response.photo.total + " " + plural +"</a></b> this drawing a favorite on <a href=\"" + flickr.photoURL + flickrPhotoID + "\">Flickr</a>.";
			} else {
				document.getElementById("flickrData").innerHTML += " and <b><a href=\"" + flickr.photoURL + flickrPhotoID + "/favorites\">" + response.photo.total + " " + plural + " it a favorite.</a></b>";
			}
		} else {
			if(document.getElementById("flickrData")) document.getElementById("flickrData").innerHTML += ".";
		}
	}
}

License

This code is issued under a Creative Commons license. You do not need my permission to use it, though I'm always interested in seeing where my code has ended up if you want to drop me a line.

slayeroffice main