How To Display Top Commentators Widget in Blogger

Let's learn How To Display Top Commentators Widget in Blogger. As a blogger I think you are well-aware with the benefits of a top commentators widget. If you have a top commentators widget on your blog then the chances of commenting more become more and more. You can also get more engagement on your blog.
As you can see various widgets on many big blogs and websites for top commentators. Also you are thinking about how you can add such widgets on your blogger blogs. I'm here! I will do my best for you all. Here I have a great widget for you all just read below.
NOTE: This widget will show images/avatar of your blog's top commentators. You can show/hide your own profile. This is a all-in-one solution for top commentator box for blogger.
How To Display Top Commentators Widget in Blogger
Demo of Top Commentators widget by All Blog Things
Don't miss: Mashable Social Media Subscription and Following Widget for Blogger

How To Add Top Commentators Widget in Blogger

1.  Just go to your blogger "Dashboard"
2.  Select your desired blog and navigate to its "Layout" section
3.  Now click on "Add a Gadget" button ( a list of many plugins will appear )
4.  Select "HTML/JavaScript" and copy below coding than paste in HTML/JavaScript box.
<style type="text/css">
    .top-commenters {
    margin: 2px 0;
    border-bottom: 1px dotted #cccccc;
    }
    .avatar-top-commenters {
    vertical-align:middle;
    border-radius: 31px;
    }
    .top-commenters .commenters-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", "Umer Prince"];
    var maxUserNameLength = 45;
    //
    var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
    var txtNoTopCommenters = 'No! top commentators at this time.';
    var txtAnonymous = '';
    //
    var sizeAvatar = 35;
    var cropAvatar = true;
    //
    var urlNoAvatar = "http://goo.gl/stnCzT" + sizeAvatar;
    var urlAnoAvatar = 'http://goo.gl/Vcedg3' + 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-commenters" 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="commenters-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 commenters = new Object();
          commenters.author = entry.author[0];
          commenters.count = 1;
          topcommenters[hash] = commenters;
        }
      }
      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-commenters">');
        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>
5. Now click on "Save" button and visit your blog.

Customization

Just look at RED text in above coding and change any thing you want. 

Change 5 with any number you want:    var maxTopCommenters = 5;
Change 1 with any number you want:    var minComments = 1;   
Change 0 with any number you want:    var numDays = 0;       
Replace true with false if you want:    var excludeMe = true;  
Change Umer Prince if you want:   var excludeUsers = ["Anonymous", "Umer Prince"];

Finall words!

So! This was a how to article on How To Display Top Commentators Widget in Blogger. Hope! you like it and use it for your blogger blogs. Don't be shy and share this article with your friends bloggers. Happy Blogging.

COMMENTS

Subscribe to our Newsletter

Get Free Tips and Guides to Make Money Online!

Name

2016,13,2017,7,2018,18,2019,1,Adsense,8,Advertising,4,Affiliate Marketing,5,Alexa,1,Alternatives,2,Android,1,Announcements,1,Apps,6,Ask Me,8,Back linking,9,Backup,1,Bing,1,Black Friday,1,Blockquote,1,Blog Names,4,Blogging,25,Blogging Mistakes,6,Books,1,Branding Ideas,1,Business Tips,15,Career Advice,1,Case Study,6,Content Marketing,21,CSS,4,Customization,20,Digital Marketing,6,Domains,6,Downloads,1,eCommerce,2,Email Marketing,4,Entrepreneurship,14,Essay Writing,1,Event Blogging,2,Exclusive,38,Facebook,7,Facts,2,Featured Snippet,1,Finance Tips,1,Forums,2,Freebies,3,Freelancing,4,Giveaways,1,Google,11,Google Adwords,1,Guest Contributions,89,Health Tips,2,Hosting,9,How To,133,Ideas,4,Images,1,Influencer Marketing,2,Info graphic,21,Inspiration,4,Instagram Marketing,1,Interviews,4,Jobs,3,Keywords Research,1,Make Money,53,Motivation,1,Newbie's Guide,80,News,28,NLB,9,Offline Business Ideas,2,Page Rank,4,Paid Reviews,1,PayPal,1,Pictorial,2,Posts,5,PSD Files,1,Quotes and Sayings,39,Reddit Marketing,1,Referral Earning,6,Relationship Tips,1,Review & Guide,14,Roundups,3,Save Money,1,Self Improvement,2,Selling,1,SEO,48,SMO,4,SMS - Messages,1,Social Media,19,Social Media Marketing,5,Sponsors,5,Startups,1,Technology,2,Templates,8,Tips and Tricks,56,Tools,5,Tops and Lists,52,Traffic,15,Twitter,2,Video Marketing,1,Viral,2,Vlogging,4,Web Designing,10,Widgets,24,Wishes and Greetings,1,WordPress,11,Work at Home,6,Writing,30,YouTube,2,
ltr
item
AllBlogThings.com - Make Money Online, Blogging, Digital Marketing: How To Display Top Commentators Widget in Blogger
How To Display Top Commentators Widget in Blogger
Let's learn How To Display Top Commentators Widget in Blogger. As a blogger I think you are well-aware with the benefits of a top commentators widget learn more at blog post.
http://2.bp.blogspot.com/-QC8r0Z4lx9s/VDlFh5imxsI/AAAAAAAAEvw/qV9q54Dh1-c/s1600/comment.PNG
http://2.bp.blogspot.com/-QC8r0Z4lx9s/VDlFh5imxsI/AAAAAAAAEvw/qV9q54Dh1-c/s72-c/comment.PNG
AllBlogThings.com - Make Money Online, Blogging, Digital Marketing
https://www.allblogthings.com/2014/10/how-to-display-top-commentators-widget.html
https://www.allblogthings.com/
https://www.allblogthings.com/
https://www.allblogthings.com/2014/10/how-to-display-top-commentators-widget.html
true
8869657471256965778
UTF-8
Viewing All Posts Bad, Try Again VIEW ALL Read More Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED! LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back To Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Just now About 1 minute ago $$1$$ minutes ago 1 hour ago About $$1$$ hours ago Yesterday About $$1$$ days ago About $$1$$ weeks ago More than some weeks ago Followers Follow PREMIUM and Locked Please share to unlock this content Copy All Code Select All Code All coding here were copied to your clip-board If You can't copy the coding or text here, please press CTRL+C or CMD+C with Mac to copy now