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>.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments2"></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 :)

[Update]
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>.blogspot.com&quot;);'>Update</a>
You can see the widget in action in the sidebar.
Have fun! :)