Check Out My Shiny New Flickr Badge
You know what, I do want to express myself, okay. And I don’t need 37 pieces of flair to do it.
No. I need a Flickr Badge! For those of you reading this from an aggregator, you’ll need to take a step out of the comfort of the aggregator into the scary world of “web browsing” and view my page from a browser to see the flickr badge on the right.
I know, I’ve gushed about Flickr in the past, but I like how easy they make it to integrate into your own website. They also allow you to put up a a nifty Flash version of a badge, but I settled for the simple HTML badge.
Now if you’re concerned about such things as XHTML validating markup, you really need to quit being so anal and get a life. Having said that, let me show you some small tweaks you’ll need to make so that your flickr badge validates as XHTML 1.0 Transitional (I haven’t tried strict yet). Us anal types can’ go around with invalid markup, now can we?
When you create your badge, Flickr will give you some code to inject
into your web page. The first step is to take the
style element and
either move it inside the
head element of your page or scrape its guts
and slap them inside a css file.
After that, you’ll notice that there’s a
script tag just before a
following tr block. If you move it, you break the badge. Unfortunately,
it doesn’t validate as is so I haacked it (get it? “haacked it” As in
hack? Oh Never mind) by placing the script within a
Finally, I went through and replaced all the ampersands within the URLs
&. After that, voila! My homepage is back to being valid
XHTML 1.0. Do I get a trophy or win prizes for this work? No. But I do
get to sport this nifty piece of geek flair.