Creating an MT4 widget to display your public Picasa albums

Notice my nifty table of my public Picasa albums over there on the left sidebar. Pretty cool huh? So do I have to publish in Movable Type every time I add a new Picasa album? No, that would be silly.

Instead, I'm using some clever DHTML javascript to build an N-column table and populate it dynamically with a JSON call out to the Picasa web API.

Read on for instructions and code on how I built mine.
Notice my nifty table of my public Picasa albums over there on the left sidebar. Pretty cool huh? So do I have to publish in Movable Type every time I add a new Picasa album? No, that would be silly.

Instead, I'm using some clever DHTML javascript to build an N-column table and populate it dynamically with a JSON call out to the Picasa web API.

Here's how I built mine:

Create a new widget template by going to the Widgets quickfilter under Design...Templates and clicking the "Create Widget template" link up top. Name it something clever, like "Photo Album".

Set up some basic HTML elements that all Widgets have:

My Photo Album



Mouse-over a thumbnail to see album name


After the `

` tag, insert a script to dynamically build an N-column wide HTML table to hold the album thumbnails. I got some of the code from another site, but I can't remember which one... Anyway, here is my version:

Change what you want. The `cols` variable stores the number of columns in the table. You can also choose to get your thumbnails in different sizes from the Picasa API. Go [here](http://code.google.com/apis/picasaweb/reference.html#Parameters) to read about all the values. If you change the thumbnail size, be sure to change `albumPic.height` and `albumPic.width` to match.

Finally, we need a call out to the Picasa API that will in turn send a callback to our `showalbums` function. Here's what that looks like:

Once again, the query parameters are documented by Google [here](http://code.google.com/apis/picasaweb/reference.html#Parameters)

Remember to keep all this enclosed in the `

` tag at the bottom. Now add your shiny new widget to a widget set (I added mine to the Primary sidebar set). Publish your pages and enjoy your new webfunktual dynamicism.

PS -- This seems to work fine in FireFox 2.x and Internet Exlorer 6.0. I don't have the time or energy to test it on anything else :)