Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Sep 24, 2007

Digg This Story

Recent Comments Feed Widget

We wrote earlier about creating Recent Comments and Recent Posts Widgets using Blogger's “Feed” page element. It was a simple method that even non-techie Bloggers can understand and use. In the middle of last month, Blogger did a major change to the GData API and many bloggers suddenly saw broken entries in their feed widgets. Although Blogger has tweaked the Feed widget to make this work again, the widget looks odd as we shall explain below. For those who can't wait to have the Recent Comments widget up and running, we shall explain here how you can have a Recent Comments widget using JavaScript instead.

Change in Blogger Feeds

All along, for posts and comments without titles, Blogger used the first line of the post or comment as titles in the feeds. In a typical “Feed” page element, the titles are important as these are displayed as links in an unordered list format.

Blogger did a supposed bug fix and the “title” element was no longer a post snippet for posts with no title. This affected the comments feed, since comments never had a separate title field but were appended to the posts. According to Google's Pete Hopkins, the rationale was “to balance making the Atom feed a correct representation of the post - for Atom Publishing Protocol clients - and making the feed work the best in various feed readers.”

There was a lot of unhappiness among users and developers. Other than broken comment feed widgets, it affected Firefox live bookmarks as well.

Enable Comments Feed

First, we have to ensure that Comment Feeds are enabled. Once you are logged in, go to Settings -> Site Feed and switch to “Advanced Mode”. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Save the Settings.

Recent Comments and Recent Posts Widgets

Feed Page Element method

If you had followed our earlier article to insert the Comment Feed URL into the “Feed” page element, this is what you will see:-

Recent Comments Feed Widget

Do you notice the gaps in between? These are the hard returns in the comments and they are not removed in the widget, unlike previously. It doesn't look as sleek now. Compare this to what we have below.

Recent Comments Widget JavaScript

The way to work around this would be to go back to using JavaScripts. We have been slow to recommend JavaScripts because there are simply too many malicious scripts out there. Most will upload their scripts onto their external sites and provide you a code for insertion into your template. The code can look like this:-

<script src="">

When the page loads, the browser will visit that external site to read the script contained in the .js file. Because of the security risks in running unknown scripts, many users have configured their browsers to disable scripts and the scripts will not be read. Your readers may hence not be able to view the contents in the widget. Before inserting any of these scripts into your blog, ensure that they are from trustworthy sites. Even then, as we had pointed out in our article on Internet Security and Blogger Virus, there is nothing preventing the site owners from altering the script after sufficient people have linked to it.

We went through several of the Recent Comments scripts and they are mostly workable. Some allow you to fully customize the widget styles and provide user-friendly interface for easy selection of the options. It is difficult to know who wrote the first set of original script as almost all of them claimed to be the authors, even though some scripts looked rather identical.

What we did was to take a couple of them, and change and modify that to our unique script. Our simple Recent Comments widget will look like this.

Recent Comments Feed Widget

We are not going to upload the script onto our site and have you link to it. Instead, we shall let you have the full JavaScript code that we have used so that you know what goes into it. Login and go to Template -> Page Elements -> Add a Page Element in the sidebar and select “HTML/JavaScript”. Copy and paste the code below.

Update: <noscript> tag added. Readers like us who have disabled JavaScript in our browsers will see a statement instead of a blank space.

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i++) {
var entry = json.feed.entry[i];
var ctlink;

if (i == json.feed.entry.length) break;
for (var k = 0; k <; k++) {
if ([k].rel == 'alternate') {
ctlink =[k].href;
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 =;
if ("content" in entry) {
var comment = entry.content.$t;}
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");

document.write('<a href="' + ctlink + '">' +[0].name.$t + '</a>');
document.write(' on ' + pttitle);
if (comment.length < 100) {
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
document.write('<div style="font-size:75%;text-align:center"><a href="">Widgets by Tips for New Bloggers</a></div>');
<script src="">
<noscript>You need to enable JavaScript to read this.</noscript>

Change these options:

1. If you want more than 5 recent comments to appear in the widget, change the value in blue.

2. The comment length is capped at 100 characters. Adjust the value in green if you want to change that.

3. You must change the part in red to your own Blog URL.

After changing the values, save the page element and refresh your Blog. You should have a Recent Comments widget showing the latest comments posted on the Blog.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


Peter said...

Hi! Tips for New Bloggers! I have been wanting to do this for sometime time now but didn't know how best to get around it.

So after having seen your great tip here, I went ahead with it. As some of the comments are better than my posts I really wanted to show case the authors in someway to say thanks to them. I looks great! Thanking you, so very much.

Regards Peter, Sydney Australia.

Eann, Daddy & Mummy said...


I've copy down the recent comment wedget and paste it to my blog element but nothing has shown in my recent comment. May I know what's wrong? Please help.



bizwhiz said...

Hi Eann, Daddy & Mummy

Your comment feed is not enabled. We now have one section in the article to remind readers to enable it. You may want to follow that.

Nigel said...

Wonderful.. Thanks, as always!

Eto Akta Gamat said...

Hi, thank you for the cool widget! It works. But... well I wanted to see how feeds work so I subscribed, posted a dummy post with two comments. After I saw how the feed subscription worked, I deleted the dummy post but the comments from that post show up in the feed. How do I get rid of them? Any ideas? Thanks.

bizwhiz said...

Hi Eto Akta Gamat

You can delete the comments before removing the post. Technically, if the post is deleted, the comments link will be broken. Not sure how long the system will take to remove that from the data.

Eann, Daddy & Mummy said...

Hi bizwhiz,

Thanks! After I set my block comment feed to full it is ok now.

But I've another problem, my post title is in Mandarin, it shown in my recent comment as blog post_number. Please refer to my blog.

Is there anyway I can show my actual post title?


bizwhiz said...

Hi Eann, Daddy & Mummy

This is the way Blogger configures the feed for non-English blogs. Don't think there is a way to change that.

For future posts, you can consider publishing an English Title first and changing it to another language after that. Guide at Change Blogger Post URL – SEO Tip.

m trader said...

Hi Bizwhiz,

If I don't want to show my post title in the recent comment wedget, what should I do? I just want to show the comment author and the comment content.

Hope you can help. Thanks!

Kimberly Sant said...

I added the recent comments widget to my blog. It worked great until I changed my permissions settings to "only those I choose." Now none of the comments are displayed. Is there a way to get around that?

bizwhiz said...

Hi Kimberly Sant

When you choose that option, you are creating a private blog and the feed is not viewable by anyone. I think it makes sense or it would otherwise be a backdoor way to view your blog contents.

Kybernetikus said...

Hi @ ALL, Hi bizwhiz,

same problem as Kimberly Sant. My private blog do not generate a feed too. Is there a solution out there? How can i get "recent comments" on the sidebar with a private blog (permission)?

Thanks! Kybernetikus

May said...

Hi bizwiz,

Is there anyway I can change the recent comment wedget in a way that the post title will not shown in my recent comment box?

For example, instead of: bizwhiz(commentator) on recent comments feed widget (post title), I want it to be shown like: bizwhiz hi there....(comment body).

Hope you can help. Many Thanks!

Anonymous said...

thanks so much for including the java script without a commercial attached to the end of it. i was spending countless hours trying to hack other folks scripts they were posting on their sites to get rid of their ads at the end of the script. thanks again!

Brian in WV said...

Outstanding. Thanks a lot.

Quique said...

Hi, I sometimes change slighly the title after posting so now comments are not showing the accurate title post, i presume there is no way to "teach" the script to show the real post title, is it?

Lakota Princess said...

You rock, you rock, you rock!
Happy dance over getting the comment widget loaded!

Tanakwagu said...

thanks for the info and tutorial. it really2 great work. help many new bloggers.

what is 'jason' for. is it special blogger code or name of the widget creator?

can i change it to another name?

Spurs King said...

Thank you very much ! Your script working fine on my blog , and i am very happy that i found your blog!Very useful indeed!Keep the good work!

Wulffy said...

Hi, this JavaScript works great! Thank you for this. May you provide a JavaScript for recentposts, too? I tried to change it, but it is not working. Regards, Wulffy

Stef said...

That worked great! Thanks for the tip! I love your site!

Roland said...

Thank you.
I was having a difficult time doing this. Your post was a tremendous help.

Tips Supremo said...

Thank you so much for your effort. This is a great Widget. I have added it to my Blog.

I'm sure more Bloggers will follow soon.

Triet said...

Pretty good javascript, and I like how you actually gave it to us.

I'm not very good with JSON feeds. Is there a way to change the author's name so clicking on it takes someone to their blogger profile page instead of the blog post?

And, is there any way to pull the date of the comment out of the JSON feed? The date is something I like about the feed method of recent comments, and I'd like it on this one too.

Thanks in advance!

Val said...

Hey Tips,

So does this widget not work for private blogs?

Is there any widget for recent comments that DOES work for private blogs? I have tried several, with no success.

Please help!


Canadian Girl said...

My question is how you get the dotted lines to seperate each comment.

It's not included with the html you have and I think the recent comments widget you have on your page looks better.

Philos said...

Great widget, many thanks.

Kamini Shankar said...

Thanks a ton !! Worked just great :)

EDge said...

great tips! works much better than just adding the comments feed on the page. one question though: is the link on the comment author supposed to take you to the actual comment below the post? it doesn't seem to be going to the anchor unless you remove #comment replace statement. thanks for the great work!

Reese Dixon said...

Great widget, I've been looking for this for a long time. My only problem is that I need to conserve sidebar space, so I'd like to leave out any of their comment. Just author and post title, but when I set the character limit to zero, I still get the MORE part. Is there a way to get rid of that entirely?


J Adamthwaite said...

Hi there - I've been finding your blog brilliantly useful - thanks very much.

There's a couple of things I'd like to do to the recent comments section though, and I can't work out how. I'd like to make it so my own comments don't show up. Any idea how I can do that?

I'd also like to make the font in the recent comments section smaller than the rest of the blog which I'm sure should be fairly easier - but somehow I can't seem to manage it. Any advice?

RashiD said...

thanggggg youuu~

radu gonciar said...

any chance for the recent comments widget to show the links of the commentators?

Ankur said...

Hey thanks for posting this widget ...I included in my blog and its working perfectly fine...thank you for sharing..

Josh Walker said...


I love this!!

The only thing is there are no spaces between the comments. It all runs together and it makes it hard to read. Is there a way to fix/change that? I like the way the example has it with a bullet point for each recent comment. But if that does not work, a space between each recent comment would be fine.

Thanks for the help.

rashid said...

Thank you so much for the widget. It's great. Love it.
i have a question.
How to change the font-colour of "author" of comments and "entry title" in the widget?
is it possible?
Thanks in advance..

AGRA said...

I have been looking for this a long time. It works perfectly. One query, how can it show the actual title instead of the link to the post? My blog is in spanish and some times the link deletes several letters and looks pretty messy. Thanks, Gregorio (Madrid)

Jennifer said...

Thanks so much for the help. My "recent comments" widget just stopped working a couple of weeks ago, I replaced with this one and it works great! Thanks for the help!
One question, is there any way to include the comment date in this one?

Karen Zemek, author of "My Funny Dad, Harry" said...

You have been very helpful. Thanks so much for the step by step instructions. I've been looking for quite some time as to how to add a "recent comments" widget and here it was so easy! I stumbled your blog and bookmarked this post. I'm sure I'll be back when I want to add something else and don't know how.

JoVie said...

I lIke this Post..

Mich Guevara said...

this is awesome, i already have it in my blog, thanks much!

mayG said...


I tried using this code and the recent comments display fine on mozilla but not IE.. infact even the recent comments section on your website here appears blank in IE and shows the comments on mozilla, it not just about my blog.

taichee~@! said...

hi bizwhiz!

Thank you for the excellent code! I've been searching highs and lows for this one. Looks neat now!

Damon Lord said...

This is very useful. Thanks.

Anonymous said...

hi, can i ask how on earth you put the dot or the arrow sign before every author on the recent comment widget? :) coz i have applied the java script and it all runs beautifully, but no dot appears and it looks kinda messy without it at the beginning :) hope i'm not a pain in the a$$, and thank you