August 25, 2008

Easy Peasy Recent Comments Widget for Blogger Layouts

As many bloggers have experienced troubles using the original recent comments widget, I've been researching new methods we could use to add this function to our blogs. To my surprise, I realised that we can alter the code of the default Blogger Feed widget to accomodate our need to display recent comments in the layout. By simply manipulating the code, we can create a widget to display the name and a summary/full content of the 5 most recent comments posted to our blogs!



There are several advantages to using this method:
  • Special characters are more likely to be recognized and correctly displayed
  • This method does not rely on externally hosted scripts, which makes the widget load much faster
  • It is much easier to make alterations to the widget
  • Comments are displayed in list format, and can automatically be styled to match the design of your blog.
So far, I have found only two disadvantages to using this method. Firstly, as this is based on a default feed widget, we can only display a maximum of 5 recent comments (the limitation applied by Blogger). Secondly, there is no way to display the title of the post commented on, as this information is not included in the code of the atom.xml feed.

At present, you would need to edit the contents of your Blogger template to add this new version of the "recent comments" widget due to current problems with Blogger's "Add widget" API. As soon as I am able to access the API successfully, I will work on a widget installer which will enable you to add this new widget with ease.

For now, here are the instructions to add this widget to your template by customizing your blog's HTML code.


How to add the new "Recent Comments" widget to your Blogger layout



Step One: Back up your template!


Firstly, you should make a full back-up of your existing template. This will enable you to restore your template to it's original composition if you accidentally make a mistake.

To make a back-up of your blog template, go to Layout>Edit HTML in your Blogger dashboard, and click the "Download full template" link near the top of the page.

This allows you to save a copy of your template to your computer as an XML file. Rename your template to help you find it easily, being sure to retain the ".xml" extension.


Step Two: Add new code to your template

In this step, we will add a complete widget (including the widget template) by adding HTML code.

For this, you will need to access the Edit HTML page for your Blogger template. Do not click the "Expand widget templates" box as this may make it more difficult for you to see where the code should be added.

Using your browser's search function (CTRL+F or CMD+F) locate the following line of code:
<b:section class="sidebar" id="sidebar" preferred="yes">
If you cannot locate this exact section, find a line which begins with <b:section which references the "class" or "ID" of sidebar.

Immediately after this line, paste this entire section of code:

<b:widget id='Feed99' locked='false' title='Recent Comments' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<b:loop values='data:feedData.items' var='i'>
<li>
<a expr:href='data:i.alternate.href'>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != ""'>
<span class='item-author'>
<data:i.author/> said:
</span>
</b:if>
</b:if>
<span class='item-title'>
<data:i.title/>
</span>
<b:if cond='data:showItemDate'>
<b:if cond='data:i.str_published != ""'>
<span class='item-date'>
 on <data:i.str_published/>
</span>
</b:if>
</b:if>
</a>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Feed2' locked='false' title='Recent Posts' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<b:loop values='data:feedData.items' var='i'>
<li>
<span class='item-title'>
<a expr:href='data:i.alternate.href'>
<data:i.title/>
</a>
</span>
<b:if cond='data:showItemDate'>
<b:if cond='data:i.str_published != ""'>
<span class='item-date'>
 - <data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != ""'>
<span class='item-author'>
 - <data:i.author/>
</span>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Then preview your template. If you have made any errors in pasting this section of code, you will notice the error in your preview, or will receive an error message. If this is the case, click the "Clear Edits" link near the bottom of the page to revert your template back to normal, then begin again.

To offer a better understanding of where to paste the above section of code, here is an annotated screenshot:


Once you have correctly pasted this code, save your template. At first you will not be able to see the recent comments widget appear in your blog layout. We need to add the URL for your comments feed and tweak a few options before the widget will appear.


Step 3: Add Comment Feed URL

The final step to adding this new recent comments widget is to add the Feed URL for your comments feed.

To do this, go to Layout>Page Elements where you should see a new "Recent Comments" feed appear at the top of your sidebar.

Click on the "Edit" link for this widget, where you will be presented with the regular pop-up screen for a Feed Widget:


You need to add the URL of your blog's comment feed in the "Feed URL" box.

The default URL for your blog's comment feed will be something like this:


http://yourblog.blogspot.com/feeds/comments/default

Where "yourblog.blogspot.com" is the URL of your blog. If you use a custom domain, change this to the actual URL of your blog. For example, the URL for the Blogger Buster comments feed is http://www.bloggerbuster.com/feeds/comments/default

You should also tick at least the "Item Sources/Authors" box as this field will be used to display the commenter's name.

Optionally, you could also tick the "Item Dates" option if you would prefer to display the date when comments were added.

Once you have added the URL to your comments feed and ticked the appropriate options, click the "Save" button and take a look at your blog. You should now see your new "recent comments" widget appear in your blog layout.

When this widget is installed, you can move it around to a different part of your layout on the Layout>Page Elements page. As each entry of the comments feed is presented as a list item, the widget should take on the appearance of other list-type widgets in your layout.


Comments? Suggestions?

I hope this new version of the recent comments widget will be suitable for most needs and is easy to install in your Blogger template. Please let me know if you experience any problems when using this widget, or if you have any suggestions for how it may be improved, by leaving your comments below.

Initial photo by Rightee (Flickr Creative Commons).

Save as PDF

View blog reactions


I'm reading: Easy Peasy Recent Comments Widget for Blogger LayoutsTweet this!


Related Posts by Categories



Post a Comment 81 Comments:

25 August 2008 23:39 রাশেদ said...

Thanks for informing.

25 August 2008 23:54 Dina said...

Does this method work for private blogs?

26 August 2008 02:53 ~*jenn*~ said...

Awesome...it worked great...and I am clueless wihen it comes to all this HTML stuff! Thanks...I used a template of yours also and so far everything I have tried from your site is so simple to do with the instructions you give!!!!! I cannot thank you enough! :)

26 August 2008 03:55 Tinh said...

Good guide, thanks for great post

26 August 2008 10:31 The_Phenomenon said...

You always the best...

But Amanda, i have a problem with broken link. Do you know how to fix broken link in blogger??? If you know, plis help me

26 August 2008 10:32 Amanda said...

@Dina: Unfortunately this cannot work for private blogs. This is because private blogs do not produce any feeds (which would be indexed by search engines and make the privacy invalid).

The only solution I know of to create a recent comments widget for a private blog would be to use a classic template and use one of the non-feed methods described on this page: http://www.bloggerbuster.com/2008/06/recent-comments-for-ftp-bloggers.html

Hope this may help!

26 August 2008 11:57 renton_ said...

Hi there, Amanda.

I have a problem with this one. When I enter the feed URL, it says that there is an invalid feed URL.

What to do and where did it went wrong?

Thanks.

26 August 2008 12:28 Amanda said...

@Renton: I think this feed URL should work if you have installed the recent comments widget on your main blog: http://rentonaktivno.blogspot.com/feeds/comments/default

Try pasting this into the feed URL space when editing the widget. I checked to see that this feed is valid, but do let me know if you still experience problems.

26 August 2008 14:53 Gosu said...

amanda you can check this url for a better recent comments widget
http://www.gosublogger.com/2008/08/adding-recent-comments-and-recent-posts.html

26 August 2008 15:18 Gosu said...

yep amanda you can share it with your readers :)

26 August 2008 15:28 Sylvia Hubbard said...

I just wanted to say that you are awesome and that ever since I found this site I have been in love with it.

26 August 2008 18:14 Matthew S. Urdan said...

Hey there,

Thanks for these tips...I read your blog daily...But if could please tell me: how does this comment widget differ from the recent comments widget I currently have installed on my blog? Please check it out just to see what it looks like at http://michiganrafter.blogspot.com

thanks for your time, it's much appreciated!

26 August 2008 22:03 inbalarii said...

Damn, if it could include the post's name, it would have been perfect. This way, without post name, kinda suck :( I'm waiting for the next method. Sometimes I realy do regret for not choosing wordpress...

27 August 2008 06:09 Chica said...

I'd love to know how to let folks subscribe to comments on my posts. People without a blogger account cannot subscribe when I have a custom template, and I'm not sure how to go about getting a link in there and whatnot. :/

27 August 2008 21:02 WH said...

Many thanks. It is better in presenting Chinese

28 August 2008 07:39 brian said...

Hi, and thank you. Is there a way to let people post comments that only appear in the widget? So that the comments do not appear under the original post? It seems like the only choice in Blogger is to show comments or not, but perhaps there's a work-around.

28 August 2008 19:59 Rachel C. said...

Thanks for all the good work you do! I put you in my link round-up this week.

28 August 2008 20:31 Alain-Christian said...

I tried to comment on your post about lables but that entry is messed up somehow in IE. This one isn't.

The reactions are busted because you can vote once for each reaction.

30 August 2008 21:42 Alisha said...

Hi,

I'm Alisha from Wowzio, and I'm excited to tell you about our new widget platform that helps bloggers increase readership by providing engaging widgets containing your blog's rich content. You can check out widgets customized for your blog here:

Wowzio Widgets for your Blog

I wanted to reach out to you to ask for your feedback on these widgets (feel free to install them on your blog, if you feel they are a good fit). I'm sorry for leaving this message via a comment, it's not at all our intent to spam you ( which is why i'm leaving this comment on an older post and you can always remove this comment ). Again, we would love to hear your feedback.

Thanks,
Alisha Wright
alisha.wright1@gmail.com

31 August 2008 09:50 pro.me.us said...

The widget works fine! After some initial problems while looking in the internet for a nice, concise instruction how to implement this feature in the code I finally came over your site. Your guide is very helpful and what is most important the element works!

Thanks for sharing your know-how!

J.W. Gawlik
Poland

03 September 2008 10:47 Samantha Dixon said...

That's simply AMAZING. Thanks so much for such a detailed feed - I didn't realise you had to save the template and edit before things worked sometimes.

BRILLIANT guide for beginners!

03 September 2008 13:18 Mys said...

Thanks. Got mine to work. Absolutely brilliant! I am now very happy with my personal blog. You're simply the best in my book.

04 September 2008 18:08 Steph Waller said...

Thank you! I've been trying to get a recent comments widget to work on my private blog, and yours does.

Wonderful!

07 September 2008 04:49 Sara M. said...

Finally! A recent comment widget that worked!! Thank you SO much!

08 September 2008 00:50 Guðmundur G. said...

Thanks. This was just what I needed.

08 September 2008 06:59 Pardes said...

I installed your code and it worked fine....but in stereo. It pasted 2 identical widgets instead of just one.
I repeated the whole process several times and the same thing kept happening.

09 September 2008 06:05 Baka Kelana said...

Hi Amanda...
Can you give me information about readmore stting and comment form for Butterfy template from you...
please visit my site http://aneukagamaceh.blogspot.com
I have trying for setting but can not...why...?
Thanks for your help Amanda
Please send information to my email or my site
Happy good day for you

13 September 2008 14:12 mike done said...

Thanks Amanda,doing a greatwork here,blogger is now moving to overtake wordpress you are the best in blogger plugins

15 September 2008 14:00 Googleholic said...

may i translate this aricle to indonesian??
would you give me permitt?

20 September 2008 23:07 AnggaRifandi said...

Amanda can you show me how to modify your recent comments to show more than 5 comments.

Thanks for your tuts.

22 September 2008 05:12 puterikurekure said...

yeay!!!
thanks for the info bro!
:)

22 September 2008 23:19 Alan Gay and Straight said...

It worked, this one really was easy...

Any way to get the commenters' name in a different color from the rest of the link?

28 September 2008 18:30 Marshmallow said...

amanda, this worked at the beginning.
but the comments won't be updated.
can you give me any suggestion?
thanks.

01 October 2008 22:47 DFrizzle said...

Hey there! Will this allow comments to show up at the end of each post, as they currently are on this site? I'm new to blogging- my site can be found at realitylalaland.blogspot.com

Thanks!ul

10 October 2008 07:06 Balflear Lee said...

may i know how to modify the number of comments and posts?

27 October 2008 03:17 The Artificial Owl said...

This is great Amanda, I just added this comment widget to my blog and I love it. Thanks! bloggerbuster is one of the best resource on blogger.

Artificial Owl

28 October 2008 10:41 fauzan said...

ok thank you

01 November 2008 15:57 Hendrawan said...

Can we make the comments more than five?

23 November 2008 22:54 Timmy said...

I am trying to get my page to look like your setup. The post followed by an ad and then the comments. I want readers to be able to easily have a conversation about my posts. Is that only possible with a self-hosted site? If so, what steps should i take to make the switch? If you don't mind, please e-mail me at iitimmytii@aol.com. Thank you!

30 November 2008 05:06 seno said...

Thanks for the tips. I've add it. http://seno008.blogspot.com

10 December 2008 00:22 oneflores said...

You are my hero. I'm hard at work preparing a migration of my blog yo your new halo template. Amazing stuff. Thanks.

11 December 2008 17:33 suryaden said...

thanks, Amanda, great tips

11 December 2008 20:06 midwest cpn said...

I'm having the same problems Marshmallow and Pardes had- 1) the widget posted to my blog fine, but there are two of them and if I delete one, it deletes both. 2) It is not updating. Can you help? Thanks

22 December 2008 20:22 Hakko said...

I Couldnt Know how to set up the URL feed : i dont know what to write on there " when i paste the URL it says that , Please correct the errors on this form , and invalid feed URL " something like this is appearing.
can u pls pls help me on this i would love to have this element on my Blog.

02 January 2009 19:12 Genel kultur said...

Greate hack for the comments.But i didnt achive it for my posts.i need a code that permit to be able to see random posts. is it possible without using feedburner?

12 January 2009 05:17 Tommy John said...

I have an issue...everytime I add the recent comments thing...it is showing comments from other blogs of mine...is there a way around this?

12 January 2009 07:09 Claire said...

Hi there...THanks for this...Is there any way to limit the number of characters per comment displayed?

14 January 2009 05:43 deeps said...

thks a lot!!

25 January 2009 02:47 Awdrey said...

O.K. well it worked except for it's not a comment widget, it's a post widget:(

03 February 2009 17:13 Th. said...

.

I added it to my blog today and it works great. Thanks.

04 February 2009 04:30 DetroitSucks said...

Hakko

You need to add a question mark after the word default in your comments feed.

http://blogname.blogspot.com/feeds/comments/default?

It worked for me.

04 February 2009 17:35 Th. said...

.

Mine isn't updating either. It uploaded the comments once, but never again. I've tried clearing my cache, but it doesn't seem to be my machine.

25 February 2009 16:19 David Rudel said...

I just recently installed this widget, and when I go to configure it [by clicking "edit" on the Page Elements screen], the configuration box is blank [with a thin, wide flesh-colored oval]...

05 March 2009 20:26 Anonymous said...

Thank you i have added the code successfully. But when i click on edit, it doesn't give the option to add my blog comment feed. My blog test address is test1953.blogspot.com

10 March 2009 00:47 Dura-Foam Solar Center said...

I'm having the same problem--the config box is blank... I simply pasted the code exactly as it is given above--so I don't see what I could have done wrong.

12 March 2009 20:50 Aimz said...

You could also add it as a feed and check "Item sources/authors" - less custom styling available, but effective and simple.

05 April 2009 17:44 Drew said...

I have the same issue, usually i'm pretty good with this stuff, but like these last few people said when I click on the "Edit" link for the comments in the Layout, it just pops up a bare looking page, with no input form for adding my feed location...

20 April 2009 11:49 Asif said...

Thanks for the information.

Infomist Services

20 April 2009 23:15 DBSKsleeplessNights2 said...

WOW Thanks a lot..! i'll be using this, My blog extremmely needs things~

25 April 2009 11:12 The Peoples Program Team said...

nice idea., cool., thanks for the post dude.,

27 April 2009 23:20 Shawnee said...

Our Online Pharmacy no Prescription doctors will evaluate your health information and provide you with a prescription, so you do not need a prescription from your regular family physician to cheap Generic Viagra. More info at: http://www.safemeds.com/

28 April 2009 01:42 Sassy Mrs said...

i found this method to be much easier:

http://www.tipsblogger.com/2009/04/add-recent-comments-widget-to-blogger.html

30 April 2009 16:12 Mikes said...

i'll try this out! Your Daily Word

01 May 2009 08:02 billrainier said...

I am really satisfied with my it. I wish I would have thought of it first. Awesome!

05 May 2009 23:44 cheapest generic viagra said...

Our order viagra will evaluate your health information and provide you with a prescription, so you do not need a prescription from your regular family physician to cheap Generic Viagra. More info at: http://www.xlpharmacy.com

08 May 2009 22:56 Nat said...

mine it say's like this!We were unable to save your template,Please correct the error below and submit your template again.
More than one widget was found with id: Feed2. Widget IDs should be unique.

26 May 2009 04:15 chris said...

I have a question Amanda, it seems that I cannot edit the Recent Feed, edit panel appears blank, can you help me with this?
Thanks!

28 May 2009 16:56 Justin said...

Great Article! Really helpful!
By the way, take a look at this site: http://www.vismomedia.com and get paid for hosting cool videos in your blogs.

01 June 2009 05:01 Pinnacle said...

Great post! Thanks for posting the code for this widget!

08 June 2009 14:22 Smitten by Britain said...

I'm having the same trouble where I got into edit the comment feed and blogger gives me essentially a blank box. I can't edit the feed.

Thanks.

Post a Comment