How to Install Top Commentor Cloud Widget

Reward your top commentators by displaying their names with clickable links on your blog. One of the more popular methods is by using a top commentators widget.

We will make a cloud, just like a label cloud, except with commentators as the content.

What you see above is a screenshot of the widget, with 30 top commentators, arranged alphabetically. The comment counts are extracted from Field of Dream’s most recent 2000 comments. Comments are sourced from comments feed and processed via Yahoo Pipe. You can see the live widget in my widget showcase blog.

I believe this commentators cloud is the first of its kind, so consider yourself lucky Google sent you here :).
Okay now, enough with shameless promotion, let’s get to work:

I. Installing Commentators Cloud

1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Enter the title of your widget e.g. Commentators Cloud.
6. Copy the code below and paste it inside the content box.
7. Click Save.

<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://www.bloggersentral.com/. Please do not remove this credit and the “Get this widget” link at the bottom of the code.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
 max = ccCount;
}
if (ccCount < min)
{
 min = ccCount;
} 
} 
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name
display = display + ccLName + " ";
}
document.write(display);
}
</script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.abdul-hakeem.com
 &Exclusions=Anonymous,Greenlava
 &ShowHowMany=20
 &Order=alphabet
 &_callback=cCloud
 &_id=cfa196644e1d6159c9183548c4b5e2f5
 &_render=json" 
type="text/javascript"></script>
</div>
<span style="font-size: 80%; float:right;;margin-top:10px;">Get this <a href="http://bloggerehow.blogspot.com/2011/06/how-to-install-top-commentor-cloud.html" target="_blank">widget</a></span>
<!-- Top Commentators Cloud End -->

II. Customizing Commentators Cloud


Notice the highlighted items in the code? That’s where you need to enter your own inputs:

1. YourBlogUrl (Red line). This is your blog URL, replace http://www.abdul-hakeem.com with yours. Make sure you omit the slash at the end of the URL (as in .com/).
2. Exclusions (Blue line). List the commentator names you want to exclude from the cloud. Separate each name with a comma, and don’t put space between them.
3. ShowHowMany (Green line). Specify how many top commentators you want to appear in the cloud.
4. Order (Yellow line). Enter alphabet if you want to arrange the names alphabetically. Enter frequency if you want to arrange them by frequency (with the most frequent commentators on top).
5. Comment count (Aqua line ). Comment count (in bracket) is displayed by default. To remove it, just delete this line of code.

Enjoy!

Posted in Blogger , Cloud , Top Commentor , Widgets