Embedding Picasa Web Album galleries on your webpages

Picasa Web Albums offers some "cut and paste" code to display the album cover of a single album on your webpage.  However, I'm sure that many people would like to do more than this - such as automatically showing the covers of all the albums in their gallery at once.  Although that is possible via server side programming (making use of the the RSS feeds that PicasaWeb produces), not everyone has the ability to use such a server side solution.

However, with the aid of Yahoo's new "pipes" service, which allows easy manipulation of RSS feeds, and crucially allows the results to be output as JSON, it's possible to pull the data out of the the PicasaWeb RSS feed, and process it all on the client.

This may not be a fully polished solution (and the Pipes service can be very slow at times - taking a good number of seconds to run), but below is a proof of concept that the technique works.

Proof of concept

1. First I produced a Pipe, that takes a PicasaWeb gallery name as an input parameter, and simply fetches the RSS feed for that gallery.
2. I then request the pipe via a <script> tag on the page, crucially passing the additional parameters to format the data as JSON, and to make it call my own routine as a callback to process the data.
3. Processing the data simply loops through the data, pulling out the album cover thumbnails, titles, and descriptions, and in this proof of concept displaying them in a very simple form

The code snippet comes out as this:

<script> 
function output(data)
{

for (var i = 0; i < data.count; i++)
{
var item = data.value.items[i]; 
var title = item["media:group"]["media:title"].content;
var imageurl = item["media:group"]["media:thumbnail"].url;
var description = item["media:group"]["media:description"].content;
var link = item.link; 
document.writeln("<a href='" + link + "'><h2>" + title + "</h2><img src='" + imageurl + "'/></a><p>" + description + "</p>");
}
}
</script> 
<script src="http://pipes.yahoo.com/pipes/9HJi_gu42xGyw4mEdbq02Q/run?GalleryName=documentingpicasa&_render=json&_callback=output"></script>