Last November, I gave a lightning talk at the Cincinnati .NET User’s Group on using the Flickr API with FlickrNet and ASP.NET MVC. I had been messing around with the API shortly after joining the service in late 2006, but mostly through .NET code. Shortly after my talk to CINNUG, I decided to see what I could do to create a photo gallery completely client side. Obviously, there still is server-side code on Flickr’s end through the API, but I wanted to create the gallery on the API-consuming side with only HTML, CSS, and JavaScript. As it turns out, thanks to our very good friend, jQuery, creating a client side flickr-enabled photo gallery isn’t that hard. The Flickr API is well-documented, and making any public non-authenticated calls follows a pretty explicit pattern.
Let’s use a common use case as an example – retrieving recent photos. First of all, you will need a Flickr API key. They are free and easy to get, I have had a non-commercial key one for the past 5 years simply for doing code experiments on my own. You do have to “apply” for a key, but the non-commercial keys are established almost immediately as I recall.
Once you have your key, you are ready to go! Keep in mind, this example assumes that you have some public photos in your photostream. If you do not, you can still retrieve photos from the public, but I found a photo gallery hosted on your own website is more interesting if it is your own photos. Also, this example assumes that you have included jQuery into your page. I like to reference the version out on googleapis. With that setup, making a client-side call to grab recent photos is pretty straightforward. Create your URI against the Flickr rest service, make the call with one of the jQuery AJAX methods (getJSON in this example), and process the JSON results. Please note that you will need to provide your own API key and user ID to actually use this example code.
var flickrEndpoint = 'http://api.flickr.com/services/rest/?format=json&jsoncallback=?';
function loadRecentPhotos() {
var flickrApiKey = 'Your Flickr API Key';
var userId = 'Your Flickr UserID';
var count = 12;
var method = 'flickr.people.getPublicPhotos';
var uri = flickrEndpoint + '&method=' + method
+ '&api_key=' + flickrApiKey
+ '&user_id=' + flickrUserId
+ '&per_page=' + count;
$.getJSON(uri,
function (data) {
populateThumbnails(data.photos, containerId);
}
);
}
function populateThumbnails(photos) {
var photosListHtml = '<ul>';
$.each(photos.photo, function (i, photo) {
var element = '<li><a rel="group-'
+ containerId + '" href="'
+ getMedium640PhotoUrl(photo) + '" title="'
+ photo.title + '"><img src="'
+ getSquarePhotoUrl(photo) + '" /></a></li>';
photosListHtml += element;
});
photosListHtml += '</ul>';
$('#recentPhotos').append(photosListHtml);
$(".thumb").colorbox();
}
function getMedium640PhotoUrl(photo) {
return 'http://farm' + photo.farm + '.static.flickr.com/'
+ photo.server + '/' + photo.id + '_' + photo.secret + '_z.jpg';
}
The populateThumbnails call simply takes the JSON results from the flickr.people.getPublicPhotos call, creates an unordered list, and puts the results into the recentPhotos container (<div id=”recentPhotos”>). Following this same pattern, one could easily grab photosets, photos for a particular photoset, or any other application. For a live example of this use of the Flickr API, you can look at the footer or or the photos section of this website.
