Blogger: Gadget "top comentarista" com avatar | Follow your dreams
Blogosfera

Blogger: Gadget “top comentarista” com avatar

Olá dreamers,
Eu já havia postado o tutorial ‘Gadget “top comentarista” para blogger‘, mas encontrei esse que mostra também os avatares dos comentaristas, então agora vocês tem duas opções. Para quem não sabe, esse gadget serve para mostrar os leitores que mais comentaram no seu blog. Eu prefiro esse com avatares, mas tem suas limitações, vou explicar melhor.

O que eu postei antes (sem avatares) mostra os maiores comentadores entre os últimos 2.000 comentários e esse só conta os últimos 500. Para quem tem muitos comentários o sem avatares é o ideal, mas caso você queira contar a partir de uma data, por exemplo, os mais comentadores do mês ou da semana, o com avatares é o único que te oferece essa opção.

Se você entendeu tudinho e escolheu o com avatares, já podemos começar a instalar.

♥ 1 – Entre nos Elementos de página do seu blog e clique em Adicionar Gadget. Escolha HTML/Java Script e cole o seguinte código:

<style type=”text/css”><!–.top-commenter-line {margin: 3px 0;} .top-commenter-avatar {vertical-align:middle;}
–></style><script type=”text/javascript”>// <![CDATA[
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See <a href=”http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html”>http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html</a>//
// CONFIG:
var maxTopCommenters = 5; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 0; // from how many days (ex. 30), or 0 from “all the time”
var excludeMe = true; // true: exclude my own comments
var excludeUsers = [“Anônimo”, “SEUNOME“]; // exclude these usernames
var maxUserNameLength = 60; // 0: don’t cut, >4: cut usernames
//
var txtTopLine = ‘<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = ‘No top commentators at this time.';
var txtAnonymous = ”; // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 16;
var cropAvatar = true;
//
var urlNoAvatar = “<a href=”http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s%22+sizeAvatar+%22/avatar_blue_m_96.png%22;”>http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s”+sizeAvatar+”/avatar_blue_m_96.png”;</a> //<a href=”http://www.blogger.com/img/avatar_blue_m_96.png”>http://www.blogger.com/img/avatar_blue_m_96.png</a> resizeable
var urlAnoAvatar = ‘<a href=”http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&#038;s=”>http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&#038;s='</a> + sizeAvatar;
var urlMyProfile = ”; // set if you have no profile gadget on page
var urlMyAvatar = ”; // can be empty (then it is fetched) or url to image
// config end
// for old IEs &#038; IE modes:
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 &#038;& author.uri.$t != “”)
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = “<a href=”http://www.blogger.com/profile/%22;”>http://www.blogger.com/profile/”;</a>if(author.gd$image &#038;& author.gd$image.src &#038;& authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement(‘a’);
if(authorUri != “”) {
parseurl.href = authorUri;
avaimg = ‘<a href=”http://www.google.com/s2/favicons?domain=”>http://www.google.com/s2/favicons?domain='</a> + parseurl.hostname;
}
}
if(urlMyProfile != “” &#038;& authorUri == urlMyProfile &#038;& urlMyAvatar != “”)
avaimg = urlMyAvatar;
if(avaimg == “<a href=”http://img2.blogblog.com/img/b16-rounded.gif%22″>http://img2.blogblog.com/img/b16-rounded.gif”</a> &#038;& 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’ &#038;& txtAnonymous != ” &#038;& avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = ‘<img class=”top-commenter-avatar” height=”‘+sizeAvatar+'” width=”‘+sizeAvatar+'” title=”‘+authorName+'” src=”‘+avaimg+'” />';
if(authorUri!=””) imgcode = ‘<a href=”‘+authorUri+'”>’+imgcode+'</a>';
if(maxUserNameLength > 3 &#038;& authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + “…”;
var authorcode = authorName;
if(authorUri!=””) authorcode = ‘<a class=”profile-name-link” 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;
}
}
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); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = “”;
if(entry.author[0].uri &#038;& entry.author[0].uri.$t != “”)
authorUri = entry.author[0].uri.$t;
if(excludeMe &#038;& authorUri != “” &#038;& 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.feed.entry.length == 200) {
ndxbase += 200;
document.write(‘<script type=”text/javascript” src=”<a alt=”json-in-script&#038;callback=showTopCommenters%22′” href=”http://%27+window.location.hostname+%27/feeds/comments/default?redirect=false&#038;max-results=200&#038;start-index=” ndxbase=””>http://’+window.location.hostname+’/feeds/comments/default?redirect=false&#038;max-results=200&#038;start-index=’+ndxbase+’&#038;alt=json-in-script&#038;callback=showTopCommenters”</a>></’+’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;
});
// list top topcommenters:
var realcount = 0;
for(var i = 0; i < maxTopCommenters &#038;& i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write(‘<di’+’v class=”top-commenter-line”>’);
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write(‘</d’+’iv>’);
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write(‘<script type=”text/javascript” src=”<a href=”http://%27+window.location.hostname+%27/feeds/comments/default?redirect=false&#038;max-results=200&#038;alt=json-in-script&#038;callback=showTopCommenters%22″>http://’+window.location.hostname+’/feeds/comments/default?redirect=false&#038;max-results=200&#038;alt=json-in-script&#038;callback=showTopCommenters”</a>></’+’script>’);
// ]]></script>

 

♥ 2 – No início do código, na parte de CONFIG, você vai configurar o seu gadget:
– O número que está em VERMELHO é a quantidade de nomes dos comentaristas que aparecerão na página.
– O que está em VERDE é a quantidade de dias que o gadget contará, por exemplo, se você quiser “Top comentarista do mês” deverá colocar o número 30, de 30 dias (atenção, coloque apenas o NÚMERO, não escreva a palavra “dias”). Se você preferir contar todos os últimos 500 comentários, deixe como 0 mesmo.
– O que está em AZUL são os comentadores que não serão contados, recomendo que você coloque o seu nome (atenção: coloque o nome da sua conta no blogger que aparece quando você comenta).

 

♥ 3 – Agora é só salvar e pronto!

Se não der certo comente, posso tentar ajudar.
xoxo e até a próxima! ;)
– Esse gadget foi criado por um programador finlandês aposentado que tem a doença esclerose múltipla. O blog dele é esse: http://yabtb.blogspot.com.br/, está todo em inglês, mas visitar e comentar é o mínimo que você pode fazer para retribuir. –

Tags : Blogger

34 Comentários

  1. Adorei a dica, até já coloquei lá no meu blog, lá no final, depois passa lá pra olhar se eu botei direitinho, uahuhauhau.
    Obrigada pela dica!
    Beijo

    1. Oi Cléo, você substituiu o número 0 que está na cor VERDE? Se deixar 0 ele vai contar os últimos 500 dias mesmo, você deve modificar esse número para a quantidade de dias que deseja contar, ex: 30 (conta 30 dias).

      Bjs

  2. Oiiiiiiiii!!!
    Achei seu blog lindo demais e cheio de informações incríveis.
    Compiei o código mas não deu certo,quando possível queria tua ajuda.
    Bj e acabou de ganhar uma fã!

    Andri

  3. Ei Karol, eu acabei de colocar no meu blog, mas ainda não está aparecendo nada. É assim mesmo. Começa a contar a partir de agora?? Obrigada e parabéns pelo post! Beijos!

Deixe uma resposta