Home Blogging Tips & Tweaks How to Add a Top Commentator Widget to Blogger

How to Add a Top Commentator Widget to Blogger

As the title of the post implies, this tutorial focuses on how to add a top commentator widget to Blogger. The widget will help display the faces and names of the top commentators in your blog including the number of comments they have left on the blog. This will help you know which among your blog visitors is more active without having to go through individual posts to find out the number of posts they have commented on. So to add the widget to your blog, simply follow the guide below;

  • Login to your Blogger Dashboard.
  • Navigate to Layout >>> Add a Gadget.
  • On the pop-up page, locate and select HTML/JavaScript.
  • Now copy the code below and paste inside the HTML/JavaScript box.
<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 = 5;

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://www.educativehelper.com/wp-content/uploads/2020/01/avatar_blue_m_96.png" + sizeAvatar;

var urlAnoAvatar = 'https://www.educativehelper.com/wp-content/uploads/2020/01/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>
  • Finally click on Save to add the widget to the blog.

Optional Customization:

The following changes which can be applied to the top commentator’s widget code above is optional and can be ignored. Here are the changes you can make

  • To change size of the commentator’s profile image/avatar, change 33 in var sizeAvatar = 33; to the size you want.
  • By default, the number of top commentators that will be appearing in the widget when you make use of the above code will be 5. To change the number of commentators that will be appearing in the widget, simply change 5 in var maxTopCommenters = 5; to the number you want.

That is simply how to add a top commentator widget to a Blogger blog. Hope that was helpful?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments