Make your own custom code for a Wordpress-style Flickr badge
February 24, 2009
Most Popular | Javascript | Snippets | Web Building
NOTE: This post has been superceded by a better method to create a custom badge posted here

To create a nicer looking Flickr badge, use Flickr's badge creation tool to get the right user code and content codes for your badge.

Go to:
Create your own Flickr badge and make the selections as specified:

Ads by Google

Posted by ellen at February 24, 2009 08:33 PM

  1. Choose HTML badge

  2. Select the content you want to show.

    • Would you like to include your buddy icon & screen name at the bottom? Choose No

    • How many items would you like to show? Choose 3

    • Which ones? Choose a random selection

    • What size? Square

    • Which orientation would you like? Horizontal

  3. Check off No background, No border.

The code will look something like the example below.

<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}

<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">

<script type="text/javascript" src=""></script>




<!-- End of Flickr Badge -->

In the red text, change count=3 to count=4 to get 4 images across. Paste only the line of code in red into the table code below, 3 times where indicated:

  #flickrtbl td { width:76px;height:76px;overflow:hidden;border:1px solid #CCC;padding:3px;}
  #flickrtbl td img{ width:60px;height:60px;}
  <table id="flickrtbl"><tr>
  [PASTE CODE HERE]&t=1 </td>
   [PASTE CODE HERE]&t=2 </td>
   [PASTE CODE HERE]&t=3 </td>

That's it - just paste that into your HTML page. Your badge will look something like this:

Picture 8.jpeg

Ads by Google


this is ok but some of my images repeat because each row is random

Hey, thanks for the fine code! Do you happen to know how target=_blank works with this? I really need my pictures to open in new window. Thanks!

Thanks saved my day

Ads by Google

 RSS   |   Contact Me

Ads by Google