Section 36. Display Recent Comments Links on Your Blog

36. Display Recent Comments Links on Your Blog

29 Understanding the Blogger Template Structure and Editor

30 Identifying Elements in the Blogger Template Source

When Blogger comments are enabled, you can display a list of the most recent comments made on your blog by pasting a bit of JavaScript code into your template. This code displays the most recent comment first in the list, and the display includes the comment author, a link to the comment, and a tooltip containing some of the comment text itself.

A single modification to your template is necessary to implement the "Farrago Recent Comments Hack," which was created by a Blogger user. To begin, log in to Blogger and click the Change Settings icon in the Blogs section of the Blogger Dashboard. Go to the Comments navigational item and modify the value of Comments Timestamp Format so that the mm/dd/yyyy hh:mm:ss format is selected (for example, 08/13/2005 4:28:05 PM). Click the Save Settings button, and then click the Template tab so that the Blogger template editor is visible.

TIP

Before making modifications to your template, be sure to save a backup copy of your current template. If something goes awry while making changes to the template, you can quickly replace the messed-up version with the backup version.

The code for this particular functionality can be found at the BloggerHacks blog (http://bloggerhacks.blogspot.com/). Visit BloggerHacks and click the Farrago Recent Comments Hack link in the sidebar to obtain the code you must copy and paste into your template. Next, determine where in your template's sidebar you want the list of recent comments to appear. Wherever that placement might be, paste the code in its entirety, surrounded by <MainOrArchivePage> </MainOrArchivePage> conditional tags, like this:

36. Display Recent Comments Links on Your Blog

 1:  <MainOrArchivePage> 2:  <!-- **** FARRAGO RECENT COMMENTS HACK **** --> 3:  <!-- Version 1.03 --> 4:  <!-- Copyright © 2004 Ebenezer Orthodoxy --> 5:  <!-- http://boggerhacks.blogspot.com --> 6:  <!-- ************** OPTIONS *************** --> 7:  <script type="text/javascript" language="JavaScript1.2"> 8:  var titleText = "Recent Comments"; 9:  var numberToShow = 5; 10: var displayTemplate = "[name]:<br/>[title]"; 11: var nameIsLink = true; 12: </script> 13: <!-- ********* CODE DO NOT CHANGE ******** --> 14: <script type="text/javascript" language="JavaScript1.2"> 15: [...] 16: <!-- END FARRAGO RECENT COMMENTS HACK --> 17: </MainOrArchivePage> 

NOTE

Line 15 represents the spot where a majority of the code has been snipped for presentation here, and it is code you shouldn't mess with anyway unless you are skilled in the ways of the JavaScript.

Lines 8 through 11 indicate variables that you may customize for use in your blog. By changing the value of the titleText variable in line 8 (for example, changing "Recent Comments" to "some other title"), you can give this area a different title. This text will be wrapped in an <h2></h2> tag pair, using the sidebar-title class. If you do not have a sidebar-title class, you can define one in your style sheet. Optionally, you can replace this value in the DO NOT CHANGE portion of the JavaScript code, being very careful when you do so.

You can change the value of the numberToShow variable in line 9 to any number between 1 and 10. The displayTemplate variable in line 10 controls the layout of the individual entries. For instance, if you want the comment author's name and title of the post to be on one line instead of two, remove the <br/> tag from the value. Line 11 controls whether the comment author's name is a link. After making your changes to your Blogger template, click the Save Template Changes button and republish your entire blog.

1.	View the Most Recent Comments Look in your sidebar for the section containing recent comments. Any comments left before the implementation of the recent comments feature will still be displayed; you don't have to wait for new comments to begin populating the Recent Comments area.
2.	Follow a Link to the Comment The links in the recent comments area are made up of the title of the blog post to which they are attached. Clicking the link takes you to the specific comment on the individual post page.
3.	Tooltip Displays Comment Text If you hover your mouse over the title link, you will notice the first 40 or so characters of the author's comment are displayed in a tooltip.