Widget dei Top Commentatori con Avatar per Blogger.

Widget dei Top Commentatori con Avatar per Blogger completamente personalizzabile.

Il widget degli utenti che commentano più frequentemente nel blog è uno di quelli che ha avuto il maggiore successo e che è stato installato su molti siti. Si basa sull'utilizzo dei Pipes di Yahoo e forse questo ha reso la sua implementazione un po' troppo difficoltosa. Vado adesso a presentare un altra versione di questo widget che ha la particolarità di essere molto più semplice da installare e di mostrare anche gli avatar dei commentatori più assidui.

Non occorre modificare il modello ma basta incollare il codice in un elemento pagina partendo da Layout. Vengono conteggiati solo gli ultimi 200 commenti e si può anche scegliere un determinato lasso di tempo da prendere in considerazione. I commentatori che non hanno avatar o che commentano come anonimi avranno la loro immagine di default che potrà essere personalizzata- E' anche possibile settare il numero dei commentatori da visualizzare e l'aspetto del gadget sarà il seguente

Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<style type="text/css">
.top-commentatori-line {margin: 4px 1px;}
.top-commentatori-line .profile-name-link {padding-left:1px;}
.top-commentatori-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
var Num_Commentatori = 12;   //Numero di commentatori
var Min_Commenti = 1;        // Numero minimo di commenti
var Num_Giorni = 0;            // Commenti per numero di giorni (es. 30), 0 per tutti
var Escludimi = true;       // true: per escludere i nostri commenti altrimenti false
var Escludi_Utenti = ["Anonymous", "parsifal32"];     // Escludere nomi di commentatori
var Mass_Lung_Username = 30; // Non taglia gli username da 0 a 4 caratteri
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var TestoNoCommenti = 'Non ci sono ancora Top Commentatori.';
var Sost_Anonymous = '';      // lasciarlo vuoto o mettere Anonimo
var DimAvatar = 32; // dimensioni avatar
var RitAvatar = true; // ritaglio avatar altrimenti false altrimenti false
var Avatar_Default = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibNXdO3uqcw1_V5lRTzO8gEifToLM0GzE4kEkT8BX4iAz_b4DNJPQUe4wZTaT_E9kXPgB033tqy8vrl00gRNKFQC6pPI06cuCeYJKcjpvvz6FOwKjV1Z4pC9pieCcyfkc_oFzxmDGWeG0/"+DimAvatar+"/avatar2.png";
var urlAnoAvatar = 'http://www.gravatar.com/avatar/c45bf4a36d768827e07fdb10d0d24f9d=mm&s=' + DimAvatar;
var URLProfilo = ''; // Lascia vuoto o metti URL del profilo
var URL_Avatar = '';  // Lascia vuoto o URL immagine
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(URLProfilo != "" && authorUri == URLProfilo && URL_Avatar != "")
    avaimg = URL_Avatar;
  if(avaimg == "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcEbPcqPemTMtoG7TCPCm6AMP34lohS2z7WjDIqvfCdprhdCoWNYDc-HJy6gPTgC1SNM5imZ8-kPlJvSuvMeNkvkkuVArHbddz02BaQTzqDKwygEoJgNzodKGP1788LNuQ0CKedNv5fvM_/s16/blogger-immagine.gif" && Avatar_Default != "")
    avaimg = Avatar_Default;
  var newsize="s"+DimAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(RitAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && Sost_Anonymous != '' && avaimg == urlAnoAvatar)
    authorName = Sost_Anonymous;
  var imgcode = '<img class="top-commentatori-avatar" height="'+DimAvatar+'" width="'+DimAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(Mass_Lung_Username > 3 && authorName.length > Mass_Lung_Username)
    authorName = authorName.substr(0, Mass_Lung_Username-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(URLProfilo == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        URLProfilo = 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(entry.author[0].name.$t=="Ernesto Tirinnanzi") continue;
    if(Num_Giorni > 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]);
      //Per calcolare la differenza tra due date e convertirla in giorni
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > Num_Giorni) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(Escludimi && authorUri != "" && authorUri == URLProfilo)
      continue;
    var authorName = entry.author[0].name.$t;
    if(Escludi_Utenti.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="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
  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 < Num_Commentatori && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < Min_Commenti)
        break;
    document.write('<di'+'v class="top-commentatori-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(TestoNoCommenti);
document.write('<div id="crlink" style="font-size:70%;text-align:center"><p><a href="http://goo.gl/xdG4K" target="_blank">Get widget</a></div>');
}
document.write('<script type="text/javascript" src="http://www.ideepercomputeredinternet.com/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Si clicca su Salva e si posiziona in una sidebar. Le personalizzazioni più importanti sono state colorate di rosso. Dovrà essere inserito l'URL del vostro sito al posto di quello di questo blog. Per modificare l'URL dell'avatar di default ricordate che questa immagine
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibNXdO3uqcw1_V5lRTzO8gEifToLM0GzE4kEkT8BX4iAz_b4DNJPQUe4wZTaT_E9kXPgB033tqy8vrl00gRNKFQC6pPI06cuCeYJKcjpvvz6FOwKjV1Z4pC9pieCcyfkc_oFzxmDGWeG0/s80/avatar2.png
è stata inserita in questo modo
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibNXdO3uqcw1_V5lRTzO8gEifToLM0GzE4kEkT8BX4iAz_b4DNJPQUe4wZTaT_E9kXPgB033tqy8vrl00gRNKFQC6pPI06cuCeYJKcjpvvz6FOwKjV1Z4pC9pieCcyfkc_oFzxmDGWeG0/s"+DimAvatar+"/avatar2.pngper poterla ridimensionare. Un discorso analogo va fatto per l'immagine Gravatarhttp://www.gravatar.com/avatar/c45bf4a36d768827e07fdb10d0d24f9d.png

Alla fine del gadget sarà presente un link che rimanda a questo post per facilitare l'installazione del widget. Se non lo volete visualizzare andate su Modello > Modifica HTML > Procedi e subito sopra alla riga ]]></b:skin> incollate il seguente codice #crlink {display:none;} .

Aggiornamento: Se ci fossero problemi di funzionamento nella terz'ultima riga del codice sostituite questa espressione
src="http://'+window.location.hostname+'/feeds/comments/default
al posto dell'URL del vostro blog.
Fonte | YABTB -