This is a step-by-step tutorial for adding the Recent Comments Widget in Blogger, with more comments instead of just five (5). Putting this widget in your blog will increase page views and will enable easy comments monitoring.
The usual way is to add an RSS Feed widget linking the default comments feed. But for some reason, the widget is slow-loading and only 5 comments are shown.
The widget that we are going to add in your blog is fast loading and the number of comments to be shown, the postdate as well as the number of characters allowed to appear are all customizable.
Ready? Here we go with the steps:
- In your Blogger Dashboard, click Layout.
- In Page Elements (anywhere you like the widget to be placed) click Add a Gadget and then select HTML/Javascript.
- Copy and paste the following code inside the HTML/Javascript box:
<script>
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>
<script>
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://YOURBLOG.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script>
- To change the number of comments shown, replace 10 with your desired number.
- To show dates the comments were posted, replace "false" with "true" (w/o quotes).
- To show the summary of comments, replace "false" with "true".
- To indicate how many characters will be shown per summary, replace 100 with your desired number.
- Important: replace YOURBLOG for this widget to work.
- Save and you're done.