Sep 17, 2008

Recent Comments Widget - Customized

Usually Blogger's feed widget is used to display recent comments but it is slow and sometimes unable to display your recent comments. Also we can only show very few words of the comment (too few to comprehend) and upto 5 comments only.
Now we have a solution that allows the blog author to customize both these. You can see the new widget in my footer, showing selected comment within alphabetic range.

With this widget,
1. You can specify how many comments you want to display in your blog (defaults to 10)
2. You can specify the maximum number of letters that should be displayed in each comment (defaults to 100).

Here is how you add this widget to your blog.

Step 1: Goto Template --> Edit HTML tab. Find the "</head>" tag in your template and add all the code given below before it and save the template.

<script type='text/javascript'> function commentDisplay(json) { for (var i = 0; i &lt; numcomments; i++) { var entry = json.feed.entry[i]; var alturl; if (i == json.feed.entry.length) break; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } alturl = alturl.replace("#", "#comment-"); if (entry.content) { comment = entry.content.$t; } else if (entry.summary) { comment = entry.summary.$t; } var re = /&lt;\S[^&gt;]*&gt;/g; comment = comment.replace(re, ""); document.write('&lt;a href="' + alturl + '"&gt;' + entry.author[0].name.$t + '&lt;/a&gt; commented:&lt;br/&gt;'); if (comment.length &lt; numchars) document.write(comment + '&lt;br/&gt;&lt;br/&gt;'); else document.write(comment.substring(0, numchars) + '...&lt;br/&gt;&lt;br/&gt;'); } } </script> 


Step 2: Goto Template --> Page elements tab and click on "Add a page element" in your sidebar. Choose HTML/Javascript element. Give an appropriate title and copy/paste this code.


<br/><script language="javascript">
var numcomments = 10;
var numchars = 100;
</script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?
alt=json-in-script&callback=commentDisplay"></script>


You need to change the blog URL to yours. You could also change the number of comments/letters per comment to whatever fits your blog. Then, save the changes and move the widget to wherever you want. There, you have a customized recent comments widget!!

The widget is originally designed by hackosphere.

Back to Useful Widgets

0 comments:

Post a Comment