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.



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:-



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="http://externalsite.com/filename.js"> </script>

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.



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 < 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://tips-for-new-bloggers.blogspot.com/">Widgets by Tips for New Bloggers</a></div>'); } </script> <script src="http://tips-for-new-bloggers.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script></ul> <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