Using the Flickr API to Show Photos

December 30, 2009

Hosting and serving images or photography, and doing it well, is one of the 'hard' problems of web development. Most things like serving text content is trivial, but images are another story. To do it well, you have to resize the image, make sure it's viewable on the web, store lots of data, and deal with the consequences of tranferring large amounts of data from your server to the user's browser / computer. I was talking with Mark Atwood, and he suggested using Flickr to host my photography.

Flickr, as you probably already know, is the most popular social photography site, and they make it incredibly easy to post and share photos. Getting data from one site to another can be a pain, but fortunately, Flickr provides an API. All I really wanted to do was create a div with a specific id, and have my site grab all the photos from Flickr and display them. I wanted it to look like this:

<div id="photoset-72157622891400543" class="flickr-photoset"></div>

To do this, all I really had to do was make an ajax call to my server-side Flickr app, and then stick the photos in the div. Then, I used jQuery UI's dialog box to popup a bigger photo when you click on it.