Wednesday, December 5, 2007

A Simple Blogger Tag Cloud Widget


This morning I did some hacking and built my first custom Blogger widget. This is the code for the simple tag cloud you see here on Compender. Feel free to copy and modify the source as you see fit. I tried to comment it best I could so others could fool around with it. It's a mix of JavaScript and Blogger Code, so it is only functional as a Blogger Widget.

Update 4/19/09 removed default link underline by popular request and cleaned up the code a wee lil' bit.

Update 4/17/09 to fix id='Label1' error. Changed default settings to no visible counts.

Updated 1/2/08 to restrict by a minimum Tag count to reduce clutter for blogs with a zillion tags.

Code:
<b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/

//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false;  // show counts? true for yes, false for no
var minCount = 1;  // what is the minimum count for a tag to be shown? 1 for all


//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push(&quot;<data:label.name/>&quot;);
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push(&quot;<data:label.url/>&quot;);
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
{
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
}
}
</script>
</div>
</b:includable>
</b:widget>
Download Source

Installation:

If you already have a Labels page element installed, skip to step 2.

Step 1: Install the Labels page element by browsing to your template settings:



Click "Add a Page Element" in the column you wish:



Then find the Labels page element and click "Add to Blog":



Step 2: Replace the Labels page element widget code with the custom tag cloud code above.

First navigate to your templates source under your template settings:



Then check off "Expand Widget Templates":



Search for the Label page element you are replacing by searching for widget code. It will look something like this
<b:widget id='Label1' locked='false' title='Tags' type='Label'>
but id and title maybe different, so use your browser's search tool and look for type='Label'.

Delete the Label widget code from the start to the end marked by
</b:widget>
and replace with the custom Tag Cloud code from above.