RSSSubscribe to Review Of Web

The first version of our Recent Comments widget was a big success. Now, thanks to extensive customizations by Clemens Vargas Ramos we have come up with a new and much improved version of that widget.

Here is how the new improved widget works and how is it different from the rest:

  1. This widget is completely customizable and now supports internationalization.
  2. This widget does a quick search on all posts of the blog and save the blog-titles. The reason is, by default blogger comments do not contain the real post-title but kind of a pseudo title, i.e. the filename of the html file of the post.
  3. This widget searches for all available posts of the blog – even with hundreds and thousand of posts. Apparently blogger has an upper limit of posts within a single feed at 500. Therefore the script makes repeatedly calls to feeds on blogs with more than 500 posts.  This search happens only once at load time of the script. I tested it with a blog with over 1300 posts and it behaves well and quick.
    Next the script calls the comment feed and displays the comments together with some other information. This script will find every single comment of a blog – even with thousands and tens of thousand of comments. This is the big difference when compared to similar blogger widgets available on the net.
  4. Look and feel of the new widget is quite slick and Web2.0 ish.

Demo of this script is available here

  • English (look at section “Recent Comments”)
  • German (look at section “Letzte Kommentare”)

Download

  • Right Click and download
  • Unzip rcc.zip to get rcc.html
  • Open the file rcc.html in a text editor like windows notepad. [Don't use text formating applications like Word or OpenOffice, these applications can damage the code]

Installation

  1. Look for YOURBLOGNAME and replace YOURBLOGNAME with your blog name. Look for section “// user defined variables”.
  2. The script is multilingual – adjust to your language: German, English (default) or even user defined by you! Look for section “// user defined variables”.
  3. Adjust text, background colors and fonts with CSS if needed.
  4. Copy the code into an HTML/Javascript-Widget of your sidebar.
  5. You’re done. Enjoy the new widget! For further configuration look for section “Configuration:” within this script.

Please let us know your thoughts on this new widget in the comments section below.

If you like the above widget. Consider donating and encourage us to come up with more such widgets.



*The code is released under the condition that footer credits should remain intact.

Want to get an update as soon as we publish new article? I recommend you to subscribe via RSS Feed. You can also subscribe by email and have new articles sent directly to your inbox. It's absolutely free!

Releasing the Recent Comments widget for blogspot/blogger users.

How is it different from the other Recent Comments widget?

The problem with other widgets is that the source code for them lies with the widget author and the authors often integrate it in within their own site. If because of some problem their site is down, the recent comments widget will not work.

Here, I am releasing the source code so that the logic would reside within your blog itself and hence you can do away with dependency on 3rd party site not under your control.

How to install Recent Comments widget for blogger?

  1. Login to the blogger dashboard.
  2. Go to ‘Page Elements’ tab page elements
  3. Click on Add a Gadget. Select HTML/Javascript widget type. image
  4. Now this is the most important step. Select the whole code given below and paste it in the widget box you have just opened above.
    <script style="text/javascript">
    function showrecentcomments(json) {
      var numcomments = 5;
      var showcommentdate = true;
      var showposttitle = true;
      var numchars = 100;
    for (var i = 0; i < numcomments; i++) {
        var entry = json.feed.entry[i];
        var alturl;
        if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
            alturl = entry.link[k].href;
            break;
          }
        }
       alturl = alturl.replace("#", "#comment-");
       var postlink = alturl.split("#");
       postlink = postlink[0];
       var linktext = postlink.split("/");
       linktext = linktext[5];
       linktext = linktext.split(".html");
       linktext = linktext[0];
       var posttitle = linktext.replace(/-/g," ");
       posttitle = posttitle.link(postlink);
       var commentdate = entry.published.$t;
       var cdyear = commentdate.substring(0,4);
       var cdmonth = commentdate.substring(5,7);
       var cdday = commentdate.substring(8,10);
       var monthnames = new Array();
       monthnames[1] = "Jan";
       monthnames[2] = "Feb";
       monthnames[3] = "Mar";
       monthnames[4] = "Apr";
       monthnames[5] = "May";
       monthnames[6] = "Jun";
       monthnames[7] = "Jul";
       monthnames[8] = "Aug";
       monthnames[9] = "Sep";
       monthnames[10] = "Oct";
       monthnames[11] = "Nov";
       monthnames[12] = "Dec";
       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('<br/>');
       if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
    document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented');
       if (showposttitle == true) document.write(' on ' + posttitle);
    document.write('<br/>');
    if (comment.length < numchars) {
    document.write('<i>');
             document.write(comment);
    document.write('</i>');}
       else
            {
    document.write('<i>');
             comment = comment.substring(0, numchars);
             var quoteEnd = comment.lastIndexOf(" ");
             comment = comment.substring(0, quoteEnd);
    document.write(comment + '...<a href="' + alturl + '">(more)</a>');
    document.write('</i>');}
    document.write('<br/>');
      }
    document.write('<br/>');
    }
    </script>
    <script src="http://xyz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
    </script><a href="http://reviewofweb.com/blogging/recent-comments-blogspot-widget/">Widget </a>by <a href="http://reviewofweb.com/">ReviewOfWeb</a>
  5. Scroll down to src=http://xyz.blogspot.com and replace xyz with your blog’s name. For example if your blog’s URL is http://abc.blogspot.com then the code should become src=http://abc.blogspot.com DO NOT TOUCH any other part of the code or else it might create problems.
  6. You are done! Lastly please do not remove the footer credits*.

Please let me know if you face any problem implementing the code above.

If you like the above widget. Consider donating and encourage us to come up with more such widgets.


*The code is released under the condition that footer credits should remain intact.