How to add a Recent Comments Widget to Blogger blog ?

It is one of the most commonly used widget alongwith "Recent Posts".

There are two methods by which you can add this 'Recent Comments' widget to your Blogger blog.

Method I - Adding it as a feed.

Here's step-by-step guide -

Step I - Goto > Dashboard > Settings > Site Feed.

Step II - Now here 'Switch to: Advanced mode', change all settings to full as shown below.



Now save the settings.

Step III - Goto > Layout > Add a Gadget > Feed.

Step IV - In the 'feed url' enter this -

'http://free-blogger-help.blogspot.com/feeds/comments/default'

after changing the value in green to your Blog URL.

By this method you show maximum of 5 recent comments.

You can show more comments by following method.

Method II - Adding it as a javascript.

Step I - Goto > Dashboard > Layout > Add a Gadget > HTML/Javascript.

Step II - Copy the following code -

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i <10; 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>');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write(' on ' + pttitle);
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
}
}
document.write('</li>');
document.write('<div style="font-size:75%;text-align:center"><a href="http://free-blogger-help.blogspot.com/">Widgets by Free Blogger Help</a></div>');
}
</script>
<script src="http://free-blogger-help.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>

Now in the above code,I've highlighted three things you can modify -

1. Most important, you should enter your blog's url in the pink part.
2. Secondly , I've made the default number of comments to 10, you can edit the red part and enter your own value.
3. Thirdly, it's for the length of comment which limited to 100 characters, you can any value of your choice in blue part.

After you have changed the values, save the widget and check your blog.

If you have any difficulties, just leave a comment.