Come commentare contemporaneamente con Google+, Blogger e Facebook nei post di Blogger.

Come far scegliere i lettori se commentare su Facebook, Blogger o Google+ mostrando contemporaneamente i tre moduli dei commenti alla fine degli articoli su Blogger.

Aggiornamento del 9/12/2013: Ho pubblicato un nuovo post su questo sistema di commenti multipli in cui ho aggiunto anche un contatore di commenti per ciascuno dei tre moduli.

La piattaforma Blogger ha un suo sistema di commenti che è stato nel tempo reso più ricco con le risposte nidificate e più recentemente ha anche implementato la possibilità di attivare i commenti direttamente su Google+. D'altra parte ci sono siti che hanno notevoli interazioni con Facebook e che preferiscono avere anche il modulo dei commenti di Facebook senza dimenticare quelli che usano Disqus.

L'opzione di commenti che va bene all'autore del sito può non essere altrettanto apprezzata da una buona percentuale di lettori e viceversa. Il blog calcistico Amor Sevillista ha avuto l'idea geniale di organizzare le cose in modo da far scegliere ai lettori il modo in cui vogliono commentare. Nella zona dei commenti infatti vengono visualizzati tre banner in cui cliccare per selezionare il tipo di commenti da inserire. Ho tradotto in italiano questo interessante metodo apportando anche qualche modifica. Questa GIF credo sia esemplificativa del funzionamento di questa personalizzazione

Per l'installazione si deve innanzitutto salvare il template per un eventuale ripristino. Si va poi su Modello > Modifica HTML e si digita Ctrl+F per cercare questa riga

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

Subito sotto a tale riga si incolla questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='com-header'>
<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>

Dobbiamo adesso cercare la riga che inizia con <body   … > e che può essere diversa da modello a modello. Subito sotto a questa riga incolliamo lo script di Facebook per i commenti

<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>

In ultimo cerchiamo il tag </head> e, subito sopra, incolliamo questo terzo 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>

Infine salviamo il modello. Ci sono da fare numerose personalizzazioni che vado a elencare:

1. La scritta colorata di viola può essere cambiata così come le sue dimensioni font-size: 16px.
2. La larghezza del modulo è di 550 pixel e può essere modificata mentre il modulo dei commenti di Facebook è stato settato in 520 pixel di larghezza.
3. Il colore di sfondo e lo stile del bordo  può essere personalizzato mediante l'uso dei codici dei colori da sostituire rispettivamente a #edeaea e a border: 1px solid rgb(229, 229, 229)
4. Gli URL delle tre immagini colorati di rosso possono essere sostituiti da altri di vostro gradimento
5. Il modulo di Facebook può essere settato per i blog con sfondo scuro con data-colorscheme='dark' al posto di data-colorscheme='light'. Si può anche scegliere il numero di commenti da mostrare in data-num-posts='5'
6. Nel secondo codice si può sostituire la lingua italiana di Faceboo
   cambiando it_IT
7. Se abbiamo già installato nel modello un bottone o un social plugin di Facebook allora il secondo codice si può fare a meno di incollarlo sotto la riga <body ...> .
8. Nel terzo codice la riga evidenziata di giallo rappresenta JQuery e può essere tralasciata se fosse già presente nel vostro modello. 
9. Infine va inserito l'username di Facebook e l'ID di una applicazione creata appositamente per poter moderare i commenti.

Se non personalizzate il codice di cui al punto 8) i comenti di Facebook si vedranno ma non potrete moderarli perché non visualizzerete il pulsante Impostazioni con cui farlo.  

 

Nei moduli di Google+ e di Facebook ci sono delle caselle di controllo per pubblicare o meno i commenti postati anche sui due social network. In quello di Facebook si può scegliere di commentare anche con l'identità di una nostra pagina fan.