04 marzo 2013

Widget dei Top Commentatori con Avatar per Blogger.

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

top-commentatori
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://lh5.googleusercontent.com/-q_lMY2A1B2g/UTRt9tLaWfI/AAAAAAAAgqQ/Nv2yyYuo5-U/s"+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('<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://lh5.googleusercontent.com/-q_lMY2A1B2g/UTRt9tLaWfI/AAAAAAAAgqQ/Nv2yyYuo5-U/s80/avatar2.png
è stata inserita in questo modo
https://lh5.googleusercontent.com/-q_lMY2A1B2g/UTRt9tLaWfI/AAAAAAAAgqQ/Nv2yyYuo5-U/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 -


14 commenti:

  1. ciao ernesto ti disturbo ancora per sapere un chiarimento:ho caricato una favicon per un mio nuovo blogger ma ancora non la vedo nella barra di chrome:è normale così? grazie mille

    RispondiElimina
    Risposte
    1. @# Prova a eliminare la cache del browser

      Elimina
  2. è molto simpatico ma cosi la lista diventa lunghissima a meno che non mettere solo i primi 12 come nel tuo esempio...io lascio il vecchio....ciao e grazie come sempre x i tuoi suggerimenti!

    RispondiElimina
  3. Il caricamento dei commentatoti è lentissimo.
    Ciao.

    RispondiElimina
  4. Bellissimo widget.
    Ma non mi torna Ernesto...
    Vabbeh che qualche utente ha cambiato anche solo una lettera del nome e quindi lo trovo doppio, su questo non ci si può far niente, ma più che altro sono sicuro di utenti che hanno fatto almeno una 50ina di commenti recentemente e non sono in classifica malgrado l'ultimo visibile ne abbia tipo 25. C' è una specie di aggiornamento lento?

    Grazie comunque

    RispondiElimina
    Risposte
    1. @# Lo script l'ho preso da un blog vietnamita come ho scritto nell'articolo e viene utilizzato un linguaggio che francamente non conosco. Può darsi che non sia preciso sebbene esteticamente valido.

      Elimina
    2. @# Errata corrige. Non è quello preso dal blog vietnamita e questo linguaggio lo conosco :) Rimane il dubbio che possa non essere preciso come invece lo sono i Pipe di Yahoo

      Elimina
  5. Fantastico....è da più di un ora che leggo il tuo blog!!!

    RispondiElimina
  6. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  7. arissimo Ernesto, ti seguo da un sacco ed ho costruito il mio blog sulla base delle tue utilissime spiegazioni. Volevo scriverti da molto, ma sai com'è ... non si arriva a fare sempre tutto. Ho messo un ringraziamento per te in fondo alla mia homepage (se poi mi dici cosa aggiungere per aprirti in un altra pagina sarei contenta e ti metto pure il link) e ti ho segnalato fra i miei blog preferiti con tanto di motivazione. Fatta questa premessa ... ti devo chiedere, perché questa volta non ci arrivo da sola, come mai questo widget oggi è in tilt e mi compare la tua faccia fra i top commentatori, associato poi al nome di un'altro utente? Grazie

    RispondiElimina
    Risposte
    1. Per aprire un link in un'altra pagina basta aggiungere target="_blank" prima del segno > della chiusura del link. La demo di questo widget funziona. Delle volte con i Pipes di Yahoo ci sono dei problemi. Prova a disinstallarlo e a installarlo di nuovo.
      @#

      Elimina
    2. Eccomi di nuovo qui. Ho provato a disinstallare e installare di nuovo, ma nulla. Ho provato anche più di una volta. Però ho la sensazione che il problema sia nato in un momento preciso, cioè quando io stavo facendo la modifica ad un post e, esattamente in contemporanea, è stato inserito un commento. E' come se il nuovo commento sia rimasto 'appeso', non so se mi spiego. Infatti con l'inserimento di altri commenti questo utente (che ha la tua faccia) e il suo nome (che però non presenta il link, ma è solo un nome messo lì) si sta spostando in basso. Quindi presumo che, andando avanti, possa 'uscire' definitivamente dalla lista. E' plausibile?

      Elimina
    3. È assolutamente plausibile. Se il commento in questione non è fondamentale e se il commentante non si offende puoi provare eliminarlo definitivamente per risolvere la cosa da subito
      @#

      Elimina

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