Which Flickr Google Gadget to use on your Blog

When I was moving my blog to its new location I decided I wanted some of my recent photos from my Flickr account to be shown. In the Layout style of Blogger it seemed that the way to do this was to add a Gadget. I clicked Add Gadget and searched for Flickr and back came 151 gadgets. The first page was things like photos of Christmas, Cannes, France, Italy. Not what I was looking for.

I googled for "which is the best google gadget for flickr" and found a zdnet article on 10 essential google gadgets. It recommended Flickr Nugget which I tried, but it didn't let me do exactly what I wanted which was to show a particular label out of my photostream. I also found that when added to my blog it didn't look good and had scrollbars and things.

This was the problem with the next 2 or 3 gadgets that I tried as well. Either they didn't fit well on the page, or they didn't do what I wanted. It seemed that I - like 151 people before me - was going to have to build my own google gadget. I plan to write more about my experiences writing my first google gadgets another time, but the short version is that it was not the simplest way to go.

What turned out to be much simpler was the following
  1. Go to the Flickr Badge Generator and follow the steps to create an html badge. I entered a label from my photostream, and a random selection of 3 in a vertical orientation of thumbnails
  2. Select All the HTML shown in the text box and copy to clipboard
  3. In Blogger from the Page Elements tab of the Layout tab click Add a Gadget
  4. Scroll down and pick the HTML/JavaScript Gadget in the Basics category
  5. Give a Title like "My Photos", paste in the code, and save
After the fact I went back and tweaked a few things like removed the flickr_badge_uber_wrapper table with the link to flickr.com, as well as changed the text in the source link to just "more...". But that was really about it. I had spent more time searching and trying out flickr google gadgets than I did in implementing the final solution.

1 comment: