Popular (most commented) posts widget

Show off your most popular posts and at the same time prevent them from being buried in the archive -using Popular Post widget.

This time we will be making a Popular Posts widget for Blogger blog. The popularity rank is based on the number of comments each post receives. The comment counts are extracted from your blog’s latest 1000 posts, using a Yahoo! Pipe.

See the demo in Blogger Sentral Widget Showcase.

Without further ado,

1. Go to Design > Page Elements.
2. Click Add A Gadget link.
3. Select HTML/Javascript gadget.
4. Enter the title of your widget e.g. Popular Posts.
5. Copy and paste the code inside the content box.
6. Save and view your blog.

<!-- Popular posts with comment count Start -->
<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ol style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.bloggersentral.com
 &ShowHowMany=10
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json" 
type="text/javascript"></script>
<span style="font-size: 80%; float:right;"><a href="http://www.bloggersentral.com/2010/04/popular-most-commented-posts-widget.html" target="_blank">Make your own</a></span>
<!-- Popular posts with comment count End -->

 

Replace the value of YourBlogUrl in code line 20 from http://www.bloggersentral.com to your own blog URL. Don’t include the slash (as in .com/).

Style the list with the inline style attribute in line 4.

 

Selecting the options

• Number of posts -the default number of posts on display is 10. You can set it to show how many posts as you like by changing the value of ShowHowMany in code line 21.
• Comment count - comment count for each post is displayed as default. To remove comment count, delete code line 13.
• List style -the default is numbered list. To change to bulleted list, replace ol (in line 4 and 16) with ul.

 

Making your own 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 the Yahoo! pipe.
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 edited pipe, copy the pipe Id and paste it to replace the existing id in line 22. (To get the Id, look in your browser’s address bar. It is the end part the url when you are viewing or editing the pipe.)

Enjoy!