Top Commentators Widget Alongside Avatars For Blogger

The commentators are a primal component of whatever blog, since they are the ones that hand life to the blog, opening too replying to discussions which leads to to a greater extent than action inward the posts.
The commentators are a primal component of whatever spider web log Top Commentators Widget amongst Avatars for Blogger

It is hence really of import to know which are the close active users of your blog, the users who live out to a greater extent than comments, too for this reason, today I introduce a swell method to display a listing amongst the live past times commentators.

The gadget volition await something similar this:

The commentators are a primal component of whatever spider web log Top Commentators Widget amongst Avatars for Blogger

This Top Commentators gadget comes amongst user's avatar too is done amongst JavaScript.

How to Add the Top Commenters Gadget to Blogger


1. To add together this gadget, you lot accept to larn to Layout, click on Add a Gadget link.

2. Select the HTML/JavaScript gadget too copy/paste inside the empty box the next code:
<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 live past times commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHMUW84QOKRjlDq7N9hfu3PK2g8eoPZGuGwy52SfJd45ge6EOgEa5y_yX8UAO8U1YfuSXtzAbE_N-_trP6ls7Pj9pSMUTawjQQYZKG0yHrG6RfIRXeithzLCWkyhrnzwLvYRshLNe8Au8/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLEEvzqCR8I2uuSF4Ya7fip90zmZtSj0ZjzYi6X60jZSbtUKPV7hYb2YBtWAkSFHqLiT61nLR9YRW3-xs7qZ3ToJ3awBwOPKM893ole6ULTKHNNZ-YcORGNmVnyuCEU-lOel8Qd6etVLLY/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) provide i;
  provide -1;
}}
business office replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) provide text;
  var writer = 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="Top Commentators Widget amongst Avatars for Blogger" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > iii && 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);
  provide text;
}
var topcommenters = {};
var ndxbase = 1;
business office showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = novel 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 = novel 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 = novel 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 inward topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        provide b[1].count-a[1].count;
    provide (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 exceptional = 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>
3. Now you lot simply accept to salve changes too you're done!

Configuration

- To modify the issue of users displayed inward the gadget, await for var maxTopCommenters = 8; too alter 8 amongst whatever issue you lot want.
- To alter the avatar size of the commenters, await for var sizeAvatar = 33; too alter issue 33 amongst the issue of pixels you lot want. - To enshroud your cite or to a greater extent than or less other username, supervene upon the someotherusertoexclude text betwixt the quotes (to add together more, add together to a greater extent than or less other comma later the text inward red, too so type the username you lot desire to exclude betwixt the quotes)

Comments