Comentários Recentes na Barra Lateral Agora com avatares

Publiquei este artigo no Mocheco⊗Marafado em Janeiro de 2012, depois de pedir autorização ao autor do script para fazer uma tradução do mesmo para Português.
Era um script que além de permitir colocar os comentários mais recentes na barra lateral do Blogger, ainda tinha a opção de apresentar o avatar de quem comentara junto com o nome...

Isso na altura era uma novidade que eu quis partilhar com os meus visitantes, especialmente com aqueles que poderiam aproveitar uma versão em Português. :)

NOTA: O texto seguinte está praticamente como o escrevi há cerca de 10 anos...

---

Tentei actualizar este artigo onde necessário, mas resolvi mexer o menos possivel para não estragar o sentido de alguns dos comentários deixados então e que restaurei neste artigo... e também para recordar/mostrar alguma da confusão que alguns bloguistas enfrentaram quando o Blogger faz algumas sérias modificações na plataforma alguns anos atrás.

Estes últimos dias tem sido uma loucura brincando com os códigos do novo sistema de comentários do Blogger, pelo meio criei um novo template mas depois o Blogger editou o código base da plataforma (suponho que para corrigir alguns bugs entretanto descobertos), e isso estragou toda a personalização que tinha feito e tive que refazer tudo. ~X

Mas, e como mesmo quando as coisas não correm bem há sempre alguma coisa boa no meio, ao procurar soluções para os problemas que tive para corrigir certas coisas, aconteceu de descobrir um excelente blogue de tutoriais e dicas para o Blogger onde vi algo que já tinha tentado fazer sem sucesso: Um gadget com os comentários mais recentes na barra lateral. :D

Sim. Existem milhares desses gadgets por essa blogosfera fora, cada um com uma maneira diferente de mostrar os comentários recentes... mas o que me chamou a atenção neste gadget foi que além dos comentários recentes com a ligação para o comentário em si e o nome de quem deixou o dito comentário, também mostra o avatar de quem comentou com a ligação para o perfil (se disponível).

O blogue é Yet Another Blogger Tips Blog (que recomendo seguir para se manterem actualizados sobre esta e outras dicas publicadas por lá ;) ) e onde podem encontrar o tutorial sobre como colocar o gadget dos comentários recentes com avatar da autoria do MS-potilas.

Podem ver o elemento a funcionar aqui neste blogue na barra lateral (Com um estilo bem diferente do apresentado na imagem deste artigo de 2012), ou no Quadradinhos INk, onde também o instalei.

Claro que fiz algumas modificações no estilo CSS para se adaptar ao meu blogue, mas basicamente não é necessário modificar muita coisa.
Da maneira como está o código, basta copiar e colocar num novo elemento HTML/JavaScript na barra lateral.

Abaixo podem ver o código já traduzido e com os estilos CSS que utilizo[utilizava em 2012] aqui neste blogue:

Ver Código

<style type="text/css">
.recent-comment {/* ---- Cada um dos comentários ---- */ 
  margin-bottom:5px;
  background: rgba(0,0,0,0.5);
  padding: 5px 5px 5px 25px;
  border: 1px inset #4be;
  border-radius: 10px; 
}
.recent-comment a:hover {/* ---- Os links presentes em cada um dos comentários ao passar o rato por cima ---- */ 
  text-decoration:none; 
}
.recent-comment:hover {/* ---- Cada um dos comentários ao passar o rato por cima ---- */
  background: rgba(0,0,0,0.8);
  border: 1px outset #4be;
  box-shadow: 0 0 5px #abc, inset 0 0 5px #fff;
}
.recent-comment-admin {/* ---- Estilos para os comentários do autor do blogue ---- */ 
  background: #fff; 
}
.recent-comment-ico {/* ---- Estilos para os avatares ---- */ 
  margin: 4px 0 -30px 5px;
  display:block;
  position:absolute;
}
.recent-comment-header {/* ---- Estilos para a parte que engloba os avatares e o nome do comentador ---- */
  height: 24px;
  overflow: hidden;
  margin-left: 10px;
  font-variant: small-caps;
  font-size: 98%;
}
.recent-comment-header a {/* ---- Estilos para o link com o nome do comentador ---- */ 
  color: #fc4;
  line-height:220%;
}
.recent-comment-header a:hover {/* ---- Estilos para o link com o nome do comentador ao passar o rato por cima ---- */ 
  color: #de6;
}
.recent-comment-body {/* ---- Estilos para o comentário em si ---- */
  padding-right: 4px; 
  font-size: 95%;
  border-top: 1px dashed #888;
  margin:3px;
}
.recent-comment-footer {/* ---- Estilos para o link Ler Mais (localização) ---- */  
  font-size: 85%;
  float:right;
  margin-right:10px;
}
.recent-comment-footer a{/* ---- Estilos para o link Ler Mais ---- */
  background: #4be;
  color: #000;
  padding:0px 3px;
  border: 1px ridge #ff0; 
  border-radius: 10px;
  opacity:0.5;
}
.recent-comment-footer a:hover{/* ---- Estilos para o link Ler Mais ao passar o rato em cima ---- */
  color: #00f;
  padding:1px 5px;
  border: 1px outset #ff0;
  opacity:1;
}
</style>

E a parte javascript:

<script type="text/javascript">
// Recent Comments blogger gadget by MS-potilas 2011, using feed avatars
// see http://yabtb.blogspot.com/2011/12/son-of-better-recent-comments-gadget.html
//
// CONFIGURAÇÕES:
var numRecentComments = 10; //numero de comentários a mostrar no elemento
var numPerPost = 0; // max de comentários que o script lê por artigo (0 para lêr todos em cada artigo)
var maxCommentChars = 90; //numero de caracteres a mostrar no corpo do comentário
var maxPostTitleChars = 0; // numero de caracteres a mostrar no titulo do comentário (o nome do comentador), usar 0 para mostar o nome completo
 
var txtWrote = 'disse:'; //o texto a seguir ao nome de quem comenta
var txtMore = 'Ler Mais >>'; // o texto do link para o comentário 
var txtTooltip = '[user] em &quot;[title]&quot; - [date MM/dd/yyyy hh:mm]';
var txtAnonymous = 'Anónimo'; // deixar só ' ' ou colocar o como desejar que apareça quando existem comentários feitos por Anónimos
// Variables [xxx] in texts:
// supports [title], [user], [date], [time], [datetime], [date format]
// format supports: yyyy=long year, yy=short year, MM=month(01-12), dd=monthday, hh=hour, mm=min, ss=sec (formatos de data suportados pelo script, recomendo não mexer neste parte)
 
var getTitles = true;   // se colocar false, o script carrega mais rapido mas não mostra o nome do comentador
var trueAvatars = true; // se colocar false, o script carrega mais rapido mas não mostra o avatar
var urlMyAvatar = '';   // se deixar como está, o avatar do autor será o mesmo do perfil ou pode colocar um link para um avatar à escolha
var urlMyProfile = '';  // colocar o link do perfil do autor do blogue caso não tenha no blogue o elemento Perfil e queira dar estilo diferente aos comentários do autor
//
var cropAvatar = true; // mudar para false se não desejar que o avatar apareça quadrado (recomendo deixar true)
var sizeAvatar = 24; // tamanho em pixels do avatar
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5b6Rzno8zmUWW9_5dkcjQTbSM6eiXY8Kroc4bddrfots190bLKCc01nSP7j-qWxPXQoSTgolu8orlTxtnwU8LJ5kTEcG4oDHUGOihuoAZVNFEfnqFe-ws-qpQIViLflTZRVI4cKB9v0/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable (avatar por defeito quando não existe avatar e aparece o icone do blogger. se alterar, colocar /s"+sizeAvatar+"/ tal como demonstrado acima para que script altere o tamanho automaticamente conforme o tamanho que colocamos em var sizeAvatar)
//
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar; // se o comentador é anónimo ou comenta com nome/url (alterar para ficar como em var urlNoAvatar se quiserem colocar um avatar personalizado, mas em vez de "url" colocar 'url')
var maxResultsPosts = "";       // or for example "&max-results=100" (recomendo não alterar)
var maxResultsComments = "";    // or for example "&max-results=300" (recomendo não alterar)
// FIM DA CONFIGURAÇÃO
var urlToTitle = {};
function replaceVars(text, user, title, date) {
  text = text.replace('[user]', user);
  text = text.replace('[date]', date.toLocaleDateString());
  text = text.replace('[datetime]', date.toLocaleString());
  text = text.replace('[time]', date.toLocaleTimeString());
  text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
  var i = text.indexOf("[date ");
  if(i > -1) {
    var format = /\[date\s+(.+?)\]/.exec(text)[1];
    if(format != '') {
      var txtDate = format.replace(/yyyy/i, date.getFullYear());
      txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
      txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
      txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
      txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
      txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
      txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
      text = text.replace(/\[date\s+(.+?)\]/, txtDate)
    }
  }
  return text;
}
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;
    }
}
function getPostUrlsForComments(json) {
  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    for (var k = 0; k < entry.link.length; k++ ) {
      if (entry.link[k].rel == 'alternate') {
        href = entry.link[k].href;
        break;
      }
    }
    urlToTitle[href] = entry.title.$t;
  }
}
function showRecentComments(json) {
  var postHandled = {};
  var j = 0;
  if(numPerPost) {
    while(numPerPost < numRecentComments) {
      for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i];
        if(entry["thr$in-reply-to"]) {
          if(!postHandled[entry["thr$in-reply-to"].href])
              postHandled[entry["thr$in-reply-to"].href] = 1;
          else
              postHandled[entry["thr$in-reply-to"].href]++;
          if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
            j++;
        }
      }
      if(j >= numRecentComments)
        break;
      numPerPost++;
      j = 0;
      postHandled = {};
    }
    if(numRecentComments == numPerPost)
       numPerPost = 0;
  }
  postHandled = {};
  j = 0;
  for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
      continue;
    if(entry["thr$in-reply-to"]) {
      if(!postHandled[entry["thr$in-reply-to"].href])
          postHandled[entry["thr$in-reply-to"].href] = 1;
      else
          postHandled[entry["thr$in-reply-to"].href]++;
      j++;
      var href='';
      for (var k = 0; k < entry.link.length; k++ ) {
        if (entry.link[k].rel == 'alternate') {
          href = entry.link[k].href;
          break;
        }
      }
      if(href=='') {j--; continue; }
      var hrefPost = href.split("?")[0];
      var comment = "";
      if("content" in entry) comment = entry.content.$t;
      else                   comment = entry.summary.$t;
      comment = comment.replace(/<br[^>]*>/ig, " ");
      comment = comment.replace(/<\S[^>]*>/g, "");
      var postTitle="";
      if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
      else {
        postTitle = hrefPost.split("/")[5].split(".html")[0].replace(/_\d{2}$/, "");
        postTitle = postTitle.replace(/-/g," ");
        postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
      }
      if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
        postTitle = postTitle.substring(0, maxPostTitleChars);
        var indexBreak = postTitle.lastIndexOf(" ");
        postTitle = postTitle.substring(0, indexBreak) + "...";
      }
 
      var authorName = entry.author[0].name.$t;
      var authorUri = "";
      if(entry.author[0].uri && entry.author[0].uri.$t != "")
        authorUri = entry.author[0].uri.$t;
   
      var avaimg = urlAnoAvatar;
      var bloggerprofile = "https://www.blogger.com/profile/";
      if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
        avaimg = entry.author[0].gd$image.src;
      else {
        var parseurl = document.createElement('a');
        if(authorUri != "") {
          parseurl.href = authorUri;
          avaimg = 'https://www.google.com/s2/favicons?domain=' + parseurl.hostname;
        }
      }
      if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
        avaimg = urlMyAvatar;
      if(avaimg == "https://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+"/");
      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>';
      var clsAdmin = "";
      if(urlMyProfile != "" && authorUri == urlMyProfile)
          clsAdmin = " recent-comment-admin";
      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]);
 
      var txtHeader = txtWrote;
      if(txtWrote.indexOf('[')==-1)
        txtHeader = authorName + ' ' + txtWrote;
      else
        txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);
 
      var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
 
      document.write('<div title="'+tooltip+'" class="recent-comment'+clsAdmin+'">');
      document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"><div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
      if(comment.length < maxCommentChars)
        document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '</div>');
      else {
        comment = comment.substring(0, maxCommentChars);
        var indexBreak = comment.lastIndexOf(" ");
        comment = comment.substring(0, indexBreak);
        document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '...</div>');
        if(txtMore != "") {
          var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
          document.write('<div title="'+tooltip+'" class="recent-comment-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
        }
      }
      document.write('<div style="clear:both;"></div></div>');
    }
  }
}
if(getTitles)
  document.write('<script type="text/javascript" src="https://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="https://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');</script>

Ocultar Código

E é isso...
Para colocar o gadget em português, basta copiar ambos os código acima e colar num novo elemento HTML/JavaScript na barra lateral.

Tentei deixar o código comentado para ser fácil de entender como personalizar e configurar.

Caso prefiram colocar a versão em inglês, sigam as indicações no artigo original.

Que acham? 8)

---

E... como estamos no mês do Natal... :santadance:

O Natal é daqui a

00 Dias

00 Horas

00 Minutos

00 Segundos

E por hoje é tudo. ;)

Até breve. :santatoast:

Osvaldo Correia

Aspirante a Artista Digital, Moderador no site Heromorph desde 2007, autor do extinto blogue de fotomontagens e Banda Desenhada Mocheco Marafado. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Apaixonado por BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, onde pretendo partilhar algumas das coisas que tenho aprendido na vida.
BloggerTwitterFacebookPinterestStackOverflowNexusModsContactoPaypal

Queres ler outro artigo ao calhas?