Widget dei Top commentatori di Blogger con avatar del profilo

In passato ho già scritto un tutorial per installare il widget degli ultimi commenti sul blog, è un ottimo modo per creare una sorta di community pur sapendo che Blogger non è mica un forum. Se siete certi che la vostra utenza è composta da persone che vi seguono da tanto tempo e che commentano spesso potrebbe essere utile per voi un altro widget per i commenti detto widget dei Top commentatori.

Esso non farà altro che coinvolgere ancora di più gli utenti del vostro blog perché crea una classifica degli utenti più fedeli basata sul numero dei commenti. Gli utenti avranno il vantaggio di mettere in risalto il loro profilo Blogger o Google+, specialmente se si tratta di una pagina G+ per pubblicizzare il proprio brand.

Dovete andare su Layout > Aggiungi un gadget > HTML/Javascript ed incollare il seguente codice:

<script type="text/javascript">
var maxTopCommenters = 8;
var minComments = 1;
var numDays = 0;    
var excludeMe = true;
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'Non è presente nessun commentatore.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDlKnfgMi0t0U35SSnZPPc1g_3esUeGSspcsdW41fCglxs31dwshZdpfZ0XIhXhKcP3e5gFlrAgtnQuMwNtueSbSAP2afuHmawUwTqB1uF4YVbFaa8uzwY2Sa6csvE7rPdwngOnDBUIoE/s1600/utente+registrato+senza+foto.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNxQkOKP3PJhyRKRohslmEcqtMRO2IIegM4lreVbGK4M1TRDej8q-UcTbqKkdNbBki8wPR8REha8VAzdfjH-qbGkxvynFOGn_0aNbhrzrgcyYn_HOCMAIMTs5VKQHk-1yy9-hzDtIs1I4/s1600/utente+anonimo.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
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(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="commenter-link-name" 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(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = 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(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.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;
  }
  // convert object to array of tuples
  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 < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commentators">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
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>

Il risultato sarà il seguente, cioè un elenco degli 8 utenti di Blogger che hanno commentato di più sul vostro blog:

E' possibile migliorare questo widget aggiungendo quest'altro codice nel Modello prima del tag ]]></b:skin> :

.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}

Il risultato sarà lo stesso widget ma con gli avatar arrotondati e con delle linee separatorie tra un utente e l'altro.

Personalizzazioni

Anche in questo widget si possono eseguire alcune personalizzazioni, vi illustro le principali.

• var maxTopCommenters = 8; --> mostra il numero di utenti da mostrare in classifica, attualmente 8.
• var minComments = 1; --> mostra il numero minimo di commenti che devono avere gli utenti per apparire in classifica, attualmente 1.
• var excludeUsers = ["Anonymous", "iltuonome"]; --> potete anche escludere certi utenti dalla classifica inserendo il loro nome tra le virgolette, vi conviene inserire anche il vostro dato che per ovvi motivi sarete voi stessi l'utente che commenta maggiormente.
• var maxUserNameLength = 42; --> qui potete definire la lunghezza di caratteri del nome degli utenti.
• var sizeAvatar = 33; --> questo valore numerico determina le dimensioni dell'avatar.
• var cropAvatar = true; --> sostituendo true con false potrete utilizzare il widget senza mostrare gli avatar degli utenti.

Sembra che il widget sia leggermente pesante per cui sconsiglio di inserire un numero maggiore di 10 utenti nella classifica se avete intenzione di posizionarlo nella sidebar.