Adding a Flickr Badge to Vox

Flickr is an online photo management site (some might say it is the online photo management site). Users upload their photos to share amongst friends and strangers.

Vox is an social blogging site, brought to you by Six Apart, the same company that brought blogging to the masses with the Movable Type blogging platform and Typepad a hosted solution.

Vox allows you to link to your Flickr account and import images as assets, but this is a manual process, there is no easy way to automate this. Another option is to add a Flickr badge to your sidebar. These badges can be flash based or simple html and can be customised to some degree to match you site style.

The first step is to get the badge code.

1. Go to to http://www.flickr.com/badge.gne (you will need to be signed into flickr).
2. Follow the on screen instructions and at the end you will be given a snippet of code to paste into a page below is some sample code for the flash based badge.

<!-- Start of Flickr Badge -->
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner { 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_person_id=????????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 items from <a href="http://www.flickr.com/photos/????????">Your Name Here</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 -->

3. Log into Vox, at the bottom of your sidebar you should see a link called Dress up your sidebar.
4. Click on the link.
5. Give the widget a Name, e,g. My Pictures
6. Paste the code into the Widget Code box and click OK.

You now have a flash based flickr badge on your page, however there are some problems as you can see from this screenshot.
The badge is flush to the left of the sidebar and the height is wrong, the badge is cut off. What we need to do is make a few changes for the code. We will start by centering the badge in the sidebar by removing the fixed margins and replacing them an automatic margin like so

.zg_div {margin: auto; width:117px;}

Now we need to get some height on the div that contains the flickr badge

<div class="zg_div" height="300"><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>  

Now your Flickr badge should be sitting nicely in the middle of the sidebar full height. Take a look at my Vox page to see the final results.