Pubblicato il 22/12/14e aggiornato il

Widget degli ultimi commenti con avatar del commentatore.

Come installare il widget dei Commenti Recenti che mostri anche l'avatar del commentatore e il link al commento ricdvuto o pubblicato dall'autore con immagine di default per i commenti anonimi (se consentiti).
Riprendo un post di qualche anno fa che ha avuto un certo successo tra i lettori visto che mostra gli ultimi commenti ricevuti da un blog su Blogger insieme alla immagine del commentatore visibile in forma circolare. I widget dei commenti recenti non è solo utile per offrire nuovi contenuti ai lettori ma è importante anche per l'amministratore del sito che può verificare se ci siano commenti per eventualmente pubblicare la risposta. 

Per qualche giorno installerò questo widget anche su questo sito e quindi potrete verificarne il funzionamento. Visto che non utilizza script esterni può essere inserito senza alcun problema anche nei blog con dominio personalizzato. L'aspetto del gadget sarà il seguente

widget-ultimi-commenti

Per l'inserimento del gadget non ci sono grossi problemi visto che non è necessario modificare il template. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla 

<style type="text/css">
ul.commenti_recenti {
    list-style: none;
    margin: 0;
    padding: 0;
}
.commenti_recenti li {
    font-family:Georgia !Important;
    font-size:13px !important;
    font-weight:bold;
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.commenti_recenti li .avatarImage {
    padding: 3px;
    background: #efefef;
    -webkit-box-shadow: 0 1px 1px #bbb;
    -moz-box-shadow: 0 1px 1px #bbb;
    box-shadow: 0 1px 1px #bbb;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.commenti_recenti li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}
.commenti_recenti li span {   
    margin-top: 4px;
    color: #191919;
    display: block;
    font-size: 13px;
   font-family:Georgia !Important;
    font-weight:normal !important;   
    line-height: 1.3;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Impostazioni personalizzate
    var
numComments  = 8,
showAvatar  = true,
avatarSize  = 46,
roundAvatar = true,
characters  = 60,
showMorelink = true,
moreLinktext = "More",
defaultAvatar  = "https://lh4.googleusercontent.com/-d8sFfc8eZoA/T8OGeWC33nI/AAAAAAAAYZA/OseLBU2FwI8/s80/avatar.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<Y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<X>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<V C=\\"1T "+k+"\\"><B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|commenti_recenti|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript" src="http://www.ideepercomputeredinternet.com/feeds/comments/default?alt=json&callback=commenti_recenti&max-results=8"></script>

Si salva l'elemento e si posiziona il gadget con il drag & drop del mouse quindi si va su Salva disposizione.  Le personalizzazioni più importanti riguardano:
  1. L'URL del vostro blog da sostituire a quello di questo sito con il .com se gratuito
  2. Il colore dello sfondo dell'immagine del commentatore è #efefef
  3. Il colore dell'ombreggiatura dell'avatar è #bbb
  4. Il colore del testo del commento #191919
  5. La dimensione del carattere del testo del commento è di 13 pixel così come la dimensione del testo del nome del commentatore (il primo 13px riguarda il nome del commentatore)
  6. font-weight :bold; per avere in grassetto il nome del commentatore
  7. font-weight:normal per avere senza grassetto il testo del commento
  8. line-height: 1.3; è l'altezza delle righe del commento
  9. La famiglia di caratteri proposta è Georgia
  10. Il numero dei commenti da mostrare proposto come 8 va modificato nelle due occorrenze
  11. La dimensione dell'avatar è proposta in 46 pixel
  12. Il numero dei caratteri dell'incipit del commento è proposto in 60
  13. showMorelink con  true per mostrare il link per leggere tutto il commento con false per non visualizzare tale link. More è invece il testo di ancoraggio di tale link
  14. In alcuni blog si può commentare da anonimi senza connettersi con Blogger. Relativamente a questa situazione verrà mostrata una immagine di default dell'avatar
  15. I codici dei colori dei link saranno ereditati dal vostro modello.
  16. roundAvatar = true, per mostrare gli avatar in modo circolare. Si può sostituire true con false per visualizzarli in forma quadrata.




13 commenti :

  1. Articolo molto utile, mi piacerebbe sapere però, anche come si può far apparire le immagini dei profili nei commenti sotto i post.
    Un ultima cosa, si può far apparire un tasto reply sotto i singoli commenti dei lettori?

    RispondiElimina
    Risposte
    1. Le immagini dei profili ovvero gli avatar già ci sono a fianco dei commenti dei lettori. Per il tasto Reply è più complicato ed era possibile inserirlo qualche anno fa
      http://www.ideepercomputeredinternet.com/2011/03/come-aggiungere-un-link-di-replica-nei.html
      Non so se il tutorial sia sempre valido alla luce delle modifiche con l'introduzione dei commenti nidificati
      @#

      Elimina
  2. ciao un info ho messo questo widget nel mio blog e a differenza dell'altro non c'è il titolo del post a cui si riferisce il commento.http://igiochidiscappadelleribelli.blogspot.it/ .
    il widget è in fondo alla pagina.grazie

    RispondiElimina
    Risposte
    1. Nel widget di questo post non c'è il titolo dell'articolo a cui si riferisce il commento ma solo il nome del commentatore e l'incipit dello stesso commento contrariamente al widget che mi hai indicato
      @#

      Elimina
    2. grazie aspettiamo il prossimo con il titolo dell'articolo :)

      Elimina
  3. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  4. Ciao Ernesto: io ho inserito nel blog un widget con gli ultimi commenti, ma dato che rispondo sempre ai miei commentatori il widget invece di essere ricco e colorato con i volti dei miei lettori contiene molte delle mie risposte: credi possibile elaborare un widget dove siano visibili solo i commenti e non le risposte?? Sarebbe molto più bello! Spero tu possa rispondermi!

    RispondiElimina
    Risposte
    1. Con questa soluzione
      http://www.ideepercomputeredinternet.com/2013/04/last-comments-widget-with-rotating-avatar.html
      si possono nascondere i commenti dell'autore del post. Leggi attentamente il punto 7) e ricordati che l'username è case sensitive cioè che Ernesto è diverso da ernesto
      @#

      Elimina
  5. Ciao Ernesto che significa
    L'URL del vostro blog da sostituire a quello di questo sito con il .com se gratuito?
    cioè se è stato acquistato il dominio? io l'ho acquistato messo su blogger ma il widget non funziona non ne funziona nessuno lo inserisco carico la pagina si vede qualche secondo il widget poi il blog diventa tuto bianco e si vede una specie di lista dei commenti. Cosa può essere?

    RispondiElimina
    Risposte
    1. Il tuo sito è questo?
      http://pane-burroemarmellata.blogspot.it
      Se la risposta è affermativa devi sostituire
      pane-burroemarmellata.blogspot.com
      a
      www.ideepercomputeredinternet.com
      nella penultima riga. Della serie non si è mai troppo chiari e analitici nello spiegare le cose :))
      @#

      Elimina
    2. Ciao Ernesto no non è quello su questo ebbi lo stesso problema ma metendo appunto il punto com ho risolto. Il blog è http://www.batuffolando-ricette.com/ piattaforma blogger, con il vecchio dominio il widget funzionava, anche nel passaggio al nuovo dominio, ma avendo cambiato il template una volta provato a rimetterlo non funziona, se metto il mio indirizzo pane-burroemarmellata.blogspot.com per fare una prova invece i miei commenti si vedono. Spero di essermi spiegata bene, grazie

      Elimina
    3. Quando si passa a un dominio personalizzato comunque il vecchio blog del tipo blogspot.com continua a vivere. Quindi se con questo URL i commenti si vedono e il widget funziona puoi lasciarlo senza problemi. Se invece sostituendo
      www.ideepercomputeredinternet.com
      con
      www.batuffolando-ricette.com ( senza slash finale / ... !!!!)
      non funziona allora può darsi che ci siano delle incompatibilità con il nuovo template forse dovute a un widget simile già presente
      @#

      Elimina
  6. risolto! visto che mi hai detto che se con l'altro mio indirizzo blogspot funzionava ho messo invece del nuovo dominio il vecchio di blog spot e funziona!!!!grazie mille sei illuminante!

    RispondiElimina

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.