Blogger Widget: Show Upto 25 Recent Comments with Summaries

A simple recent comments widget allows us to display 5 latest comments in sidebar. Now you can display up to 25 comments with summaries of the comments.

Steps to Install the Widget


  1. Go to Design then Page Elements.
  2. Click on Add a Gadget link in your sidebar
  3. A new window will open with a list of widgets, chose HTML/JavaScript widget from there.
  4. Once that widget is opened, paste the following code in the Content area of the widget:
    <ul style="font-style: italic;"><script style="text/javascript">
    function showrecentcomments(json) {
    for (var i = 0; i < 20; i++) {
    var entry = json.feed.entry[i];
    var ctlink;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    ctlink = entry.link[k].href;
    break;
    }
    }
    ctlink = ctlink.replace("#", "#comment-");
    var ptlink = ctlink.split("#");
    ptlink = ptlink[0];
    var txtlink = ptlink.split("/");
    txtlink = txtlink[5];
    txtlink = txtlink.split(".html");
    txtlink = txtlink[0];
    var pttitle = txtlink.replace(/-/g," ");
    pttitle = pttitle.link(ptlink);
    if ("content" in entry) {
    var comment = entry.content.$t;}
    else
    if ("summary" in entry) {
    var comment = entry.summary.$t;}
    else var comment = "";
    var re = /<\S[^>]*>/g;
    comment = comment.replace(re, "");

    document.write('<li style="text-align:left">');
    document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
    document.write(' on ' + pttitle);
    document.write('<br>');
    if (comment.length < 150) {
    document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
    }
    else
    {
    comment = comment.substring(0, 150);
    var quoteEnd = comment.lastIndexOf(" ");
    comment = comment.substring(0, quoteEnd);
    document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
    }
    }
    document.write('</li>');
    }
    </script>
    <script src="http://bloggerfaqs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
    </script></ul>
  5. Save the widget and see your blog for changes.

Widget Customization


You need to replace http://bloggerfaqs.blogspot.com/ with your own blog address. You can further make customization by changing the value 20 to some higher or lower value. This value is for the number of comments and you can't have more than 25 comments. Last thing you can modify is font-style: italic; which you can change to font-style: bold; or font-style: normal; to change the font styling.

20 comments:

  1. Great job! So fine, so customizable..
    Thank u so much!

    ReplyDelete
  2. I added a small piece of code

    txtlink = txtlink.substr(0, 1).toUpperCase() + txtlink.substr(1);

    just after txtlink=txtlink[0]; row.

    This capitalizes the first word in title. Do you know if there are any ways of retrieving accents or apostrophes inside words?

    Thanks again.

    ReplyDelete
  3. thanks you. how do I display the avatar/personal image of the person who commented?

    ReplyDelete
  4. @ Jayson Deuna, in this recent comments widget currently you can't display personal image right now because it's a relatively new feature.

    ReplyDelete
  5. Unfortunately the widget does not show any comments on my page. I have no clue what i'm doing wrong :(
    So I can use some help...

    ReplyDelete
  6. @ Hilde van Dijk, I've checked again and it's working fine. Can you please gimme your blog address for further investigation?

    ReplyDelete
  7. Doesn't work on my blogspot page either.

    ReplyDelete
  8. @ p hasenzahl edwards, I've checked yet another time with a test blog and it is working fine. So, I have no idea what's wrong with your blog!

    ReplyDelete
  9. It workes for my blogspot. Thanks a lot! ^^

    ReplyDelete
  10. I have been looking for a week to solve this problem of viewing Recent Comment. This was great! Thanks for the help!

    ReplyDelete
  11. I added this code versus the original "add gadget" option I used for this feature, and it went from a blank white box, to just the "recent posts" title, with no listings under it. I did change the url as instructed:

    http://floridaoutdoor.blogspot.com/

    *note: recent comments, search, and calender do not function either.... but I'll work on one at a time.

    ReplyDelete
  12. Wait!!! lol.. wrong area for this question.. lol

    ReplyDelete
  13. i just added it and it works so far. thanks!

    ReplyDelete
  14. thanks! you helped me a lot :) i really needed something like this..

    ReplyDelete
  15. Thank you, this is such a great widget. But please tell me, how do i minimize space between each comments?

    ReplyDelete
  16. im glad i found this site! thanks so much for sharing the widget!

    ReplyDelete
  17. Nice 1
    Thanks a lot
    it is working in my blog

    ReplyDelete
  18. Thank you the only widget that has worked for me. I have been trying all day to install different recent comments widgets on my blog to no avail. Now it's past midnight when I FOUND YOURS.

    ReplyDelete

Note: All comments will be moderated.