How To Install Top Commentators Widget On Blogger

How to install top commentators widget on Blogger. When we decide to use blog as our media to share everything online or just to sharpen our writing skill, then we are fully aware of the consequence which is our published articles will be commented by our readers.

And we are grateful with that, that means our work is appreciated. Comments from our readers are always welcomed and most of blogger give that opportunity for their readers by providing comment area in each of the published posting.

In Blogger.com -- the best content management system -- we are provided with a great commenting system by default to accommodate users to write down their comments without hassle. Aside from that, in Blogger we can also display Top Commentators Widget too.

With that widget we can reward those who have frequently commented to our postings by displaying their names.

If you wish to have this widget installed on your Blogspot blog, then your wish will soon come true. You need to only add lines of codes to HTML/Javascript gadget and done. The Top Commentators Widget will instantly show up.

Here is the demo.

Interested to try this widget? Then follow the steps below.

Install top commentators widget on Blogger

Installing top commentators widget will be more handy on the blog that already has many comments. And this only applies to blog that uses official blogger comment system, if you use other third-party commenting systems like Disquss, Facebook, etc.

1. Login to your Blogger account, then head to Layout and add gadgets.
2. Scroll down to find and choose HTML/Javascript.
3. Write down the title of the gadget, for example Top Commentators.
4. Now just paste the following code to the empty box there, then hit the Save button.
   

   <style type="text/css">
   .top-commentators {
   margin: 3px 0;
   border-bottom: 1px dotted #ccc;
   }
   .avatar-top-commentators {
   vertical-align:middle;
   border-radius: 30px;
   }
   .top-commentators .commenter-link-name {
   padding-left:0;
   }
   </style>
   <script type="text/javascript">
   var maxTopCommenters = 8; 
   var minComments = 1;     
   var numDays = 0;         
   var excludeMe = true;    
   var excludeUsers = ["Anonymous", "someotherusertoexclude"]; 
   var maxUserNameLength = 42;
   //
   var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
   var txtNoTopCommenters = 'No top commentators at this time.';
   var txtAnonymous = '';
   //
   var sizeAvatar = 33;
   var cropAvatar = true;
   //
   var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheDYGK9XzTBTcv9nmVqU0hD_TJx066mMuw5Xx1RYKZsrTTKJXSCxyZwzoN2FgdC_HLfrBEiWXrNCfP4qN46KfaRvKoAxqzyYXXif79KZzQTtIN_F2fZqziH5xj2TwHwhHQiNjXbOBHU7id/s1600/avatar_blue_m_96.png" + sizeAvatar;
   var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Z0q7Bq3bIVO2MIKQ2ELQICub4dHalHQ0X8N0ruS6iIwWAhigMiqGC3gY13LTZZKD_kYpaEXHEQeDS61hKYZ87jKP7IEzubmFj3vWeZzvuTRkK0VByG8YqmeLGtJyhYqA4cYrYq-N0YB9/s1600/avatar1.png' + sizeAvatar;
   var urlMyProfile = '';
   var urlMyAvatar = '';
   if(!Array.indexOf) {
    Array.prototype.indexOf=function(obj) {
     for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
     return -1;
   }}
   function replaceTopCmtVars(text, item, position)
   {
     if(!item || !item.author) return text;
     var author = item.author;
     var authorUri = "";
     if(author.uri && author.uri.$t != "")
       authorUri = author.uri.$t;
     var avaimg = urlAnoAvatar;
     var bloggerprofile = "http://www.blogger.com/profile/";
     if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
       avaimg = author.gd$image.src;
     else {
       var parseurl = document.createElement('a');
       if(authorUri != "") {
         parseurl.href = authorUri;
         avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
       }
     }
     if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
       avaimg = urlMyAvatar;
     if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
       avaimg = urlNoAvatar;
     var newsize="s"+sizeAvatar;
     avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
     if(cropAvatar) newsize+="-c";
     avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
     var authorName = author.name.$t;
     if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
       authorName = txtAnonymous;
     var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
     if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
     if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
       authorName = authorName.substr(0, maxUserNameLength-3) + "...";
     var authorcode = authorName;
     if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
     text = text.replace('[user]', authorcode);
     text = text.replace('[image]', imgcode);
     text = text.replace('[#]', position);
     text = text.replace('[count]', item.count);
     return text;
   }
   var topcommenters = {};
   var ndxbase = 1;
   function showTopCommenters(json) {
     var one_day=1000*60*60*24;
     var today = new Date();
     if(urlMyProfile == "") {
       var elements = document.getElementsByTagName("*");
       var expr = /(^| )profile-link( |$)/;
       for(var i=0 ; i<elements.length ; i++)
         if(expr.test(elements[i].className)) {
           urlMyProfile = elements[i].href;
           break;
         }
     }
     if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
       var entry = json.feed.entry[i];
       if(numDays > 0) {
         var datePart = entry.published.$t.match(/\d+/g);
         var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
      
         var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
         if(days > numDays) break;
       }
       var authorUri = "";
       if(entry.author[0].uri && entry.author[0].uri.$t != "")
         authorUri = entry.author[0].uri.$t;
       if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
         continue;
       var authorName = entry.author[0].name.$t;
       if(excludeUsers.indexOf(authorName) != -1)
         continue;
       var hash=entry.author[0].name.$t + "-" + authorUri;
       if(topcommenters[hash])
         topcommenters[hash].count++;
       else {
         var commenter = new Object();
         commenter.author = entry.author[0];
         commenter.count = 1;
         topcommenters[hash] = commenter;
       }
     }
     if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
       ndxbase += 200;
       document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
       return;
     }
     // convert object to array of tuples
     var tuplear = [];
     for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
     tuplear.sort(function(a, b) {
       if(b[1].count-a[1].count)
           return b[1].count-a[1].count;
       return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
     });
     var realcount = 0;
     for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
       var item = tuplear[i][1];
       if(item.count < minComments)
           break;
       document.write('<di'+'v class="top-commentators">');
       document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
       document.write('</d'+'iv>');
       realcount++;
     }
     if(!realcount)
       document.write(txtNoTopCommenters);
   }
   document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
   </script>

The widget is now appearing on the location of your choice. But it's not yet right, it's because you haven't done the following.

Configure the top commentators widget

• someotherusertoexclude you can exclude your name or a certain name from appearing to the widget, by change the someotherusertoexclude, and add more by separating it with comma.
• var sizeAvatar = 33; 33 is the size of the avatar of each commentator, change the 33 to fit with your site.
• var maxTopCommenters = 8; you can change the 8 number into your heart desire. That's the number of commentators to be displayed in the widget.

That's it, you have done it. Your blog is now having a top commentators widget that showing your blog's visitors name that comment on number of your posts.