Make your own custom code for a WordPress-style Flickr badge
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:
- Choose HTML badge
- 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
- 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;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" 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">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=3&display=random&size=t&layout=h&source=user_tag&user=47051377%40N00&tag=yourtag"></script>
</tr>
</table></span>
</td></tr></table>
<!-- 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:
<style>
#flickrtbl td { width:76px;height:76px;overflow:hidden;border:1px solid #CCC;padding:3px;}
#flickrtbl td img{ width:60px;height:60px;}
</style>
<table id="flickrtbl"><tr>
[PASTE CODE HERE]&t=1 </td>
</tr><tr>
[PASTE CODE HERE]&t=2 </td>
</tr><tr>
[PASTE CODE HERE]&t=3 </td>
</tr></table>
That’s it – just paste that into your HTML page. Your badge will look something like this:
For more control over your badge:
Custom Flickr Badge API Documentation
this is ok but some of my images repeat because each row is random
Some browsers do that – some don’t. Try this, add a fake parameter “&t=1”, “&t=2”, “&t=3” to the end of each script line. So for example, the end of my first badge code line would read: set-72157621787340161%2F&t=1
That seems to fix it in Safari for me. See this demo:
http://thedesignspace.net/flickrbadge.htm
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!
I don’t know off hand, but I believe you might be able to use javascript to add the target=”blank” attribute to the links if you know their classname. I don’t have time to write it now but may try it later.
Ellen
Thanks …buddy..you saved my day
—–