Tạo xếp hạng bình luận cho Blogger/Blogspot

Giới thiệu

Tạo xếp hạng bình luận cho Blogger/Blogspot (Top Commentators Widget) là một widget xếp hạng theo thứ tự bình luận của từng user. Qua widget này thì các user có thể biết các bình luận của họ và được xếp hạng như thế nào.

Nên nay mình sẽ chia sẻ cách làm xếp hạng bình luận cho Blogger/Blogspot

Ngoài ra có thể tham khảo thêm:

Hướng dẫn

Bước 1: Đăng nhập vào Blogger -> Bố cục -> Thêm tiện ích -> HTML/Javascript. Rồi thêm đoạn code sau

 &lt;style type="text/css"&gt;
.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;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
var maxTopCommenters = 8; 
var minComments = 1;     
var numDays = 0;         
var excludeMe = true;    
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; 
var maxUserNameLength = 42;
//
var txtTopLine = '&lt;b&gt;[#].&lt;/b&gt; [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "//2.bp.blogspot.com/-pWdg8wLsedo/UmVWQxLdwrI/AAAAAAAAEVk/-z7YgKykkuU/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = '//1.bp.blogspot.com/-6B6DXCp8dek/UmVPm7D2mOI/AAAAAAAAEVU/Xz-3z2nRpUk/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i&lt;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 &amp;&amp; author.uri.$t != "")
    authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image &amp;&amp; author.gd$image.src &amp;&amp; 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 != "" &amp;&amp; authorUri == urlMyProfile &amp;&amp; urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "//img2.blogblog.com/img/b16-rounded.gif" &amp;&amp; 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' &amp;&amp; txtAnonymous != '' &amp;&amp; avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '&lt;img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" /&gt;';
  if(authorUri!="") imgcode = '&lt;a href="'+authorUri+'"&gt;'+imgcode+'&lt;/a&gt;';
  if(maxUserNameLength &gt; 3 &amp;&amp; authorName.length &gt; maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '&lt;a class="commenter-link-name" href="'+authorUri+'"&gt;'+authorcode+'&lt;/a&gt;';
  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&lt;elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
  if(json &amp;&amp; json.feed &amp;&amp; json.feed.entry &amp;&amp; json.feed.entry.length) for(var i = 0 ; i &lt; json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays &gt; 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 &gt; numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri &amp;&amp; entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe &amp;&amp; authorUri != "" &amp;&amp; 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 &amp;&amp; json.feed &amp;&amp; json.feed.entry &amp;&amp; json.feed.entry.length &amp;&amp; json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('&lt;script type="text/javascript" src="//'+window.location.hostname+'/feeds/comments/default?redirect=false&amp;max-results=200&amp;start-index='+ndxbase+'&amp;alt=json-in-script&amp;callback=showTopCommenters"&gt;&lt;/'+'script&gt;');
    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() &lt; b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
  var realcount = 0;
  for(var i = 0; i &lt; maxTopCommenters &amp;&amp; i &lt; tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count &lt; minComments)
        break;
    document.write('&lt;di'+'v class="top-commentators"&gt;');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('&lt;/d'+'iv&gt;');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('&lt;script type="text/javascript" src="//'+window.location.hostname+'/feeds/comments/default?redirect=false&amp;max-results=200&amp;alt=json-in-script&amp;callback=showTopCommenters"&gt;&lt;/'+'script&gt;');
&lt;/script&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

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

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 = "//2.bp.blogspot.com/-pWdg8wLsedo/UmVWQxLdwrI/AAAAAAAAEVk/-z7YgKykkuU/s1600/avatar_blue_m_96.png" + sizeAvatar;

var urlAnoAvatar = '//1.bp.blogspot.com/-6B6DXCp8dek/UmVPm7D2mOI/AAAAAAAAEVU/Xz-3z2nRpUk/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 == "//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="//'+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="//'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');

</script>