Don't Miss

Add Top Commentators Widget With Avatars To Blogger

By Zohaib Liaqat - 6 Comments
You might have seen Top Commentators widget on blogs powered by word press, but today I'm going to share Top Commentators Widget for Blogger Blogs. Top Commentators widget will help you to show your active users on the base of their comments. This widget shows the Top commentators of your blog along with the number of their comments and their avatars.

Adding Top Commentators Widget To Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Layout >> Add a Gadget and Select HTML/JavaScript Gadget from the list of Gadgets
Step 3. Copy (Ctrl + C) and Paste (Ctrl + C) the below code in the Empty Box of that Gadget

<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/AVvXsEh3aMGMko4NwaZh-yqw7G1wU7mxDTUwXoP8UQmWTJx3ffo-gm8LdcliW5EE-5fzjixh8S8Cd6pSM0mAzjbgHwDXKSr6zgtRoc2Qhd8lm7YI0OUz7HPMB9db8AR7_o_KzzRwdoHa2YXtxow-/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN-asH7Tg99HeiJc6bkVKkgJ1RFv3oLq-LizLgjcY1sIqz5e9tKtiMvcUbRrS8fWdyXkGKDEoFZFSKFQMdGMkoS06lHKnM3Gk0JYZHAoFICtj0l7dUOYVWhj0kWu5T99OMrvRbcBhP4gsu/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>

  •  Change var maxTopCommenters = 8; the number 8 to the number of commentators you want to show
Step 4. Click on Save Button.
And you're Done :) 

---> Do you like this article? Share it with your friends/followers and subscribe to this blog now, for you to stay updated with our latest posts.

Tags:

6 comments to ''Add Top Commentators Widget With Avatars To Blogger"

ADD COMMENT
  1. Figure your every day and month to month consumptions, and attempt to evade superfluous buys. You ought to likewise fabricate some sparing, so that there will be no compelling reason to acquire cash for surprising costs or crises. Payday Loans

    ReplyDelete
  2. Wow this is an awesome post. I just hope it works on my blog Naijcrackgist

    ReplyDelete
  3. Everything that is shared here is very interesting www hotmail com login

    ReplyDelete
  4. Clueless expenses arrive when you wouldn't dare hoping anymore more regularly when you have no assets to help them. They frequently come as a gathering.quick check cashing corona

    ReplyDelete
  5. If you've been appliance MySQL database to abundance your important data, it is acute that database backup you accomplish a advancement of your abstracts to anticipate any accident of data. This commodity shows you how to advancement and restore d...

    ReplyDelete
  6. Telangana Board of Intermediate Education (BIE Telangana) Responsible for the conduct Intermediate 1st Year Examination Starting Exam Date 16 March 2023, Intermediate 2nd Year Examination Starting February 2023 End of Exam Date 18 (Monday) March 2023.TS Inter 1st Year Model Paper 2023 Students Download TS Inter 1st Year Model Paper 2023 at Official Website Only, Telangana State Board of Intermediate Education abbreviated TSBIE, is a Board of Education in Telangana, India. It is established in 2014. It is located at Nampally, Hyderabad.

    ReplyDelete