Popular Posts Widget ( with Comment Count )

2/13/2009 01:58:00 AM Posted by c3v3n

by technicaldotcom

Popular Posts Widget is one of the most useful and popular widget a blogger can include in his/her blog. With this widget, not only do one get to see which posts garnered the most reactions from the readers, it is also a helpful tool for first time visitors as this serves as a quick guide to see which among the posts would most likely capture his/her interests.

Thanks to Yahoo Pipes and Anoxya, I was able to come up with my first blogger widget.

A sample is the POPULAR ENTRIES section in my sidebar.

How It Works. What Makes It Different.

This widget uses Yahoo Pipes to gather and manipulate Blogger Posts and Comments Feeds. Like other popular posts widget, it sorts the blog posts based on popularity as per number of post's comments. It can parse up to 1000 comments, and is easy to install. What makes it different though is that it has a comment counter and the text along with it can be customized as well, e.g. 15 votes... or 30 reactions... or 25 hails.

How To Install Most Commented Posts Widget (with Comment Counter) In Blogger.

Part One. Add Page Element.

(1) Go to Layout. Page Elements.
(2) Add A Gadget.
(3) Select HTML/Javascript Gadget.
(4) Copy and paste this script:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<span style="text-transform: capitalize;">');
var i;
for (i = 0; i < 15; i++)

var href = "'" + obj.value.items[i].link + "'";
var item = "<a href=" + href + ">" + obj.value.items[i].title + "</a> ";


<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=
&numpost=10" type="text/javascript"></script>

<p style="font-size: 8px;line-height:6pt"> Widget by <a style="font-size:8px;line-height:6pt" href="http://technicaldotcom.blogspot.com/" target="_blank">Techniqueal T. </a></p>

(5) Look for this part of the script

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=
&numpost=10" type="text/javascript"></script>


to change the default blog URL, find this code and replace it with yours.


to adjust the maximum number of posts to be displayed, search for this code and replace with desired number of posts.


(6) Click OK.
(7) View Blog.

Part Two. How Customize the Comment Count Text.

NOTE: In order to make this work, you must have a Yahoo account first.

(1) Click and go to my YAHOO PIPES url.
(2) Click "CLONE".
(3) Choose "Edit Source".

(4) Scroll down to the LOOP Module added in this pipe.

Click "open".

(5) Go to the "STRING BUILDER" module. Change the text as desired.

Save a copy.

(6) To go back to previous pipe, click the "Most Commented Post Widget (with Number of Comments) by Techniqueal T." link which is located on the upper portion to the right of Yahoo Pipes Logo.

(7) If the whole source seemed to have disappeared, just drag down the Debugger panel.

Note the change (new name).

(8) Run this Pipe.
(9) TAKE NOTE OF YOUR NEWLY CREATED PIPE ID. Check your browser's address bar. You would see something like this.


copy and paste the bold-faced ID in notepad (or similar).

Part Three. How To Change Yahoo Pipe Address.
(1) To change the default pipe address so you can use your newly created pipe (with customized comment counter text), go to Layout. Page Element.
(2) Edit the HTML/Javascript gadget where you placed the Popular Posts Widget.
(3) look for this code:

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=

change the default ID with your new Yahoo Pipe ID.

If you prefer to let go of the comment counter and stick with the usual Popular Posts Widget, you can either edit the pipe (just kindly let me know if you need assistance) or you can check this blog for other alternative:
Blogger Buster: Popular Posts (Most Commented) Widget For Blogger Blogs

If you have heard of issues where Blogger Widgets that use Yahoo Pipes do not work after certain number of pipe runs, you can always resolve this by "cloning" the original pipe and using your own.


I just learned that there is a shortcut to adding this pipe to your blog.
(1) Just go to my YAHOO PIPES url.
(2) Type in your blog URL and maximum number of posts.
(3) Run Pipe.
(4) Get as Badge. Add it to Blogger.


Post a Comment