Widget dei commentatori più assidui di Blogger

Come installare il widget dei Top Commentatori su Blogger che mostrerà l'elenco dei commentatori recenti più assidui con nome, avatar e numero dei commenti

La piattaforma Blogger ha avuto negli scorsi mesi diversi aggiornamenti che l'hanno resa più performante. Ricordo tra tutti la connessione HTTPS, anche per i domini personalizzati, e il file ads.txt aggiunto di default a tutti i blog su Blogger e reso personalizzabile.

Sono però state deprecate anche alcune funzionalità che erano poco usate dagli utenti, come l'utilizzo della identità OpenID e il widget con cui si potevano aggiungere dei sondaggi. La risorsa più importante che è stata ritirata è stata però quella di Google+ che non ha mai sfondato come social network.

Questa rinuncia ha costretto gli utenti della piattaforma ad abbandonare il profilo Google Plus, per passare o tornare a quello di Blogger.  Oltre al Profilo di G+, sono andati perduti tutti i commenti e le discussioni aperte in quella piattaforma, tutti i widget e i pulsanti di condivisione.

Il gadget dei Lettori Fissi continua a esistere ma da anni è stato ridimensionato e non vengono più supportati i siti non Blogger. Sulla piattaforma di Google si può ancora commentare come Anonimi oppure loggarci con un account Google e commentare con quello. Alcuni siti, come questo, non consentono i commenti anonimi.

Può essere una buona idea per incentivare i commentatori quella di installare un gadget che mostri i commentatori più attivi ovvero quello che comunemente viene chiamato il Widget dei Top Commentatori.

Fino a qualche anno fa era possibile mostrare questo widget utilizzando il servizio Yahoo Pipes che però è stato ritirato da tempo. È stato però creato uno script che è in grado di mostrare un elenco dei commentatori più attivi con il numero dei commenti accanto al loro nome e all'avatar del profilo.

Si può impostare il numero di commenti da prendere in considerazione che saranno sempre i più recenti.

Il codice che vado a presentare permetterà di escludere il nome dell'autore del blog e eventualmente quello di altri commentatori troppo assidui e tali da offuscare gli altri.

La sua installazione è semplicissima e si effettua senza modificare il Tema ma solo installando un widget HTML / Javascript. La rilevazione dei commentatori avviene tramite gli URL dei Feed dei commenti. Non sono riuscito a comprendere perché per alcuni utenti non viene mostrato correttamente l'avatar del profilo.

Si va su Bacheca -> Layout -> Aggiungi gadget -> HTML/Javascript. Si digita un Titolo per il widget quindi, in Sezioni del sito, si incolla il codice seguente per poi andare su Salva.

<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"];   // Per 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 tra virgolette
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 = "https://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 = 'https://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="https://www.ideepercomputeredinternet.com/feeds/comments/default?redirect=false&max-results=150&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('<script type="text/javascript" src="https://www.ideepercomputeredinternet.com/feeds/comments/default?redirect=false&max-results=150&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Si posiziona il widget in una sidebar per poi andare su Salva disposizione.

Le personalizzazioni più rilevanti per il widget dei Top Commentatori sono le seguenti:

1. I commenti colorati di verde mostrano a cosa servono i parametri e possono essere tralasciati
2. DimAvatar serve per impostare la dimensione delle miniature dei profili
3. L'avatar di default ha questo URL
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibNXdO3uqcw1_V5lRTzO8gEifToLM0GzE4kEkT8BX4iAz_b4DNJPQUe4wZTaT_E9kXPgB033tqy8vrl00gRNKFQC6pPI06cuCeYJKcjpvvz6FOwKjV1Z4pC9pieCcyfkc_oFzxmDGWeG0/32/avatar2.png
   dove il 32 è l'impostazioni di DimAvatar e può essere personalizzata.
4. Sono considerati solo gli ultimi 200 commenti come limite massimo. Però si può scegliere di conteggiare soltanto gli ultimi 150 commenti, come nel codice proposto. Per cambiare tale numero occorre modificarlo in entrambe le occorrenze subito dopo gli URL dei feed
5. Nello screenshot di esempio sono mostrati i Top Commentatori per gli ultimi 100 e 150 commenti.
6. Va ovviamente sostituito l'URL di questo sito con quello del vostro blog nelle due occorrenze.
7. Si mette il nome del profilo al posto di Ernesto Tirinnanzi per non visualizzarlo
8. In Escludi_Utenti si possono nascondere i commenti di altri commentatori. Ricordo che i nomi utente sono case sensitive e quindi che vanno inseriti con maiuscole, minuscole e spazi.

Ho provato a impostare un numero superiore a 200 dei commenti considerati ma il risultato è stato quello di una grande lentezza del widget nel caricarsi quindi sconsiglio di eccedere tale numero.