Pubblicato il 01/05/15 - aggiornato il  | 8 commenti :

Come installare il widget dei Top Commentatori con Avatar per Blogger.

Come installare su Blogger il widget dei Top Commentatori con avatar perfsonale e con link al loro Profilo su Blogger o su Google+.
Tra i lettori del blog ci sono quelli che consultano i contenuti ma che non interagiscono mai e poi ci sono altri che invece commentano assiduamente i nostri post. I commenti come ho già avuto modo di specificare più volte rappresentano sempre un arricchimento per l'articolo in cui vengono pubblicati. Inoltre se un vecchio post continua a ricevere commenti significa che è ancora attuale e questo fa in modo che anche i motori di ricerca lo classifichino come tale lasciandolo per più tempo ben posizionato nei risultati delle ricerche. 

Per gratificare i commentatori più assidui su Wordpress ci sono appositi plugin mentre per Blogger sono state trovate alcune soluzioni interessanti. Ricordo per esempio il gadget che mostra gli username dei Top Commentatori in una nuvola con le dimensioni del nome in proporzione al numero dei commenti.

In questo post vado a illustrare un widget che oltre al nome mostri anche l'avatar del commentatore insieme al link verso il suo profilo di Blogger che naturalmente avrà il redirect verso quello di Google+ nel caso si fossero unificati. Sono possibili diverse personalizzazioni che vedremo in seguito. Non c'è da modificare il modello e non occorre configurare un Pipe di Yahoo.

top-commentatori

Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e 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 = 8;   //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
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://lh6.googleusercontent.com/-1W5J_soMWEE/UTRzoKVNM2I/AAAAAAAAgqg/8CVSZxI855c/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('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Si salva e si posiziona nella sidebar. Le personalizzazioni più importanti riguardano:
  1. Il numero di commentatori da mostrare
  2. Il numero minimo di commenti per ogni singolo commentatore
  3. Impostare l'intervallo di tempo in giorni per considerare i commenti. Se per esempio si mette 50 verranno presi in considerazione i commenti degli ultimi 50 giorni. Nel caso si vogliano considerare tutti i commenti si digita 0 in questo campo come messo di default
  4. Nella penultima riga e non solo è impostato 200 come numero di elementi dei feed e quindi di commenti da prendere in considerazione. Quindi si può impostare il gadget sia per periodo di tempo sia per numero di commenti da considerare.
  5. Si possono escludere i commenti dell'autore del sito su Escludimi = true;   
  6. Se avete commentatori un po' troppo invadenti si possono escludere i loro username inserendoli in Escludi_Utenti tra virgolette e separati da virgole 
  7. Su Mass_Lung_Username = 30; si può impostare il numero massimo di caratteri per utente
  8. DimAvatar = 32; e RitAvatar = true; per le dimensioni e il ritaglio dell'avatar
  9. DimAvatar serve anche per settare le dimensioni tramite l'URL dell'Avatar e del Gravatar
  10. Impostare l'immagine di default del profilo colorato di viola se non ci fosse.
Concludo ricordando che per non appesantire troppo la pagina è bene non aumentare oltre 200 il numero di feed da cui estrarre i Top Commentatori e nel caso avessimo molti articoli e commenti è bene impostare un numero di giorni non eccessivo per non troppo diminuire la velocità di caricamento che ricordo essere un fattore di ranking.
Concludo ricordando che volendo si possono mostrare i Top Commentatori di un altro blog sostituendo la stringa http://'+window.location.hostname+'/feeds/comments/default per esempio con http://www.ideepercomputeredinternet.com/feeds/comments/default.


8 commenti :

  1. ne approfitto subito! :D Grazie del post!

    RispondiElimina
  2. Domanda... se io volessi tener conto dei commenti pubblicati a partire da un determinato giorno in poi? Mi spiego meglio: vorrei creare la top commentators mensile, quindi avrei bisogno di monitorare i commenti pubblicati dal 1 fino al 30 aprile per esempio, per poi riazzerare il tutto dal 1 maggio fino al 31 maggio e così via. Come posso fare?

    RispondiElimina
    Risposte
    1. Detta così non si può fare. Si può modificare l'URL dei feed per mostrare i commenti dei periodi precedenti. Invece di considerare gli ultimi 200 commenti
      &max-results=200&alt=json-in-script
      si potrebbe provare con
      &max-results=50&start-index=101&alt=json-in-script
      che conteggia gli ultimi 50 commenti ma a partire dal 101-esimo. Non so però quanto potrebbe essere utile e poi dovresti sostituire tutte le altre occorrenze di 200
      @#

      Elimina
    2. Allora farò lo screen di quanti commenti ci sono ora per poi calcolarne la differenza a fine mese. Grazie per la risposta :)

      Elimina
  3. Ciao Ernesto: questo non funziona affatto sul mio blog. Non capisco perché: puoi aiutarmi?

    RispondiElimina
    Risposte
    1. La Demo funziona però in effetti a incollare il codice così come è non funziona più. Non so la ragione. Salvo il commento e se riesco a risolvere ci faccio un post
      @#

      Elimina
    2. Grazie Ernesto: io sto continuando a provare, ho cercato anche su diversi siti, ma il codice è sempre lo stesso e non riesce a funzionare. Due volte tra i tentativi che ho fatto, il codice ha partorito una specie di aborto non vitale, un widget formato male e dove mancavano gli avatar dei commentatori. Lo scritto inoltre aveva caratteri un po' troppo grandi e di colori improbabili... Se riesci a rimediare con qualche modifica del codice, vedi se ti riesce anche di darmi la possibilità di cambiare il colore dello scritto (come nel widget commenti normale) perché vorrei metterlo su un fondo nero. Inutile aggiungere che otterresti la mia gratitudine eterna!! :-D Grazie Ernesto...

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy