130 Easy Peasy Recent Comments Widget for Blogger Layouts August 25, 2008 /

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).