I recently got a comment asking me how I made my badge on the sidebar of my blog. Instead of responding directly to the e-mail, I figured that I might as well just write it up for future reference.
Step 1: Get your badge made
The first thing you’ll need to do, is head over to Flickr’s Make a Badge page. At the time of this writing, there are five steps that you need to do. Here is what I did on each step:
Step 1
Pick the HTML badge.
Step 2
I chose all of my public photos, but choose whatever fits your fancy.
Step 3
I chose to not display my buddy icon or my user name. I also selected to pick 5 photos (we’ll change this later) that were random and were of the square size. I also selected that I would style this badge myself later.
Step 4
I un-checked the boxes for no background and no border.
Step 5
We’re done… almost. Copy the badge code into your favorite text editor.
Step 2: Edit Output
OK, now we need to play with the code Flickr gave us and we’ll be on our merry way.
The first thing we’ll do is change the number of pictures to be displayed from 5 to 8. To do this look for:
?count=5
and change that to
?count=8
This will be within the script tags (since we’re changing the Javascript). Now, we’ll have 8 pictures displaying in our badge. Of course, you can really pick any number you want to… up to a limit.
Now, Flickr also includes a link back to Flickr.com at the top of the badge. I didn’t really want that, so I deleted it from the produced code. If you’re familiar with HTML, this is an easy find. Basically, you want to remove the a tags and everything inside of it.
Step 3: Personalize
Next, you’ll want to style it. The badge comes with some default styles that you can play with, but if you like the look that I have, I’ve provided the CSS and HTML I used here for your reference.