Adding A Top Commentator With Gravatar To Your Blogger Blog

Hey guys, I just realize that i have visited a lot of blogs both on WordPress and blogger platform. But believe it or not, I have never seen a top commentator widget on all the blogger blogs I have visited or have you seen?

top commentator with gravatar widget for blogger blog

We all know that the best way to get more commentators is to reward them and what better way to reward them then showing them you care :). So today without wasting much of our time, I will be showing you a simple method/ way of adding a top commentator widget. So are you ready?

Adding A Top Commentator With Gravatar To Your Blogger Blog

Note: Before we move further, I’ll like to let you know that the code was given to me by a friend. It is working 100% for me and it should be working for you as well. And the best part, it does not slow down your blog.

Must Read: How To Make Your WordPress Mobile Theme Compatible With W3 Total Cache

Firstly – remember that it is always good to back up your blog before attempting any code editing. But In case you don’t know how to backup your blogger blog, learn it here now

Go to your blogger blog dashboard and click “Layout”

Now click “Add a Gadget” where you want the top commentator widget to appear

Have you clicked it? Now scroll to where you’ll see “HTML/JavaScript”, click it.

Have you done that? If yes, a new box will pop up

Now, in the “Title” area, type “Top Commentator” (or whichever name you wish to)

Now – in the “Content” area, paste the code you see below.

[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 top commentators at this time.’;

var txtAnonymous = ”;

//

var sizeAvatar = 33;

var cropAvatar = true;

//

var urlNoAvatar = "http://2.bp.blogspot.com/-pWdg8wLsedo/UmVWQxLdwrI/AAAAAAAAEVk/-z7YgKykkuU/s1600/avatar_blue_m_96.png" + sizeAvatar;

var urlAnoAvatar = ‘http://1.bp.blogspot.com/-6B6DXCp8dek/UmVPm7D2mOI/AAAAAAAAEVU/Xz-3z2nRpUk/s1600/avatar1.png’ + sizeAvatar;

var urlMyProfile = ”;

var urlMyAvatar = ”;

&nbsp;

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;

&nbsp;

var authorUri = "";

if(author.uri && author.uri.$t != "")

authorUri = author.uri.$t;

&nbsp;

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+"/");

&nbsp;

var authorName = author.name.$t;

if(authorName == ‘Anonymous’ && txtAnonymous != ” && avaimg == urlAnoAvatar)

authorName = txtAnonymous;

var imgcode = ‘<img height="’+sizeAvatar+’" width="’+sizeAvatar+’" title="’+authorName+’" src="’+avaimg+’" />’;

if(authorUri!="") imgcode = ‘<a href="’+authorUri+’">’+imgcode+'</a>’;

&nbsp;

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>’;

&nbsp;

text = text.replace(‘[user]’, authorcode);

text = text.replace(‘[image]’, imgcode);

text = text.replace(‘[#]’, position);

text = text.replace(‘[count]’, item.count);

return text;

}

&nbsp;

var topcommenters = {};

var ndxbase = 1;

function showTopCommenters(json) {

var one_day=1000*60*60*24;

var today = new Date();

&nbsp;

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;

}

}

&nbsp;

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;

&nbsp;

if(excludeMe && authorUri != "" && authorUri == urlMyProfile)

continue;

var authorName = entry.author[0].name.$t;

if(excludeUsers.indexOf(authorName) != -1)

continue;

&nbsp;

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;

}

&nbsp;

// convert object to array of tuples

var tuplear = [];

for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

&nbsp;

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;

});

&nbsp;

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>’);

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> [/code]

You have successfully completed the process. Now you should see the top commentator widget on your blog…

Must Read: How To Disable Any Plugin From a Particular Post or Page

To control how many commentators you like to display, find the below code

[code] var maxTopCommenters = 8; [/code]

Have you seen it? Now change the 8 to any figure you wish to.

If you want to increase the size of the gravatar, search for the below code

[code] var sizeAvatar = 33; [/code]

Have you seen it? Now change the 33 to any number you wish or better for your blog.

Let Keep It Busy.

Hope the post is simple enough for a layman to understand? If not, please do use the comment box below to state your problem and I will definitely get back to your ASAP

Do you have comments, questions or thoughts you would love to share with us? Then please do by using the comment box below. Remember that your comments, questions and thoughts are highly welcome and most appreciated.

Must Read: Tips And Tricks To Recover Deleted Photos From Android Phone

Was the post helpful or interesting? Then do click the like button and share us with friends because you will never know who among your friends might be in need of a lovely post like this. Do not forget to subscribe to our feed for your latest updates on the go.

Similar Posts

41 Comments

  1. Nice Job Babanature,
    You done a great work to share right valuable html coding to add Top Commentator With Gravatar on Blogger. There is no much need to understand how it work, There is cording & it’s time to use this cording 🙂

    1. Hello Taniya,
      Glad you liked the post. Yeah the code is very easy to implement.
      Thanks for stopping by and dropping your comment, do have a brilliant weekend start 🙂

  2. Hi Babanature,

    Nice tutorial yet again 🙂

    Yes, when I was on bloggers, I never really knew how to add such a widget. In-fact, I hardly had anything except for the ready made templates the free theme had that time, or perhaps I never really knew how to go about looking out any other ways. Of course, now being on WordPress it’s all different and I do have top commentator one, which I think is a great way for showcasing your top commenters and making them feel good about what they do.

    Thanks for sharing. Have a nice week ahead 🙂

    1. Hello Harleena,
      Blogger has change a lot especially when there are lots of html experts online now. Blogger can be as exactly as you want it to be because they made it that flexible for we that has little knowledge of coding :).
      Thank you so much for sharing your experience with us. Do have a wonderful weekend start and a nice trip plan :).

  3. Nice tutorial Dear @BabaNature
    here your given script is reallt Good and stlylis.

    but dear i wants your help.. how to start blog commenting by Gravatar on Blogger Blog.
    And this tutorial will work good . please help me to provide it.

    1. Glad you liked the post, Siddharth.
      The thing is, I wouldn’t say it’s totally impossible. But what i’ll tell you is, somebody somewhere might be working on it 😉

      Thanks for the comment and do have a wonderful weekend ahead…

    1. Hello Ologundudu,
      I am sure that this one is going to look more sexy and attractive for your blog 🙂

      Thanks for the comment and do have a lovely weekend start…

    1. Hello Adithya,
      It’s good to know that you have already had it on your blog. It feels great doesn’t it?
      Thanks for sstopping by and droping your comment. do have a wonderful weekend start 🙂

  4. Man ..you’ve been rolling out some awesome blogger tutorials (like the one you shared today) . Your useful tutorials makes the blogger platform look good . If i start receiving many comments on my blogger platform blog , I’ll add the code to the template . Thanks for sharing the tutorial Baba !

    -Pramod

  5. Hey Babanature,
    This is one great post man.
    I have used blogger platform extensively before moving on to WordPress. But recently I started a blog on Blogger and your post might help me a lot.
    I think blogger is slowly becoming like WordPress in terms of features.
    What do you say?

    1. Hello Arbaz,
      Wordpress platform is still on matchable… But i know with time, blogger might be up to WordPress (Resource wise). Blogger for me, is cool to host your niche sites 🙂
      And as you say; blogger is slowly meeting up to wordpress standard.
      Thanks for stopping by and dropping your thought with us. Do have a blessed weekend

  6. Hello,

    Nice post! it was really detailed and informative. The top blog commentator is really useful widget for blogger blog. I think we can find this widget without coding. However it is simple just copy and paste thats it.

    thanks

    1. Hello Tushar,
      Really!!! Never thought of that. I;ve not seen such gadget in blogger gadget store, but thanks for drawing our attention to that place…

      Thanks for the comment and d have a wonderful weekend ahead…

  7. Wow, that’s a lot of code (By the way, doesn’t Blogger have a in-built top commentators widget? Maybe not. My memory might be playing tricks one me).

    And, does Blogger support Gravatar? (It has been so long since I used Blogger..so I don’t remember whether Blogger did). Plus, I mostly used third party commenting systems – Disqus, Intense Debate that had their own top commentators widget 🙂

    Anyways, I appreciate the share, Babanature 🙂

    Have a wonderful weekend!

  8. Hello Jeevan,
    Yeah, bloggers has top commentator widget but it does not come with gravatar enabled. But this code set it all up for you :).
    I say gravatar, i don’t mean the wordpress gravatar :). blogger blog also has gravatar for blogger blog users…
    There is no better commenting system then the good old native commenting system…
    Thanks for your wonderful comment buddy. Do have a great weekend ahead…

    1. Hello Enstine,
      You know, wordress made everything so easy and flexible but on blogger, you have to code almost everything yourself.
      Thanks for stopping by and do have a wonderful weekend

  9. Hello Babanature,
    this is indeed a nice tutorial. yea blogger blog do have a top commentator gadget but does not come with gravatar.
    thanks for the post. have a good weekend over there…

  10. Hi Babanature,
    Great Post and nice tutorial. Thanks for showing the detail coding. It will be now easy for all we bloggers and at the same time so very helpful to everyone.

  11. Hey Babanature
    That is one big piece of code. I guess it might be scaring a lot of non-tech people away :> but nice of you to share it with us.
    I do not need it myself as a wordpress guy, but if I did, it would sure help alot
    have a great day
    ashley

  12. Hi Babanature,

    I am a very recent reader of your blog and I must say that your content is awesome. The fact that you have generated such a big reader’s base is really motivating. Being a WordPress user, your current article may not be of much use for me but I must say that it will surely helps all the bloggers out there. One thing I would like to suggest : You should use screenshots in your blog posts to make them more interesting and informative. That will be a huge booster in my opinion.

    1. Hello William,
      Thanks for the complementing words, it was sure appreciated :).
      On using screen shot, i do use screen shots on all my tutorials except the once that don’t need screen shots. If you want to learn how to implement it, you can watch the video here http://www.youtube.com/watch?v=t__ryWtyLxA
      You can also check out my latest post, that will be very much useful to you…
      Thanks for the comment and do have a wonderful week ahead…

Leave a Reply to Jijin Mohan Cancel reply

Your email address will not be published. Required fields are marked *