Top Commentators Widget with Avatar for Blogger

This Top Commentators Widget with Avatar for Blogger will display the name together with the round profile pictures of your blog top commentators. The name of your active comment's links to their Google Plus account. The widget has an option to exclude someone from showing their name in the widget by just adding their name in the code, you will learn this later. Once you install this gadget in your blog sidebar you will see the simplicity  of the widget designs, and I'm sure that you will like it. 

The readers that are commenting in our blog posts is the one who gives life to every blog. Ones they drop a comment, the discussion between the author and the reader will start. That's why this widget will help the author to determine if who is the most active readers of your blog who leave more comments than other. You can determine if someone is your loyal readers or not, once their name shows in the widget, that means they are your loyal readers/visitors that you must give an importance by answering their questions and replying to whatever their comments are. 

When you add this commentators widget in your blogger sidebar, it helps to increase the chance that your readers will write comments in your articles. Just imagine if one of your visitors want a little fame, that visitor will drop many comments in your blog in order his/her name to be displayed in the blog sidebar. The widget will also serve as simple appreciation for those people that are commenting in your blog. 

Related Pots: Add Recent Comments Widget with Avatars to Blogger |Add Simple random Posts Widget To Blogger | Floating Social Media button Widget or Blogger | Simple Recent Posts Widget for Blogger

Are you interested with the widget? if your answer is yes follow my instruction below on how you can add it in your own blog, Don't worry it's very easy to implement in blogger.

Steps on How to Add Top Commentators Widget to Blogger

Step 1: Login to your Blogger Dashboard > Go to LAYOUT then click the ADD A GADGET

Step 2: In the pop up window select the HTML/JavaScript option.

Step 3: Select then Copy the code below and Paste it inside the CONTENT area the big empty box. In the title box type "Top Blog Commentators" or whatever title you want.

<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 = 10; 
var minComments = 1;     
var numDays = 0;         
var excludeMe = true;    var excludeUsers = ["Anonymous","devidmark","Hieronymus Franck","Humaun Kabir","Janny Simon","Murali Rajesh","OtherUserNameToExclude"]; 
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/AVvXsEjNjbVwBTSA0stlUXdUIPy7leLSQUWRfHxVxsen7XxGxnORLPitzjE6BbeWJDXPdIPY_2VEjY6059zmcZE6zg5SMYpUDojTiB-8ohMp6byiQFU-yoQ04ZYHMF0MjvW-l4K3o694ydfWKb81/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsbKVcvvh3UiE-s7aQRVhyXsLZ3EYRlkyIpKek_cxUcgHs0m9JnlVIsd3S9kT0Gydb4DNGsBi2al1oHcMfQix08RFnkG3hnhIK1_T1SF-IdtKSZJ4Y0P05wyQVXRMW5vYY5EQODtguCbjr/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>

Step 4: Click the SAVE button and visit your blog to view your new Top Commentators gadget.

Widget Settings

var maxTopCommenters = 10; 

• The default number of users displayed by default is 10. Just change the number to any number you want.

var excludeUsers = ["Anonymous","devidmark","Hieronymus Franck","Humaun Kabir","Janny Simon","Murali Rajesh","OtherUserNameToExclude"]; 

• To hide your own name or the other username just replace the "OtherUserNameToExclude". You can add more username to exclude by using this format " ", See the example above "Anonymous","devidmark","Hieronymus Franck".

var sizeAvatar = 33;

• You can change the size of the commenter' avatar by changing the 33 to whatever number you want

Final Words

This widget will add some uniqueness in your blog!. Let me know if your blog comments were increase after adding the Top Commentators Widget by writing a comment below. If you have further questions with the widget you can also ask me in the comment area. Keep on visiting guys for more fresh updates, that's all thank you!