Pubblicato il 08/04/13e aggiornato il

Widget degli Ultimi Commenti con avatar circolari ruotanti.

Come installare il widget dei Commenti Recenti nei blog di Blogger che mostrino gli avatar dei commentatori in forma circolare e ruotanti al passaggio del mouse.
Mi è strato espressamente richiesto di presentare questo widget dei Commenti Recenti e lo faccio anche se in passato ho già proposto diversi gadget su questo tema perché si tratta di un widget veramente carino e originale. Con questo codice si potranno addirittura nascondere i commenti dell'autore del blog per dare maggiore risalto ai commentatori esterni. Per la sua installazione non occorre modificare il modello ma si incolla semplicemente il codice in un elemento pagina. L'ho testato con Chrome, Firefox e Internet Explorer 10 e non dà assolutamente problemi, anche come velocità di caricamento rispetto ai widget simili.

Accanto ai commenti dei lettori si visualizzeranno i loro avatar in forma circolare e, quando ci si passerà sopra con il mouse, le icone effettueranno un giro di 360 gradi.

ultimi-commenti-avatar-ruotante
Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<style type="text/css">
.rc{padding-left:24px; padding-top: 6px;}
.rc a:hover {color: #F3903E;text-decoration: none;}
.rc-ico{margin-left:-20px;margin-top:4px;float:left; margin-right:3px}
.rc-ico img {margin-top: -2px;margin-right:5px; border: 2px solid #fff;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out; }
.rc-ico img:hover {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);}
.rc-header{font-size: 13px;}
.rc-header a{}
.rc-body{font-style: italic; font-size:11px;padding: 0px 4px 1px 10px;border: 1px solid transparent;}
.rc-footer{font-size:11px; float: right;}
#rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;}
</style>
<script type="text/javascript">
var numRecentComments = 8;
var maxCommentChars = 80;
var trueAvatars = true;
var urlMyAvatar = '';
var urlMyProfile = '';
var cropAvatar = true;
var sizeAvatar = 50;
var urlNoAvatar = "https://lh5.googleusercontent.com/-q_lMY2A1B2g/UTRt9tLaWfI/AAAAAAAAgqQ/Nv2yyYuo5-U/s"+sizeAvatar+"/avatar2.png";
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var txtMore = '';
var txtWrote = ' ha commentato:';
var txtAnonymous = 'Anonimo';
var maxResultsComments = "";
var numPerPost = 2;
var maxPostTitleChars = 40;
var getTitles = true;
var maxResultsPosts = "";
var txtTooltip = '[user] su &quot;[title]&quot; - [date dd-MM-yyyy hh:mm]';
var urlToTitle = {};
function replaceVars(text, user, title, date) {
text = text.replace('[user]', user);
text = text.replace('[date]', date.toLocaleDateString());
text = text.replace('[datetime]', date.toLocaleString());
text = text.replace('[time]', date.toLocaleTimeString());
text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
var i = text.indexOf("[date ");
if(i > -1) {
var format = /\[date\s+(.+?)\]/.exec(text)[1];
if(format != '') {
var txtDate = format.replace(/yyyy/i, date.getFullYear());
txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
text = text.replace(/\[date\s+(.+?)\]/, txtDate)
}
}
return text;
}
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;
}
}
function getPostUrlsForComments(json) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
urlToTitle[href] = entry.title.$t;
}
}
function showRecentComments(json) {
var postHandled = {};
var j = 0;
if(numPerPost) {
while(numPerPost < numRecentComments) {
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(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
j++;
}
}
if(j >= numRecentComments)
break;
numPerPost++;
j = 0;
postHandled = {};
}
if(numRecentComments == numPerPost)
numPerPost = 0;
}
postHandled = {};
j = 0;
for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Ernesto Tirinnanzi") continue;
if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
j++;
var href='';
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href=='') {j--; continue; }
var hrefPost = href.split("?")[0];
var comment = "";
if("content" in entry) comment = entry.content.$t;
else comment = entry.summary.$t;
comment = comment.replace(/<br[^>]*>/ig, " ");
comment = comment.replace(/<\S[^>]*>/g, "");
var postTitle="-";
if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
else {
if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
postTitle = postTitle.replace(/-/g," ");
postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
}
if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
postTitle = postTitle.substring(0, maxPostTitleChars);
var indexBreak = postTitle.lastIndexOf(" ");
postTitle = postTitle.substring(0, indexBreak) + "...";
} var authorName = entry.author[0].name.$t;
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = entry.author[0].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+"/");
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
var clsAdmin = "";
if(urlMyProfile != "" && authorUri == urlMyProfile)
clsAdmin = " rc-admin";
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]); var txtHeader = txtWrote;
if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate); var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
if(!/#/.test(href)) href += "#comments";
document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>');
else {
comment = comment.substring(0, maxCommentChars);
var indexBreak = comment.lastIndexOf(" ");
comment = comment.substring(0, indexBreak);
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
}
}
document.write('<div style="clear:both;"></div></div>');
}
}
document.write('<div id="crdcom" style="font-size:70%;text-align:center"><a href="http://goo.gl/1AmTO" target="_blank">Get widget</a></div>');
}
if(getTitles)
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>

Le personalizzazioni vanno fatte esclusivamente per i parametri colorati di rosso altrimenti correte il rischio di non vedere funzionare il widget. Si possono scegliere:
  1. numRecentComments = 8; numero dei commenti da mostrare
  2. var txtAnonymous = 'Anonimo'; cosa visualizzare nei commenti anonimi
  3. var maxCommentChars = 80; il numero massimo dei caratteri nei commenti
  4. L'avatar e il gravatar per i commenti anonimi. A tale proposito leggere questo post
  5. numPerPost = 2; il numero massimo di commenti per ogni articolo
  6. 1 rappresenta la durata della rotazione in secondi. Si può mettere per esempio 1.2 per renderla più lenta o 0.8 per averla più veloce
  7. Il nome dell'autore del blog per non mostrare i suoi commenti
Alla fine del gadget si visualizzerà il link Get Widget che rimanderà a questo post per permettere ai lettori dei blog che lo avranno installato di fare altrettanto cliccandoci sopra. Se a qualcuno desse fastidio quel minuscolo collegamento può nasconderlo facilmente andando su Modello > Modifica HTML e incollando sopra alla riga ]]></b:skin> questo semplice codice #crdcom {display:none;}.

Fonte | HelpBlogger -

Aggiornamento: Alcuni utenti che hanno installato questo widget si sono lamentati che tralasci dei commenti. In realtà non è così perché con il codice proposto vengono rilevati un massimo di due commenti per ciascun post (vedi punto numero 5). Se avete impostato di mostrare gli ultimi 8 commenti e ce ne sono 3 che provengono dallo stesso articolo, uno non verrà visualizzato. Per superare questo problema, se qualcuno lo ritiene tale, può mettere numPerPost = 3; o numPerPost = 4; 




47 commenti :

  1. sei stato velocissimo ad accontentare la mia richiesta!!! Il widget è bellissimo l'ho appena sostituito..grazie mille.

    RispondiElimina
    Risposte
    1. @# Sono fondamentalmente buono :D

      Elimina
    2. allora posso farti altre richieste, non ti arrabbi? :)

      Elimina
    3. @# Puoi fare tutte le domande che ti pare. Non è però che ho il tempo di soddisfare tutti i desideri. Se li considero di interesse generale e che mi portano via un lasso di tempo ragionevole, senza impegno vedo quello che posso fare...

      Elimina
  2. è proprio il caso di dire...ti faccio fare un giro!!! :-) ora provo..... ciao e grazie per i tuoi sempre utilissimi post!

    RispondiElimina
  3. fantastico istallato...grazie!
    Pat

    RispondiElimina
  4. Ho notato che rispondendo ad un commento, il mio commento appare come immagine rotante ma va a sostituire l'avatar della persone a cui ho risposto. Per questo motivo sono tornato ai commenti con avatar quadrati + vecchi.

    RispondiElimina
  5. Ernesto help! Ho notato che non compaiono esattamente gli ultimi commenti messi , li salta alcuni come mai?

    RispondiElimina
    Risposte
    1. @# E' vero e la risposta è non lo so ma credo siano alcuni di risposta

      Elimina
  6. Ernesto se non voglio fare apparire l' avatar e commento di anonimo ....cosa devo fare???

    RispondiElimina
    Risposte
    1. @# Fai come me. Permetti i commenti solo agli utenti che si sono loggati con un account Google o con OpenID

      Elimina
  7. ciao,ho provato ad installare questo widget e anche quello dei top commentatori,ma quando salvo mi esce tutto il papiro che ho copiato...dove sbaglio?
    Io per mettere il widget faccio cosi: Layout ---> Aggiungi un gadget ---> HTML/Javascript ---> incolla.
    grazie mille


    RispondiElimina
    Risposte
    1. IL codice lo devi incollare in Sezioni del sito ma questo certamente lo farai già. Quindi si va su Salva. Non so dove e se sbagli. Delle volte il widget semplicemente non funziona @#

      Elimina
  8. ciao ernesto, modificando il modello per visualizzare il link get widget
    mi compare questo messaggio
    The element type "b:skin" must be terminated by the matching end-tag "":
    l'elemnto bskin che tu dici di cercare però non mi compare su una riga singola, ma alla fine dello script che mi hai indicato su.... cosa devo fare...
    grazie mille

    RispondiElimina
    Risposte
    1. Devi mettere il cursore prima di ]]> e pigiare nella tastiera su Invio (o Enter). Quindi lo metti alla fine di b:skin> e pigi nuovamente su Invio. In questo modo si creerà una riga come nel post e potrai incollare il codice
      @#

      Elimina
    2. si si.. la riga si è creata, ma mi dà lo stesso messaggio
      Errore di analisi XML, riga 610, colonna 3: The element type "b:skin" must be terminated by the matching end-tag "".

      Elimina
    3. ernesto ho risolto cancellando il testo linkato get a widget dal codice che ci hai dato... direttamente nell'elemento html java script.. grazie comunque per la tua disponibilità

      Elimina
  9. Sarebbe possibile creare un widget dei commenti che li suddivida per post? Tipo quelli che ci sono al sito "www . gioba . it" nella colonna di destra? Credo che sia wordpress la base di quel blog, ma sarebbe bello fare lo stesso anche su blogspot... Grazie mille

    RispondiElimina
    Risposte
    1. Non ne ho mai visti di simili ma in futuro qualcuno potrebbe realizzarli
      @#

      Elimina
  10. Sei Un Mostro in senso buono della parola Grazie!!!!!!! :)

    RispondiElimina
  11. Bellissimo widget, l'ho portato sul mio blog. Grazie mille!!!!

    RispondiElimina
  12. Ciao,
    passa da me:
    http://semivaniglia.blogspot.it/2014/03/due-nuovi-premi.html
    c'è una sorpresa per te. :)
    a presto
    floriana

    RispondiElimina
  13. Ciao Ernesto! Il Widget funziona perfettamente! Grazie! Mi chiedevo, si possono fare delle personalizzazioni riguardo i colori (se ad esempio volessi utilizzare il widget su sfondo scuro con link in un colore chiaro)?

    RispondiElimina
    Risposte
    1. Il widget dovrebbe ereditare i colori del blog. Personalizzare sfondo e link la vedo complicata
      @#

      Elimina
  14. ma che bello! grazie! c'è per caso lo stesso widget per i post più popolari? ( io ce l'ho ma le miniature sono quadrate e non girano....:-)) grazie mille

    RispondiElimina
    Risposte
    1. Prova a vedere se ti va bene questo widget
      http://www.ideepercomputeredinternet.com/2012/11/blogger-widget-post-popolari-miniature.html
      @#

      Elimina
    2. Ernesto.... sorry non l'ho trovata la riga, ossia ho trovato una scritta simile (rigo 13 non so se ti è utile) cioè: …
      ho provato ad incollare il codice sopra (indi riga 12) ma non funziona. Se faccio l'anteprima vedo tuuuuuutto il codice praticamente sotto il titolo dell'intestazione del mio blog.
      dove sbaglio? :-( grazie ancora

      Elimina
    3. ma sarò rintronata! santo cielo (oltre a girare le miniature qui gira anche il neurone che conservo gelosamente) ho dimenticato di dirti quale scritta trovo... è questa: …

      Elimina
  15. boh il copia/incolla non va evidentemente eppure non è un link (…)

    RispondiElimina
    Risposte
    1. Ti riferisci a questo post? Strano perché la Demo funziona perfettamente. Prova a incollare il codice così com'è e poi modificalo inserendo il tuo nome e le altre personalizzazioni
      @#

      Elimina
    2. eh! infatti la demo funziona non so perchè "da me" invece c'è un problema okappa ricevuto capo, provo :-)

      Elimina
  16. Ottimo tutorial, mi ha funzionato, ma ho un problema, non si aggiorna con gli Ultimi Commenti (è fermo a svariati giorni fa, nonostante nuovi commenti in nuovi post e non ci siano stati), da che potrebbe dipendere?
    Grazie

    RispondiElimina
  17. grazie per questo bel widget, l'ho messo sul mio blog e sembra tutto a posto.....

    RispondiElimina
  18. Ciao Ernesto!H provato ad inserire i widget ed è bellissimo purtroppo però invece di prendere gli ultimi commenti visualizza quelli di un anno fa. Come posso rimediare?

    RispondiElimina
    Risposte
    1. Non conosco la ragione di questo comportamento. Nel test funzionava perfettamente
      @#

      Elimina
  19. Ho un problema, Ernesto: ho inserito questo widget, che desideravo molto, soprattutto per la possibilità che offre di rendere invisibili i commenti dell'autore del blog, permettendo così di dedicare interamente il widget ai lettori. Bene il widget funziona, il blog funziona, ma... ora andando su layout se apro qualsiasi riquadro di widget, che so, per modificare il numero di post o commenti nel riquadro mi compare soltanto NOT FOUND Error 404. Dato che la cosa accade a poche ore dalla istallazione del nuovo widget commenti, mi chiedo se possa dipendere da questo o che cavolo succede :-( Puoi aiutarmi??

    RispondiElimina
    Risposte
    1. In questo caso è meglio che lo togli. Se non riesci a farlo da Layout puoi sempre farlo da Modello > Modifica HTML. Cerca il titolo del widget e poi cancella tutto il codice a partire da < b:widget... fino a < / b:widget >. Salva prima il modello ovviamente
      @#

      Elimina
    2. quel problema si è risolto, ma ne insorto un altro se leggi sotto....

      Elimina
  20. Scusa Ernesto: ho messo var num per post=1 per non avere nel widget troppi commenti della stessa persona, ma mi da lo stesso 3-4 commenti sulla medesima conversazione sullo stesso post :-( perché??

    RispondiElimina
    Risposte
    1. Non te lo dire. Forse hai pochi commenti e allora vengono visualizzati lo stesso i commenti di una stessa conversazione (pura ipotesi)
      @#

      Elimina
    2. ok grazie mille Ernesto!

      Elimina
    3. Non ricevo tantissimi commenti, ma ci sono 1.486 commenti complessivamente nel blog, quindi non so... comunque grazie mille: è un bellissimo widget!

      Elimina
  21. Ma questo widget funziona per wordpress?

    RispondiElimina
    Risposte
    1. No. Lo script è basato sul codice di Blogger ma con Wordpress ci sono a disposizione moltissimi plugin tipo questo
      https://wordpress.org/plugins/comments-widget-plus/
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.