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?

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.