Blogger top commentators 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.

This time we will create yet another top commentators widget, but with a different look. We will make a cloud, just like a label cloud, except with commentators as the content.

I personally prefer this cloud version over the conventional top commentators widget, simply because it packs more commentators for the same amount of space.

What you see above is a screenshot of the widget, with 30 top commentators, arranged alphabetically. The comment counts are extracted from Blogger Sentral’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:

 

1. 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 commentators 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.bloggersentral.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:5px;">Get this <a href="http://www.bloggersentral.com/2010/02/top-commentators-cloud-widget.html" target="_blank">commentators</a> <a href="http://www.bloggersentral.com/" target="_blank">widget</a></span>
<!-- Top Commentators Cloud End -->

 

2. Customizing Commentators Cloud

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

1. YourBlogUrl (code line 37)
   This is your blog URL, replace http://www.bloggersentral.com with yours. Make sure you omit the slash at the end of the URL (as in .com/).
2. Exclusions (code line 38)
   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 (code line 39)
   Specify how many top commentators you want to appear in the cloud.
4. Order (code line 40)
   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 (code line 28)
   Comment count (in bracket) is displayed by default. To remove it, just delete this line of code.  

3. Cloning and customizing the pipe (optional)

The cloud will work just fine even without you going through this step. However I encourage you to clone the pipe, because in doing so:

1. You will be able to modify the pipe to suit your preferences.
2. You cloud will be independent of my pipe. It will stay running even when something happens to my pipe.

Follow the steps below:

1. Go to my Yahoo! pipe here.
2. Log in to your Yahoo! account.
3. Create a clone by clicking the Clone button.
4. Click edit source to edit it in anyway you like.
5. When you’re done editing and saving, test run it by clicking Run Pipe button to confirm the output of the pipe.
6. To use your pipe in the Commentators Cloud widget, copy the ID and paste it to replace the existing id in line 42. (The ID is in your browser’s address bar when you are viewing or editing the pipe. It’s the end part the URL).

Finance,loan and insurance

Enjoy!