How to Show Top Commenter in Blogger

Advertisements
In the past, we have already showed you how to display most recent comments in blogger. However, one of our users contacted us asking how to display top commenters in the sidebar of his blogger site. Comments are the handiest way of engaging users on your content. You might have already noticed such widgets on various popular blogs, as it’s the best way to feature your most loyal reader so that it could motivate new users to comment and gain the same luxury. In this article, we will show you how to show top commenter in blogger.

The very first thing you need to do is to login to your blogger account by visiting blogger.com. Once you are logged in, select the blog you’ll like to add the top comment widget. Go to Template >> Edit HTML >> Search for ]]></b:skin> and just above it paste this code:

.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;
}

Now go to Layout >> Add a Gadget >> from the list of widgets select Add HTML/JavaScript and proceed to the next step.

Now in the text area of the widget, paste the following JavaScript code. This code would be responsible for digging, finding and displaying the top commenters of your blog. You can also fill the tile of the widget i.e. Our Top Commenter or etc according to your needs.


<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 Recent commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR_sqFk1PlX6g0PhLkz5wva2MQHwonPUa2uBHD4SImkXFji1dbA25hrjBmkc4VapWkZ_vJumigtMDfiT5DhH0l5lskRbnhEFtiREf_PLxSeQV8OCK-olmZLYrx4gkz0T9glfR1DOYG4aqv/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2LJ-li3HpCcVo_eRcCOQMaroiLE4foyeWKiA15P7cN4ius_FQlX0jQieDw379elXmVoAHvodnDa3wVSrmaXOy764JdiUUBVCaLA21IbIptEiAWzLxqANXGXnDzcreRhw12QDBhiG8MDz1/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>


Once everything is done, save the widget by pressing orange “Save” button located towards the bottom and the widget will start appearing at your blog.  Now, it is up to you where you exactly want the widget to appear either in the sidebar or footer. In Layout area, simply select and drag the widget to a new position and press “Save Arrangement button”.

We hope this tutorial may have helped you in learning how to display top commenters in blogger sidebar. If you liked this widget then, do take a look at our Blogger Widgets Inventory. Share this article with your friends on Google+, Facebook or twitter.

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

5 comments

October 9, 2014 at 12:34 PM

(Y)

CSV
October 28, 2014 at 5:01 AM

Can you guide me how to fix this error

Duplicate title
The page title "My Tech Info" is the same as on 57 other pages of the website. You should use unique titles for your different pages. This makes sure that the pages are described uniquely and do not compete with each other for keyword relevance.

Other pages that use this title:
◾http://www.mytech-info.com/
◾http://www.mytech-info.com/feeds/1040195493057833874/comments/default
◾http://www.mytech-info.com/feeds/1109065466910298209/comments/default
◾http://www.mytech-info.com/feeds/1144321843585764763/comments/default
◾http://www.mytech-info.com/feeds/1175891209789652020/comments/default

Editorial Team MOD
October 28, 2014 at 5:55 AM

Make sure you have Single Title and Description on per page, so blogger doesn't dublicates any of your title or description.

However, Your achieve pages would continue to duplicate title tags but there is no worry because those pages are not indexed in search.

January 9, 2015 at 4:48 AM

i need the widget that resets every month

MNK
February 4, 2015 at 9:45 AM

nice widget thanks !!

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.