Pubblicato il 08/10/17 - aggiornato il  | 5 commenti :

Widget degli Ultimi Commenti di Blogger con avatar ruotanti.

Come installare su Blogger il widget dei Commenti Recenti con le miniature degli avatar che ruotano al passaggio del cursore.
Tutti i Widget dei Commenti Recenti di Blogger avevano da tempo smesso di funzionare probabilmente per il passaggio di Blogger dalla connessione con protocollo HTTP a quella protetta con protocollo HTTPS.

In un precedente post ho ripristinato la versione più semplice di tale widget ma non ero ancora riuscito a  ripristinare quella con le miniature dell'avatar dei commentatori che ruotano al passaggio del cursore.

Questo gadget ha avuto un certo successo perché può essere installato senza modificare il template e dà la possibilità di nascondere i commenti dell'autore del sito per mostrare solo quelli dei lettori. Ovviamente si può decidere il numero degli ultimi commenti da mostrare.

Un'altra particolarità interessante di questo widget è quella che permette di scegliere il numero massimo di commenti che possono provenire da un solo post. Se per esempio avete scelto di mostrare gli ultimi 8 commenti e ce ne sono 3 che provengono dallo stesso post, ne verranno visualizzati solo 2 con l'impostazione numPerPost = 2; mentre saranno mostrati tutti  e tre con l'impostazione numPerPost = 3;.

Quando si passa sopra al link del commento con il mouse si visualizza come Tooltip il Titolo del post che però non è quello reale ma la parte di Permalink che può essere personalizzata su Blogger.





Quando si passa con il cursore sopra all'avatar del commentatore questo farà una rotazione di 360 gradi e tornerà alla posizione originale quando il cursore lascerà la miniatura (evento onmouseout).

commenti-recenti-blogger-avatar-ruotanti

Per l'installazione si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript, si digita a piacere il titolo del gadget quindi in Sezioni del sito si aggiunge il codice seguente

<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-size:11px;padding: 0px 4px 1px 10px;border: 1px solid transparent;}
.rc-footer{font-size:11px; float: right;}
#rcw-cr {font-family: Georgia;font-size:10px;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 = 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var txtMore = '';
var txtWrote = ' ha commentato:';
var txtAnonymous = 'Anonimo';
var maxResultsComments = "";
var numPerPost = 3;
var maxPostTitleChars = 100;
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") 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") 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 = "https://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 = 'https://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "https://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>');
}
}
}
if(getTitles)
document.write('<script type="text/javascript" src="https://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="https://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>

Si posiziona nella sidebar quindi si va su Salva Disposizione. Le personalizzazioni più importanti sono le seguenti:
  1. numRecentComments = 8; numero degli elementi da mostrare
  2. var txtAnonymous = 'Anonimo'; nome da visualizzare nei commenti anonimi
  3. var maxCommentChars = 80; numero massimo dei caratteri in un commento
  4. var trueAvatars = true; per mostrare le miniature dei commentatori
  5. Gli Avatar e i Gravatar dei commentatori sono stati inseriti in modo automatico e della giusta dimensione utilizzando Google Foto e la stringa sizeAvatar che ci permette di configurare le dimensioni delle immagini in funzione del suo URL.
  6. numPerPost = 3;  numero massimo di commenti visualizzati per ogni post
  7. 1s è la durata della rotazione in secondi. Si può sostituire con 1.2s per renderla più lenta o con 0.8s per averle una rotazione più rapida
  8. Si può inserire il nome dell'autore del blog o di un altro commentatore al posto di Ernesto nelle due occorrenze per filtrare i suoi commenti e per non mostrarli.
  9. Se manca l'avatar verrà visualizzato il logo di default di Blogger colorato di viola che può essere sostituito da un'altra immagine.
  10. La dimensione delle miniature è fissata in 50 pixel  (sizeAvatar) e può essere personalizzata.






DOMINI PERSONALIZZATI E ALTRI BLOG

Il codice precedente dovrebbe funzionare in tutti i blog di Blogger gratuiti cioè del tipo Blogspot. I blog con dominio personalizzato non hanno al momento la connessione HTTPS. Per installare questo gadget e per renderlo funzionante occorre fare alcune modifiche al suo codice.

Le due righe evidenziate di giallo vanno sostituite rispettivamente con

http://www.ideepercomputeredinternet.com/feeds/posts/summary

e

http://www.ideepercomputeredinternet.com/feeds/comments/default

dove ovviamente l'URL del dominio di questo sito è stato inserito come esempio e va sostituito.
L'inserimento dell'URL del blog al posto della notazione automatica serve anche per mostrare gli ultimi commenti ricevuti da un altro sito anche non di nostra proprietà come mostrato nella Demo precedente.




5 commenti :

  1. Aspettavo proprio questo post ...allora sul mio blog animalista dove è ancora installato se ho ben capito devo solo variare i tuoi 2 link ..
    Giusto?

    RispondiElimina
    Risposte
    1. No. Non ha un dominio personalizzato quindi puoi lasciare il codice così com'è
      @#

      Elimina
  2. Allora devo variare tutto il codice xké ora ci sono solo le B rotanti e non gli avatar....giusto?

    RispondiElimina
    Risposte
    1. Devi incollare questo codice al posto di quello vecchio e salvare. Dovrebbe bastare
      @#

      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.