A Recent Comments Widget with Comments Summaries

A simple recent comments widget allows us 5 comments to display in our sidebar and of course there's only name and link of the post with every comment.

Now you can display up to 25 comments with summaries of the comments, all thanks to JSON Call Back Function.

To install this widget in your sidebar, simply go to Layout | Page Elements and click on Add a Gadget link in your sidebar. A new window will open and you've to chose HTML/JavaScript widget, 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>

You need to replace http://bloggerfaqs.blogspot.com/ with your own blog address. You can further make customization by changing the value 20 (for (var i = 0; i < 20; i++) {) 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.


If you need any help or just wanna say thanks, feel free to comment.