I thought I’d share with you how I made my flickr badge. It’s pretty easy actually. Flickr takes you through a short wizard and you wind up with a handful of lines of code to slap on to your web page. Well, I didn’t really like what design choices flickr gave me so I set out to hack it, which is where it gets more difficult so I’m divulging. First of all, you don’t need all the crap that flickr gives you. You can effectively pare it down to just this:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=[flickrid]"></script>

[flickrid] is your unique ID that flickr gives you. It should be % encoded so the @ sign becomes %40. If you just want to copy and paste my code, fine. Just use www.idgettr.com to get your flickrid.

You could just paste this into your web page and be done with it but I wanted to style it so it fits in with the design of my page. I came up with this:

<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr {
  width: 155px;
  height: 250px;
  padding: 0px;
  margin-top: 20px;
}
#flickr img {
  float: left;
  margin: 6px 6px 0 0;
  background: #808459;
  padding: 4px;
  width: 63px;
  height: 63px;
}
</style>
<div id="flickr">
<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong><br />
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=[flickrid]"></script>
</div>
<!-- End of Flickr Badge -->

I’ll explain how this works.

First, I surrounded my script tag with a div container. This is my “flickr” box where all the thumbnails are going to be contained. I named it “flickr” so I created a style element ID called #flickr {}. I gave it a width of 155 pixels and a height of 275. I told it not to pad the sides and put in a margin at the top of 20 pixels so there would be some separation from the item above it.

So that controls the box but it does nothing yet with the photos that flickr is going to send me. For that, I create another style element for the images that are contained within that box. This is done with the #flickr img { } element. This says “give everything with an img tag that’s inside the flickr container” these properties.

I told each image to float to the left so it butts up against the left margin of the box. I told each image that they are to have a margin on the top and right to control the spacing between each image. I gave each image a background color and padding to create a 4 pixel border around them. And I wanted the height and width of each image to be 63 pixels square. This was the biggest I could make them and still retain my 2-column layout. I have only 155 pixels in width to deal with so the math goes like this:

  155
  126 (the width of 2 pictures)
   12 (the margins on the right side of the pictures
-  16 (the 4 pixel border around the pictures - 2 left and 2 right
-----
    1

I have 1 pixel left over on the right side so I just ignored it. The 155, by the way, was set for me by another part of my web page design so I had to work within those constraints.

Then, I stuck in flickr’s logo to tell people where those photos come from and there you have it.