Flickr has a very popular widget that they call a flickr badge. There are two different forms for this widget: HTML or flash. The flash badge has a slightly fancier, more dynamic, appearence. The HTML badge can be controlled through stylesheets by blog where the badge is installed.

You can see an example of a Flash Flickr badge to the left. It shows all public photos on the Flickr.com site that are tagged with the word "netspeed2007". And on the right you can see an example of an HTML Flickr badge that shows random public photos tagged "alc2007jpl" (last year's ALC conference in Jasper).

To create a Flickr badge:

1. you must first login to your flickr.com account
2. then visit the badge generate page
3. choose either an HTML badge or a Flash badge
4. choose the photos you want to display on the badge
5. choose the colors for the badge
6. copy-and-paste the widget code

All of these steps, except for the last one, is handled by user-friendly forms on the Flickr website. You just fill in the form. Your choices are used to configure the code that makes up the widget. In the last step, you are presented with the code for the Flickr badge, which you can copy-and-paste onto any website or blog. The last part is the only place where you have to do some work!

Here is the code for a Flickr Badge (Flash version) that displays public photos tagged "netspeed2007".

<!-- Start of Flickr Badge -->
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner {border: solid 1px #000000; background-color:#ffffff;  color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'ffffff';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_tags=netspeed2007&zg_tag_mode=any';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge.gne"style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">What is this?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">This is a Flickr badge showing public photos from Flickr tagged with <a href="http://www.flickr.com/photos/tags/netspeed2007">netspeed2007</a>. Make your own badge <a href="http://www.flickr.com/badge.gne">here</a>.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>
<!-- End of Flickr Badge -->