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.

Blogger popular posts 2

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!

43 comments to "Popular (most commented) posts widget"

Anup April 25, 2010 at 11:54 AM    

Nice coding. Thanks for the instruction to make my own popular post widget.

Robin Hood Softwares April 25, 2010 at 2:17 PM    

Hi Brother. I need a widget that apppears exactly as in this blog post

http://cahgreen.blogspot.com/2010/04/caesar-iv.html#comments

You can see a hide/show button after the Caesar IV image. I need one like that to put on my blog too. Please help.

Greenlava April 25, 2010 at 4:51 PM    

@Anup
You're welcome.

@Robin Hood Softwares
That's a spoiler. You want to read Create a show-hide or peek-a-boo effect

Robin Hood Softwares April 25, 2010 at 5:06 PM    

Thanks Brother.... :)

Univarn May 3, 2010 at 10:08 PM    

Not sure if you're still checking the comments on this or not, but when I tried to do this, this morning, it would only display the most commented of my oldest posts. Any advice/help you can give I'd appreciate.

Greenlava May 4, 2010 at 8:20 AM    

I see you already came up with a solution to that.
The pipe encountered error when retrieving the latest 500 items of your feed. The problem is maybe due to the feed size. To fix that I changed "feeds/posts/default" to "feeds/posts/summary", so instead of trying to fetch full feed, it will only fetch the summary.
You might want to use "summary" too. It should speed up your pipe a bit.

Univarn May 4, 2010 at 8:26 AM    

thanks Green, I'll probably just use yours lol. Mine was just a crap, quick fix by breaking it down into smaller url builder components until I found out why.

Le Minotaure May 16, 2010 at 12:11 AM    

Hi. Any way to make the popularity rank based on number of feedback instead of comments ? Thanks.

Greenlava May 17, 2010 at 9:17 AM    

@Le Minotaure
I don't think you can. The pipe uses data from your blog post feed, and I believe feedbacks data is not included in the feed.

wawan June 5, 2010 at 2:04 AM    

tq =)

BioGal July 16, 2010 at 6:33 PM    

Hello! Yes, another question from me!
Is there a widget to list the most popular posts based on the number of times they have been accessed? I mean, GoogleAnalytics can tell me which posts are most popular by 'hit rate' - along with where the readers are from, what search engine/link lead them there, but I want to display that info on my blog.

I don't have anyone writing comments, that is why this current widget wont work for me.

:(

Greenlava July 16, 2010 at 9:00 PM    

@BioGal
How about PostRank top posts widget.

BioGal July 17, 2010 at 2:13 AM    

Super, thanks - I've added that now! I had to add my blog myself to their database!

Anonymous,  July 27, 2010 at 6:59 PM    

Fantastic widget, just what I was looking for. Other sites didn't give me such an easy installation, yours is great, thanks!

Greenlava July 27, 2010 at 11:11 PM    

@Anonymous
Thank you for visiting and commenting :)

pharmanaukri August 17, 2010 at 3:04 AM    

Thanks

ivn September 27, 2010 at 3:00 AM    

it relly works thank you

prozac November 3, 2010 at 3:23 PM    

Cool.. I've bookmarked it

Photoblog November 22, 2010 at 8:40 PM    

nice widget...tq

a n a s t a s y e a December 1, 2010 at 2:04 PM    

good tutorial =0

Greenlava December 2, 2010 at 9:30 PM    

@pharmanaukri, ivn, prozac, Photoblog and a n a s t a s y e a
Thank you visiting and commenting. Don't forget to come again :)

Ahmad Tajuddin Abdullah March 7, 2011 at 7:32 PM    

hi,how if i want to add word "comments" after the no?

Greenlava March 7, 2011 at 9:56 PM    

@Ahmad Tajuddin Abdullah
Replace code line 10 with this:
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";

Garmin Forerunner March 10, 2011 at 12:36 PM    

This helps me alot thanks for this one :)

Careprost April 2, 2011 at 2:11 PM    

Thank you for sharing to us.there are many person searching about that now they will find enough resources by your post.I would like to join your blog anyway so please continue sharing with us

Kathandara April 13, 2011 at 9:29 PM    

Cna you get a thumbnail image of the image I have used for each post, please?

Greenlava April 19, 2011 at 8:47 PM    

@Kathandara
Sorry I wish I could help, but I can't.

Anonymous,  June 2, 2011 at 7:06 PM    

Hey Greenlava Help me because i am using disqus commenting system in my blog, so this script not working for my blog.
What to do now? Thanks.

Greenlava June 3, 2011 at 11:10 AM    

@Anonymous
Doesn't Disqus has it's own popular post widget?

Ramel de la Cruz July 23, 2011 at 3:28 AM    

Thanks for this! I'll be trying this widget. I think I'll be loving your blog, very informative. keep on posting.

Antonio August 30, 2011 at 8:22 PM    

Thanks for the code, I used it since last April but it is not working from last Sunday. Is there some bug?

Greenlava August 31, 2011 at 10:40 PM    

@Antonio
Problem fixed.

DISCREET CDO September 2, 2011 at 11:55 AM    

This is the only code that worked in my blog. Not sure why others did'nt. Thanks!!

nagapasha September 10, 2011 at 7:29 PM    

thanks

Mike Geubel October 5, 2011 at 12:56 AM    

Thank you very much!!
I have tried many codes, but yours is the first working one on my site. www.geubel.com

Sanjhar@Darjeeling December 11, 2011 at 11:01 AM    

this was really helpful..as default one was not being fitted into my blog..thanks

Thank you so much for this...! Looks good on my blog when I removed the comment count! Thanks again!

Anonymous,  February 22, 2012 at 12:01 PM    

Thank you very much dude :)

Wikarso March 3, 2012 at 2:56 PM    

Thanks for information. I try it.

sofi June 12, 2012 at 4:19 PM    

thanx. ive done n it is nice.

Nick@ DontSpendMore.com August 1, 2012 at 11:14 AM    

Oh, this was so cool. Thanks so much for sharing the coding tips. I think AddThis also has a similar free gadget but your code is worth trying.

Akshatha Kamath March 3, 2013 at 11:33 PM    

Thanks for this. Exactly what I wanted :-)

sadia February 4, 2014 at 9:13 PM    

very nice job....thanks

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment