Creating Top Commentators widget for Blogger

Update 24 Dec 2009: I’ve just realized that the Blogger emits the maximum of only 200 comments per feed, even when I specified 1000 comments (using max-results=1000 query parameter). It wasn’t so when I wrote this tutorial back in June.

Anyway I’ve got the pipe fixed.

For readers who cloned my pipe, please re-clone. And for those who use my pipe as it is, you don’t have to do anything. The updated pipe will truly reflect your blog’s latest 1000 comments.

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. Top Commentators widget will display the list of people who commented the most. Each name is linked to the commentator’s Blogger profile or web site.

See a live example here in my widget showcase blog.

If normal list like that doesn’t whet your appetite, try a cloud version, with Top commentators Cloud.

 

I. Installing Top Commentators widget:

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. Copy the code below and paste it inside the window.
6. Enter the title of your widget e.g. Top Commentators.
7. Click Save.

<!-- Top commentators widget v1 Start -->
<script type="text/javascript">
function getYpipe(feed) {
 document.write('<ol>');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
 var href = "'" + feed.value.items[i].link + "'";
 if(feed.value.items[i].link == "")
var item ="<li>" + feed.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.bloggersentral.com
 &ExcludedNick1=Greenlava
 &ExcludedNick2=
 &ShowHowMany=10
 &_callback=getYpipe
 &_id=23022d7836bf2dd3c10a329feb9be26a
 &_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:right;">Get this <a href="http://www.bloggersentral.com/2009/06/creating-top-commentator-widget-in.html">widget</a></span>
<!-- Top commentators widget End -->

 

II. Customizing Top Commentators widget

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

1. YourBlogUrl –this is your blog URL, replace http://www.bloggersentral.com with yours. Remember: Do not include the trailing slash (i.e. .com/). This widget works for both blogspot and custom domain.
2. ExcludedNick1 and ExcludedNick2 –add up to two commentator nicknames that you want to exclude from the top ten list. You may want to put your nickname in here. The nickname Anonymous is already included in exclusion list, so you don’t need to add it here.
3. ShowHowMany –specify how many people on the list, the default is 10.

This widget utilizes Yahoo! Pipes to extract and process the data from your blog’s latest 1000 comments, via comments feed .

 

III. Customizing the pipe (optional)

If you want further customize the widget output, you need to edit the (Yahoo) pipe itself. 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 the pipe in the Top Commentator widget, you need to copy the id and paste it to replace the existing id in line 24. (To get the id, look in your browser’s address bar. The id is the end part the URL when you are viewing or editing the pipe.)

Credits to googlesystem, for providing the base for the pipe and to Hunlock.com, in helping me understand the process of importing and displaying Yahoo pipes in a web page.

Enjoy!