Making the flickr badge your own

It was something I’ve been meaning to look into for a while - styling my flickr badge so it’s a bit prettier and w3c friendly.

In case you hadn’t heard, flickr offer a nifty feature called a flickr badge which allows you to include a selection of photos from your account on a web page.

Out of the box, the HTML badge code includes a naughty table so the first thing to do was strip that out and replace the table tag with a div. That worked and I left it for a few months until this morning when one of my clients asked for me to include a badge on his site.

I can allow quick and dirty hacks on my own site but when it’s someone’s business you want to push the boat out a bit don’t you? So now I’m left wondering what can and can’t be done with the code flickr churn out, a quick Google search returns a couple of interesting sites:

• Elliot Swan’s flickr API reference
  All the Javascript parameters you need to know, plus a handy example snippet of the output HTML as a guide.
• Veerle’s W3C valid flickr badge
  In a similar vein to Elliot’s site but more emphasis on the styling and includes an example of how to recreate the flickr Veerle uses on her own site.

See my first tidy draft in action, there’s still room for improvement and next will be to replace the portfolio images with flickr versions.