Friday, June 13, 2008

Recent Comment Widget 2.0

I was recently updating my blog, and wondered if there is a way to know the what recent comments have been made. You can do that if you get the RSS feed for comments.

Beautifulbeta has the tool already made. The link is here. I was very happy to find that serves my purpose.

Then I realized that it could be much better. If I had to check the recent comments widget's output, I had to reload the whole page. It can be real pain if your blog is on bit heavy dose of scripts and widgets.

I understood the code and found that it needs modification for better performance. The idea was to create a link/button which will activate the comment loading function and update that widget only. It took me 4 days to write the code, since I am not excellent at JavaScript.

The final output has been tested and its working on FF and IE. No other browser was tested.

The link to the javascript source is -> updateCommentsNew

You will need to add a widget to the intended place. The details are mentioned here. Once you have installed the original widget, you will need to make few changes. Don't forget to save the customized setting done to the original widget before changing it.

Open the widget code and replace the code with the following -
<script src='http://mywebsite/scripts/updateCommentsNew.js' type='text/javascript'/>
<script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://<your-blog-address>"></script>

Then edit the expanded HTML code of the blog. Find the widget that you just added. The one I added looks like this -
<b:widget id='HTML2' locked='false' title='Recent Comments' type='HTML'>
When you have located it, find this text immediately after it -
<h2 class='title'><data:title/></h2>
Now, we will add the button/link next to it. Replace the above text with -
<h2 class='title'><data:title/></h2> <a href='javascript:updateComments();'>Update</a>
** Check update below.

After this, you have to look for this piece of text after the location where you made the change -
<div class='widget-content'

Replace it with this -
<div class='widget-content' id='recentcomments' name='recentcomments'

Notice that the recentcomments is the ID of the widget. If you are already using this ID somewhere else, please change the name to something else. You will also need to change my script which looks for this ID.

In the head of the HTML code, include my script file. For example -
<script src='http://mywebsite/scripts/updateCommentsNew.js' type='text/javascript'/>

Save the changes and reload the blog. Look for the new widget. The comments should be visible there. Whenever you need to refresh it, just click the link/button created (in the above example its Update link).

Hope everything works fine :)

I just noticed a bug in the script that I had uploaded. My blog was hard-coded in it. It has been corrected. So, in order to use the modified script, change the "Update" link code to -
<a href='javascript:updateComments(&quot;http://<your-blog-name>;);'>Update</a>
You can see the widget in action in the sidebar.
Have fun! :)


  1. HA! You just made me get rid of all my doo-dads.

    I find that having the comments pop up in my email is enough...since I only get about if I had time to scold the lurkers who read and run then I might try it...Na..
    too much work.

    I try to get through about 60 blogs a week so I know how hard it is to maintain relationships in the blogosphere.

    You're fortunate to have the patience to fiddle with code. I'm just glad if Blogger publishes a post that resembles what I have put together.

  2. Hey Donn!
    Yes, its very clear that I handle less than 10 comments per post. That's why I am happy with this tool.

    I am online most of the time and keep the blog open all the time instead of loading them to check the comments. (I haven't enabled the comments posted to e-mail feature).

    There was a time when I was having lots of readers.. so I know what you mean :)

    Happy blogging!
    I really like your awesome blog :)

  3. Thanks for the updated widget! BTW, do you have an idea how to turn on the capital letters for the post titles?

  4. Hi Doc!

    You will need to use this in the post title style -

    text-transform: uppercase;

    You have to look into the template of your blog for ".post-title" text (or whatever class is used for the title of the post) and add the above property to it. It should become something like this -

    .post-title {
    text-transform: uppercase;

    I hope it helps. :)


Talk to me :)