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.