Commentare a scelta con Blogger, Google+ e Facebook con contatore dei commenti.

Come lasciare la scelta al lettore di commentare con Facebook, Blogger o Google+ e mostrare i tre contatori di commenti.

Ho già presentato una brillante soluzione per lasciare al lettore la scelta di commentare con Blogger, Google Plus o Facebook risparmiando tra l'altro notevole spazio nel layout. In un post successivo ho esteso questa possibilità anche a Disqus. Con l'articolo di oggi riprendo il tema del primo post aggiungendo un contatore per ciascuno dei tre sistemi di commenti. In questo modo l'utente sarà più invogliato a commentare dove ci sono già molti commenti piuttosto che nella sezione in cui invece non ce ne sono. Potrebbe anche verificarsi però la situazione opposta con persone che preferiscono magari commentare su Facebook visto che su Blogger e su Google+ ci sono già troppi commenti per mettere il loro contributo maggiormente in evidenza. In ogni caso la presenza del contatore di commenti rappresenta sicuramente un incentivo a interagire.

Illustrerò due modi di installazione di questa personalizzazione. Il primo per coloro che non avevano ancora installato il sistema multiplo di commenti e il secondo per quelli che invece lo avevano già fatto. Dopo aver salvato il template si va su Modello > Modifica HTML e si digita Ctrl+F (OS Windows). Nella casella di ricerca che si apre si incolla la riga

<b:include data='post' name='post'/>

e si pigia su Invio per cercarla nel modello. Subito sotto si incolla questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='com-header'>
<div class='contatore-commenti'>
<div align='center'>
<div class='comment-google'><div class='g-commentcount' data-color='#666666' data-font-family='arial' data-font-size='13px' data-preexisting_count='0' expr:data-href='data:post.url'/></div>
<div class='comment-blogger'><data:post.numComments/> commenti</div>
<div class='comment-facebook'><fb:comments-count expr:href='data:post.url'/> commenti</div>
</div>
</div>
  <style>.contatore-commenti {padding: 5px; margin-left:5px; background: #edeaea; margin-top: 5px; line-height: normal; vertical-align: top; font-size: 13px; font-family: Arial; margin: 0 2px 15px 10px; }
.comment-blogger, .comment-google, .comment-facebook { padding-left: 18px; height: 16px; display: inline-block; width: 120px; }
.comment-blogger { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmeR5-YOk52yRR5QeYeItKksWT5kJEW51jt-wesB49MfkYGdIGvwnSN2kJGUnqZ5Wmjlqz3obvWTPdWzjAVM1rkgTcAsYWzHed7FjPrk5fAkzftJhC6I9Gri-et4qsKKH6SOlj1y7b/s16/blogger-icon.png) no-repeat; background-size: 16px;}
.comment-google {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Wl-zKRWBfKuNlD6QMUe0Ak6K-dHehu4C2_oX9TVDoUgKpC4ok9M5YlblzJY8TpBAhAvSdhGiQnJPHgE8anlNP0jh4PTAtylgyhps2eMTdQzSSft8RhbEQ91uA-g3mwgibbDUiFZ7/s16/googleplus-icon.png) no-repeat;background-size: 16px; vertical-align: top; line-height: normal;}
.comment-facebook { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj034173kal1nIlgwK-dbEmGI1-9-r_CfR6ylDanJTbX3O2-oPXkZtAQcVSfBYfQONQE1LYRRuvOFOf9vvPwc_HTyFkcPGFejH2G90_8Oi3ec-tO7ANWJF-0XiH7x6yKs_lDEaB5iUr/s32/facebook.png) no-repeat; background-size: 16px; vertical-align: top; line-height: normal;}
.comment-total { font-size: 13px; vertical-align: top; display: inline-block; }
.comment-total div, .comment-google div, .comment-facebook div { vertical-align: top !important; } </style>
<div align='center' style='padding-top: 5px;font-size: 16px;'><b>Per commentare scegli il sistema che più ti piace:</b></div>
</div>
<div class='FB_GP_B_comments'>
<script language='javascript' type='text/javascript'>
function show(id) {
var oc = document.getElementById(id).style;
hide();
oc.display = &quot;block&quot;;
}
function hide() {
document.getElementById(&#39;gpluscomments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;comments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;FBcomments&#39;).style.display = &quot;none&quot;;
}
</script>
<style type='text/css'>
#com-header {width: 550px;margin-left:10px;padding: 2px;float:left;margin-bottom: 10px;text-align: center; }
.FB_GP_B_comments {width: 550px;margin-left:10px; background:#edeaea ;margin-top: 5px; border: 1px solid rgb(229, 229, 229);
border-radius: 3px; }#comments, #FBcomments, #gpluscomments {display:none;}#goog{margin-left:65px;display:block;}#blog{margin-left:210px;margin-top:-45px;} #face{margin-left:355px;margin-top:-45px;}#FBcomments{margin-left:15px;margin-top:10px;}</style>
<div id='goog'>
<a class='googl' href='javascript:show(&apos;gpluscomments&apos;)'><img alt='commenti googleplus' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqBt1l_ThyphenhyphenUVZD_XOMrr33OtYWhiSN8Ow-mPCod1tjnwzy95CR-syuxnDnR_Qlhsq8dJdc8tvRPmHMMeMhhFj1WiRLsBI_4XW8FYhpmW06XGi5TuqcVLyI-H2PimuPN8zxUrhiXmht/s120/commenti-google-plus-%2521.png'/></a></div>
<div id='blog'>
<a class='blogg' href='javascript:show(&apos;comments&apos;)'><img alt='commenti blogger' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhP0SHpg4nFV8_qiU4rhiC2fv-XaIBAuABDM3JTJavW8slB_b23iP3HRR-gVsWLNhUbsc8wSjNOGHpy0qDD7T9uKVM-CbzjBX0z3Pft8Pkn3CgPd6gEyZR6Wj9jA9ES3FyqHkLR1VQ/s120/commenti-blogger-1.png'/></a></div>
<div id='face'>
<a class='faceb' href='javascript:show(&apos;FBcomments&apos;)'><img alt='commenti facebook' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgVP2dAVenlcNXwGusR36EzTWYupjVDoNhdxcZhpQlkQRKyAZhTc7TZk5YYkuaveOwywuQvrTbtp2EMjGdpv4hl1FVruQilIQBQAB49axh8j_4Ca263OSIP7qYF3orF-Bvv-HXEZJt/s120/commenti-facebook-1.png'/></a></div>
<div class='s_commenti' id='gpluscomments'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>
<div class='s_commenti' id='FBcomments'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='520' expr:href='data:post.canonicalUrl'/></div>
</div>
</b:if>

Le personalizzazioni di colore blu sono il testo che viene visualizzato nel riquadro e possono essere modificate a piacere. Possono anche essere cambiati i codici dei colori per rendere il rettangolo maggiormente intonato al nostro sito. Gli URL colorati di rosso rappresentano le icone del contatore di commenti mentre gli URL colorati di viola sono le icone su cui si deve cliccare per selezionare il sistema di commenti. È anche possibile modificare la larghezza dei moduli settata in 550 pixel. 

Si cerca poi la riga che inizia con <body … > e che può variare da template a template. Subito sotto questa riga si incolla questo secondo codice

<div id='fb-root'/><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = &quot;//connect.facebook.net/it_IT/all.js#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Infine si cerca la riga </head> e subito sopra si incolla questo ultimo codice

<meta content='parsifal32' property='fb:admins'/>
<meta content='362600930477422' property='fb:app_id'/>
<script language='javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

Finalmente si salva il modello.

PERSONALIZZAZIONI JQUERY E FACEBOOK

Se nel vostro template fosse già presente la libreria JQuery è consigliabile di fare a meno di incollare le righe evidenziate di giallo. Il sistema di commenti di Facebook merita qualche considerazione ulteriore. Infatti per poter moderare i commenti è opportuno creare una applicazione specifica per il sito. Nel terzo codice vanno quindi inseriti l'username o l'ID del profilo e l'ID della applicazione che ci sarà fornita dallo stresso Facebook.

Nel primo codice potremo scegliere il modulo per i blog scuri sostituendo dark a light in data-colorscheme='light'. È anche possibile in data-num-posts='5' configurare il numero di commenti visibili.  Infine si può sostituire it_IT per cambiare la lingua di visualizzazione.

INSERIRE I CONTATORI DI COMMENTI

Se avevate già installato questo sistema di commenti multiplo con il tutorial linkato all'inizio del post per aggiungere i tre contatori di commenti basta cercare nel modello la riga

<div id='com-header'>

e subito sotto incollare questo codice

<div class='contatore-commenti'>
<div align='center'>
<div class='comment-google'><div class='g-commentcount' data-color='#666666' data-font-family='arial' data-font-size='13px' data-preexisting_count='0' expr:data-href='data:post.url'/></div>
<div class='comment-blogger'><data:post.numComments/> commenti</div>
<div class='comment-facebook'><fb:comments-count expr:href='data:post.url'/> commenti</div>
</div>
</div>
  <style>.contatore-commenti {padding: 5px; margin-left:5px; background: #edeaea; margin-top: 5px; line-height: normal; vertical-align: top; font-size: 13px; font-family: Arial; margin: 0 2px 15px 10px; }
.comment-blogger, .comment-google, .comment-facebook { padding-left: 18px; height: 16px; display: inline-block; width: 120px; }
.comment-blogger { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmeR5-YOk52yRR5QeYeItKksWT5kJEW51jt-wesB49MfkYGdIGvwnSN2kJGUnqZ5Wmjlqz3obvWTPdWzjAVM1rkgTcAsYWzHed7FjPrk5fAkzftJhC6I9Gri-et4qsKKH6SOlj1y7b/s16/blogger-icon.png) no-repeat; background-size: 16px;}
.comment-google {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Wl-zKRWBfKuNlD6QMUe0Ak6K-dHehu4C2_oX9TVDoUgKpC4ok9M5YlblzJY8TpBAhAvSdhGiQnJPHgE8anlNP0jh4PTAtylgyhps2eMTdQzSSft8RhbEQ91uA-g3mwgibbDUiFZ7/s16/googleplus-icon.png) no-repeat;background-size: 16px; vertical-align: top; line-height: normal;}
.comment-facebook { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj034173kal1nIlgwK-dbEmGI1-9-r_CfR6ylDanJTbX3O2-oPXkZtAQcVSfBYfQONQE1LYRRuvOFOf9vvPwc_HTyFkcPGFejH2G90_8Oi3ec-tO7ANWJF-0XiH7x6yKs_lDEaB5iUr/s32/facebook.png) no-repeat; background-size: 16px; vertical-align: top; line-height: normal;}
.comment-total { font-size: 13px; vertical-align: top; display: inline-block; }
.comment-total div, .comment-google div, .comment-facebook div { vertical-align: top !important; } </style>

Come in precedenza possono essere modificati alcuni parametri e le icone che sono state settate con dimensione di 16 pixel. Si salva il modello ed è fatta. I contatori di commenti sono a cura rispettivamente di Blogger, Google+ e Facebook e sono rappresentati dai tre tag colorati di viola. In certi casi ci vuole un po' di tempo per il loro aggiornamento che non sembra in tempo reale.

Fonte | Blogger Code -