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.

top commentator cloud

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!

117 comments to "Blogger top commentators cloud widget"

a February 20, 2010 at 1:20 PM    

Hi Greenlava,

You blog is really nice, looks like you are perfect in blogging ;)I need your help, In my blog older post, newer post, home links are not visible. I think it's not a problem of browser bcoz I can see these link in others blog Includin your blog.

Hope you can help. Please observe my blog and see it is visible or not.

Regards,
Anup kayastha

Author: Hack Tutors

Greenlava February 20, 2010 at 10:59 PM    

@Anup
Strange, this is the third case readers came for help on similar problem. Blogger might have done something, hmm..
Anyway try this -Go to Layout>Edit HTML, add overflow:visible; in #blog-pager and remove float:left; in .post.

lastbash1 March 9, 2010 at 5:30 AM    

Greenlava,

Sorry to keep bugging you for help on this. When I applied your suggestion, the paging tools get moved over to the right column of a specific post rather than to the end of the main body. Any other suggestions? Thanks so much.

Greenlava March 10, 2010 at 9:50 AM    

@lastbash1
Sorry but I can't recall our discussion. What are we talking about here?

JENIE=) March 10, 2010 at 11:19 AM    

will yet to try, thanks for sharing this ;)

Aswani March 14, 2010 at 1:59 PM    

Nice and useful widget. will use it on my blog. Thanks for sharing.

Greenlava March 14, 2010 at 11:19 PM    

@JENIE
Thanks for stopping by. BTW I like your "About Me" :).

@Aswani
You're welcome.

edi April 16, 2010 at 10:10 PM    

Pingin coba!

Greenlava April 17, 2010 at 1:28 AM    

@Achmad Edi Goenawan
I'm glad if you do :)

Kit Courteney April 18, 2010 at 7:43 PM    

Brilliant idea.

I did everything you said and it worked perfectly for 5 minutes and then just stopped.

Puzzled now!

Greenlava April 19, 2010 at 11:27 AM    

@Kit Courteney
You have a comma at the end of your exclusion list. Remove it and the cloud will be back....I promise :)

Practice Swords April 20, 2010 at 3:18 PM    

thanks for sharing the information. its really very fine post.

elok langita April 30, 2010 at 7:49 PM    

love this info ^___^

Martina Boone May 1, 2010 at 12:22 AM    

Hi, I just installed this and nothing is coming up. The only change I made to the code was changing the url and removing the line numbers. Has there been a change to blogger that makes this code obsolete?

Greenlava May 1, 2010 at 12:48 AM    

@elok langita
Terima kasih

@Adventures in Children's Publishing
Removing the line numbers? Please read the FAQs to learn how to copy the code properly.
And please omit the slash at the end of your url.

Martina Boone May 1, 2010 at 11:18 AM    

Thank you very much for your help!

Unknown May 9, 2010 at 6:04 PM    

thx... this is awesome widget.... hhe

Mawardi May 23, 2010 at 6:50 PM    

Thank for your widget

Greenlava May 23, 2010 at 11:28 PM    

@Febriyanto(フェブリヤント)
@Mawardi
You're welcome guys

Leanna Elle May 24, 2010 at 3:35 AM    

Hi Greenlava,

This is amazing! Just what I've been looking for. However, I just installed it on my blog, and I can't filter out my own name - I don't know what I did wrong. Can you take a look please?

http://daisychainbookreviews.blogspot.com/

Greenlava May 24, 2010 at 8:41 AM    

@Leanna (Daisy Chain Book Reviews)
You have to enter your names exactly as they appear, which are this "Leanna (Daisy Chain Book Reviews)" and this "Leanna (Daisy Chain Books)".
Copy and paste the names above into line 38 (omit quotes).

Leanna Elle May 24, 2010 at 8:13 PM    

I did it just as you said, but my name is still showing up. Maybe the brackets are a problem?

I've tried it every way I can think of and my name still won't filter out. These are the ways I've tried:

Leanna (Daisy Chain Book Reviews)
Leanna(DaisyChainBookReviews)
Leanna(Daisy Chain Book Reviews)

Nothing works. :(

Greenlava May 24, 2010 at 10:15 PM    

@Leanna (Daisy Chain Book Reviews)
I think the nearly identical names and/or the parantheses confused the pipe :)
Use this:
&Exclusions=Anonymous,Leanna,Daisy Chain Books
this one should work, I tested it.

Leanna Elle May 24, 2010 at 10:33 PM    

Thank you so much! It works perfectly now. I never would have figured it out! :)

rizal May 27, 2010 at 11:04 PM    

thank...is't cool

Greenlava May 28, 2010 at 3:28 PM    

@rizal
You're welcome, thanks you for dropping by.
It looks good on your blog :)

Kit Courteney June 25, 2010 at 11:09 PM    

Only remembered to come back here today (old age is a terrible thing!), so just read your advice about removing the comma (I'm an idiot!).

Thanks so much for this, it really is appreciated :0)

Tej Kohli July 8, 2010 at 12:36 PM    

Thanks For This Post I am also USing this Plug In

kaka July 11, 2010 at 8:13 PM    

Wow.. thanks . this awesome,. i should try this now

Edna July 23, 2010 at 1:35 AM    

I really like this application. I've been using it for a few months now. What I'm wondering is if there is any way to make this so that I can click on the number of comments by a person and actually get a list of their comments on my pages?

Greenlava July 26, 2010 at 10:33 PM    

@Tej Kohli
@kaka
Thanks for dropping by and commenting.

@Edna
I'm afraid I don't have the answer right now. This will go into my To Do list.

Elżbieta Grabarczyk August 6, 2010 at 7:42 PM    

Nice and useful widget. Thanks!

Greenlava August 6, 2010 at 9:01 PM    

@Ela Grabarczyk-Ponimasz
Thank you for visiting

Aude August 12, 2010 at 3:20 AM    

Hello You !
Thanks so much for your gift ! I use them at work and think about you every morning.
I'm happy for you and think in myself when will be our next start to the world. Enjoy that great liberty.
Good luck Sarha and Peter.
Aude, Kris and Niels

Stela James August 17, 2010 at 7:55 PM    

I like your information. I have been looking for this type of information that is interesting and good.
home jobs

Anup @ Hack Tutors August 30, 2010 at 9:17 PM    

Off topic, but can you tell me if it is possible to update my blog using Facebook account?

Greenlava August 31, 2010 at 4:06 PM    

@Anup @ Hack Tutors
I don't think that's possible.

Tembang Lawas September 25, 2010 at 10:31 AM    

Nice Post i like it, thank for share :)

Greenlava September 25, 2010 at 11:02 PM    

@Tembang Lawas
Thanks for visiting :)

Frolicking Night Owl November 3, 2010 at 6:13 AM    

Thank you. I had to fiddle around with it a bit to get it working, but I think its working now. The Yahoo Pipe thing ... I could not get to work, but I don't think I care??? One thing I'd like to fix if possible ... when I click on the commentor's name, it takes me to the blog profile page instead of to their actual blog. How can I make it take myself & readers directly to their blog?

Mr Ceym November 3, 2010 at 7:51 PM    

Greenlava: Camne kalau taknak dalam bentuk cloud? nak yang biase saje.. How to make it without cloud just straightly display

Greenlava November 3, 2010 at 10:09 PM    

@Mr Ceym
For regular top commentators widget, click the link in the first paragraph of this post. Yang kaler merah tu

Greenlava November 3, 2010 at 10:25 PM    

@Frolicking Night Owl
That depends on the profile you/your readers used when submitting comments. To link to your blog, use Name/URL profile.

anancy November 20, 2010 at 12:56 PM    

he plugin is really useful to build links. I suggest everyone having a wordpress blog to install it. It will help get more visitors to comment and in return get a backlink.
Thanks
Money Management

Shekhar Suman December 15, 2010 at 12:25 PM    

hey greenlava ...
i have installed it but nothing is displaying... can u plz check it out....
http://nayabasera.blogspot.com/

Greenlava December 16, 2010 at 2:17 AM    

@shekhar suman
I see a few curly brackets are missing from your code.
Make sure you copy the code properly -by clicking the <> icon on top right corner of the code sheet, select all and copy.

Shekhar Suman December 16, 2010 at 2:28 AM    

yipee ...... thanku...
thanku very much...can i change the colour ????
i can't find the color in d code....

Greenlava December 17, 2010 at 5:06 PM    

@shekhar suman
Add this code at the beginning of the widget content:
[style]
#WidgetID a {color:lime;}
[/style]

To find the widget ID, read How to find Blogger widget and section Id.

Southpaw January 21, 2011 at 4:20 AM    

This is a fun script and has been working great, but today all the post counts have changed so rather than stating the 40 comments it list on 2 and several people and their counts were dropped right off.

Hearing Aids January 21, 2011 at 4:09 PM    

Superb blog post, I have book marked this internet site so ideally I’ll see much more on this subject in the foreseeable future!

Greenlava January 21, 2011 at 8:57 PM    

@Holly Ruggiero
Sorry but don't quite understand what you mean.

@Hearing Aids
Thanks. You might want to subscribe to our RSS feed too.

Southpaw January 22, 2011 at 3:05 AM    

Well, it seems to have worked itself out but I'll try and explain better what happened

This is what is was before and is now
blogger 1(105) blogger 2 (54) blogger 3 (40) etc. it came up as

blogger 1(3) blogger 2(3) blogger 8(1) it lost commenters too

Website Design February 4, 2011 at 9:09 PM    

Nice To Read,

thanks for Info

Web development comapany February 5, 2011 at 6:05 PM    

Hey thanx for the post..it works

Cheers

Ayush March 9, 2011 at 12:45 PM    

Nice! But are the links dofollow?

Southpaw March 28, 2011 at 2:24 AM    

Me again. I've been watching my comments for a couple of weeks now and the comment numbers are not consistent. They are actually going down.

Greenlava March 29, 2011 at 11:06 AM    

@Holly Ruggiero
This widget only considers your most recent 2000 comments. Older comments will not be counted. That's the reason some counts went down.
At this time your total comments count is 2762.

Southpaw March 31, 2011 at 8:33 AM    

Thanks for explaining that to me.

Mediasiana April 10, 2011 at 8:49 PM    

Thank you so much! It works perfectly now. I never would have figured it out! :)

Bichon Frise Dogs April 22, 2011 at 3:44 PM    

Top Commentators widget is a great reward for all commentators. It motivates them to leave a comment in order to get backlink. Also as I observed, it boosts traffic.

fotografia gamou May 8, 2011 at 2:16 AM    

This is one of the best widget ever

Ainismaira May 22, 2011 at 1:47 PM    

i've added this to my blog.. thank you so much :)

lcrazykid July 15, 2011 at 3:33 AM    

Thanks so much for the Top Commentators widget!

Anonymous,  July 15, 2011 at 4:17 AM    

Hi, I just want to say, I've found so many helpful fixes for my blog on here. With that - I have a question. I'm not sure if this blog (http://www.burlapandbasil.com/) is on wordpress or blogger or what... but I would love to have this cool comment counter at the top right of each post. It'd be great to be able to change the color as well. The number of comments is displayed in curly brackets. I've searched the web over and have been unable to find it. Is this doable in blogger? Any help at all would be greatly appreciated.

Thanks Ahead,
Dawn

Greenlava July 16, 2011 at 2:53 AM    

@While She Was Sleeping
First display the counter by following these steps:
1.Go to Design > Page Elements and click the Edit link on Blog Posts box.
2. Under Post Page Options, tick the "5 comments" checkbox. Remove the "comments" text.
3. Scroll down to Arrange Items. Drag the "5" box to position it under Post Title.
4. Save and view your blog.

post back here once the comment count appears.
We'll style it after that.

Kevin July 22, 2011 at 5:54 PM    

Great and useful top commentator widget.I know you are perfect in blogging.

Shida Radzuan July 26, 2011 at 3:28 AM    

how to remove owner comment?

Greenlava July 26, 2011 at 11:41 PM    

@shida'R
Add the owner's name to line 38:

&Exclusions=Anonymous,OWNER'S_NAME

OnlineCasinoSuite August 1, 2011 at 8:07 PM    

This post provides useful information for us.Very very thanks for sharing this kind of blog.

Anonymous,  August 5, 2011 at 1:48 PM    

Error when I go to clone your pipe :(

"Oops. Unknown pipe."

Greenlava August 7, 2011 at 7:48 PM    

@Cheryl F.
I've fixed the link. You can retry now.

Khairi Mohd August 22, 2011 at 10:16 AM    

GL, Can we reduce the 2000 recent comment to only a few such as 500? It is too many dan demotivate new user to fight for top spot.

Greenlava August 26, 2011 at 9:24 PM    

@Encik Khairi
Yes you can, but you have to edit the pipe for that.

Dani López September 15, 2011 at 6:21 PM    

Great widget!

But...

I worked perfect for a few minutes, and now, nothing...

Do you know what could be the problem?

http://www.freakscity.com

Thanks a lot!

M.Pinto @ ProHacker September 16, 2011 at 6:50 AM    

Bro.. I want to limit the title length. Please help..

Dani López September 16, 2011 at 3:38 PM    

Now it works... Was it someting to do with Pipes? Anyway, thanks for the widget, it´s awesome.

Greenlava September 17, 2011 at 3:56 AM    

@Dani
I believe it was something to do with pipe usage limit. You see a Pipe is limited to 200 runs in a 10 minute span. Every time the run exceeds, the pipe will "rest" for an hour.
You can avoid this by using a clone.

Dani López September 17, 2011 at 4:07 AM    

I´d tried... but it shows an error on Yahoo Pipes, I can´t even clone:

"Sorry, Unable to process request at this time -- error 999."

Thanks!

Kyle September 17, 2011 at 4:18 AM    

wow this is cool. i'm going to do this with my bichon information blog

HD Cafe October 14, 2011 at 2:52 PM    

Thanks for sharing cool widget.

Bearpaw Slippers October 24, 2011 at 3:19 AM    

Very nice. I'm not too good with coding and all that, but I want to try this on my footwear blog.

Idol lash October 29, 2011 at 1:37 PM    

Excellent blog !I have book marked this site so that any time I want to see more on this subject for the foreseeable future!

Rani November 4, 2011 at 1:53 PM    

Thank for sharing this post.Very nice bolg.Its useful for us.

darf November 17, 2011 at 11:03 AM    

Hey, great tool but I do not seem to get any results. Can you check please? darfintheusa.blogspot.com. Thanks !

Greenlava November 18, 2011 at 3:19 AM    

@darf
I don't know how you did it, but you lost all the (soft) line breaks between the code lines. That caused the malfunction.
I suggest you copy the code one more time. Paste it directly in the HTML/Javascript widget. Save and confirm if it works (it should). Then go back to change the blog URL to yours.

Anonymous,  November 18, 2011 at 3:39 AM    

Thank you very much ! It works perfectly for me. Merci beaucoup. My blog : http://ontheroadwithsandy.blogspot.com/ Keep on the good work !

beach towels November 28, 2011 at 8:21 PM    

Excellent blog !I have book marked this site so that any time I want to see more on this subject for the foreseeable future!

Bhupendra Sharma November 30, 2011 at 3:32 PM    

this is great new for me...thanks

whitecappuccino November 30, 2011 at 5:26 PM    

thanks! finally it works on my blog after 4/5 times trying to instal this widget.

Unknown January 5, 2012 at 10:27 AM    

I love the widget! I cloned the pipes and got it set up on my blog. It seems to be working. Is there a way to specify a time frame for the widget. I would really like to use it for a monthly contest that I host that awards books to the person who comments the most. Any help would be appreciated.

Greenlava January 5, 2012 at 12:14 PM    

@Sherri
Wahmaholic.com has a solution, but it's a regular list-type widget (not cloud).

Josie T-girl January 7, 2012 at 9:14 AM    

Luv this widget! It rewards those who take the time an stop to read my thoughts. Thanks!

Is there a way to give each commenter their own lie, a space after each of their numbers?

Thanks for a great widget.

Josie T-girl January 9, 2012 at 1:59 AM    

Sorry, I meant to type ... 'their own line ...'.

Still, I luv your widget!

Greenlava January 9, 2012 at 8:55 AM    

@Josie T-girl
Replace
font-size:
in code line 30 with
display: block; font-size:

Lee January 11, 2012 at 10:03 PM    

like the sound of this too!
gonna try it out
cheers for the post

Lisa January 14, 2012 at 6:48 AM    

I'm really excited about installing this widget on my blog because I have some really faithful commentators that I'd like to recognize.

Unfortunately, the only thing that's showing up is the link to the widget. I've gone through the entire tutorial and all of the comments and replies trying to figure out what's wrong with my code, but I just don't see what's wrong.

My blog addy is www.lisascraftblog.blogspot.com. I'd really, REALLY appreciate if you could take a quick look at what I'm doing wrong.

Thank you sooo much!!
~Lisa

Greenlava January 16, 2012 at 6:51 PM    

@Lisa @ Lisa's Craft Blog
In line 38 you have this: &Exclusions=
To make the widget work you have to either:
Include at least a name to that query e.g &Exclusions=Anonymous
or
Delete the line altogether.

Lisa January 17, 2012 at 6:57 AM    

You sooo rock!!! Thank you!! That fixed it!!

I had tried just leaving Anonymous in there, but when I clicked Run Pipe, I wouldn't get any results. I deleted it and then it did work, but I can see how leaving it blank in the code would mess things up!!

I really dig this widget and I'm going to refer it to my crafty blog friends from now on!!

Thanks again!!
~Lisa

Put3ra February 9, 2012 at 4:44 AM    

Didn't work for my blog o.o ape silapnye nehhh agak2? hakhak

Greenlava February 13, 2012 at 11:11 AM    

@Dzulqarnaen
I couldn't tell either 'cause I don't see the Top Commentator code in your source code.

cerita anak kost February 20, 2012 at 9:27 AM    

thaks guys, its work.

Widex Hearing Aids February 21, 2012 at 6:10 PM    

Improve traffic to your site by encouraging readers to leave comments on your blog. And what better way to motivate them to comment than to have their names displayed on your blog.......

Master of Public health March 7, 2012 at 12:38 PM    

Congratulations for top commentators. Thanks for sharing your knowledge.

Rocky March 17, 2012 at 6:44 PM    

That's an interesting widget to add!

DESAIN GRAFIS April 22, 2012 at 1:27 AM    

Great share.. thanks

Blogadexme May 24, 2012 at 4:32 AM    

Nice artikel, thanks!
happy blogging!

lexmark printer toner london May 26, 2012 at 3:18 PM    

I was also wondering how to create such an effect and I was surprised how easy it could be.

mathewreegan September 22, 2012 at 5:28 PM    

Very valuable share. Keep it up

Wedding Speeches September 30, 2012 at 5:04 AM    

Lots of bloggers are heading this route to help increase comments and reward the commentators.

KaosBolaJersey October 3, 2012 at 10:48 AM    

Now it works... Was it someting to do with Pipes? Anyway, thanks for the widget, it´s awesome.

Unknown October 9, 2012 at 2:15 PM    

I ADDED THIS BLOG,IT IS VERY INFORMATIC AND INSPIRATIVE TO THE STAFF OF DOP AS WEL AS PUBLIC SPECIALY IN G.K.

Rani December 3, 2012 at 4:47 PM    

thanks for such a valuable info.

Steelseries Siberia May 31, 2013 at 5:26 PM    

I believe adding the widget to our site can get visitors to engage more. This widget looks plain, but useful anyway.

Anonymous,  August 19, 2013 at 6:07 PM    

thank you for the info

mc dewey September 8, 2013 at 6:08 PM    

@greenlava i would like to commend on all of your work, your blog is my reference, thank you for giving the newbie(us) an idea on how to start a blog, from simple to complex instructions.

Malaysia Tercinta December 13, 2013 at 11:21 AM    

Thank you for this unique commentator widget.