Come installare il widget dei Top Commentatori su Blogger.

Come installare il gadget dei Top Commentatori e Commentatori più assidui su Blogger senza modificare il template.

I siti Wordpress hanno dei plugin che permettono l'installazione di un widget che mostra i commentatori più assidui del sito. Un gadget di questo genere ha la motivazione di invogliare i lettori a commentare specie se sono dei colleghi blogger per poter entrare nella lista dei commentatori più fecondi e avere quindi una visibilità e un link verso il sito o il profilo.

Anche su Blogger furono messi a punto dei widget che mostravano i Top Commentatori che erano basati sullo strumento degli Yahoo Pipes che però adesso è stato ritirato viste le difficoltà economiche della casa madre. Il widget che mi accingo a illustrare è invece assolutamente indipendente da risorse esterne e può essere addirittura installato senza modificare il template. Oltre all'elenco dei commentatori più assidui verranno mostrati gli avatar del profilo, il nome utente e un link al Profilo di Blogger che però aprirà quello di Google+ se i due Profili sono stati unificati. Accanto all'username si visualizzeranno tra parentesi anche il numero di commenti che sono stati pubblicati.

Per non appesantire troppo lo script vengono presi in considerazione solo gli ultimi 200 commenti con l'opzione di sceglierne un numero diverso. I commentatori anonimi, se sono consentiti questi commenti, e i commentatori senza avatar avranno un avatar di default che potrà essere personalizzato. Si possono anche configurare il numero dei Top commentatori da visualizzare.

Per la installazione si va su Layout > Aggiungi un gadget > Base > HTML/Javascript, si digita opzionalmente un titolo e , in Sezioni del Sito, si incolla questo 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 sostituire true con 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 salva e si posiziona nella sidebar con il drag & drop del cursore per poi andare su Salva disposizione. Le personalizzazioni più importanti sono le seguenti:

1. I commenti colorati di verde servono per illustrare i vari parametri e possono essere tralasciati
2. Si sostituisce l'URL di questo blog con quello del vostro sito. Alternativamente se il widget serve per mostrare i commentatori del sito in cui è installato si può sostituire http://www.ideepercomputeredinternet.com/feeds/comments/default con
   http://'+window.location.hostname+'/feeds/comments/default
3. 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/"+DimAvatar+"/avatar2.pngUn discorso simile va fatto anche per l'URL
   http://www.gravatar.com/avatar/c45bf4a36d768827e07fdb10d0d24f9d=mm&s=' + DimAvatar con cui settare la dimensione nella riga var DimAvatar = 32
4. Si possono sostituire nel codice tutte le occorrenze di 200 per prendere considerazione un numero diverso di ultimi commenti.
5. Sostituire Ernesto Tirinnanzi con l'username con cui vengono visualizzati i vostri commenti e escludere eventuali utenti nella riga var Escludi_Utenti separando i nick con una virgola e ricordando che vanno mantenuti gli spazi se gli username sono formati da due o più parole e che si tratta di un parametro case sensitive in cui le Maiuscole sono diverse dalla minuscole.

Ho postato in un blog di test una dimostrazione di questo interessante widget

Demo
Clicca qui

Post aggiornato Widget Top Commentatori per Blogger