Commentare a scelta con Blogger, Google+, Facebook e Disqus.

Come attivare contemporaneamente i commenti di Google+, Facebook e Disqus in un blog di Blogger.

L'autore del blog di lingua spagnola Amor Sevillista oltre a occuparsi di calcio e segnatamente della squadra del Siviglia spesso offre ai suoi lettori delle vere e proprie chicche per tutti coloro che usano la piattaforma Blogger. Avevo già ripreso il post su come commentare con Blogger, Google+ e Facebook che adesso è stato integrato anche con i commenti di Disqus.  Sarà in sostanza il navigatore a scegliere se commentare usando uno di questi quattro moduli. Evidentemente per poter inserire questa personalizzazione nel nostro sito su Blogger dovremo avere un account Google Plus, aver creato una applicazione Facebook per il nostro sito e essere registrati a Disqus anche con il nostro sito.

Dopo questa installazione alla fine dei post saranno visualizzate queste icone

su cui il lettore potrà cliccare sopra per scegliere il sistema di commento. Prima della installazione è sempre opportuno salvare il template per un eventuale ripristino. Si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla questo codice 

<!-- Commenti Blogger Google+ Facebook Disqus Inizio -->
<meta content='2738399055321' property='fb:admins'/>
<meta content='219038184942195' property='fb:app_id'/><script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/jquery-comentarios.js'/>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/amorcomentarios2.js'/>
<script src='http://connect.facebook.net/it_IT/all.js#xfbml=1'/><!-- Commenti Blogger Google+ Facebook Disqus Fine -->

Dove al posto degli ID colorati di viola dovrete mettere il vostro ID amministratore di Facebook e l'ID della applicazione creata per il sito. Successivamente pigiando Ctrl+F si cerca la riga

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

e subito sotto si incolla questo nuovo codice

<!-- Commenti Blogger Disqus Facebook Google+ Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center' style='padding-top: 5px;font-size: 16px; color: #666666;'><b>Per commentare scegli il sistema che più ti piace:</b></div>
<br/> <div class='coment'><style>.coment{margin-left:50px;}</style>
<div class='js-default-tab comments-tab' id='blogger-comments' title='Commenta con Blogger'>
Blogger
</div>
<div class='comments-tab disqusbutton' id='disqus-comments' onclick='load_disqus()' title='Commenta con Disqus'>
Disqus
</div><div class='comments-tab' id='fb-comments' title='Commenta con Facebook'>
Facebook
</div>
<div class='comments-tab' id='plus-comments' title='Commenta con gplus'>
Google+
</div> </div>
</b:if>
<div class='clear'/>
</div>
<div class='comments-page' id='plus-comments-page'>
<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='comments-page' id='disqus-comments-page'>
<div id='disqus_thread'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='disqus_thread'/>
<div id='disqus_loader' style='text-align: center'>
<script>
function load_disqus() {var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true; dsq.src = &quot;http://parsifal32.disqus.com/embed.js&quot;;(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq); var ldr = document.getElementById(&#39;disqus_loader&#39;); ldr.parentNode.removeChild(ldr); } </script>
</div>
</b:if>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments expr:href='data:post.url' num_posts='10' width='520'/>
</b:if>
</div><div class='comments comments-page' id='blogger-comments-page'>
<!-- Commenti Blogger Disqus Facebook Google+ Fine -->

dove si può scegliere l'espressione visualizzata sopra alle icone e si deve inserire il nostro username di Disqus al posto di parsifal32. Ora si cerca la riga </body> e subito sopra si incolla questo ultimo codice

<script type='text/javascript'>
    //<![CDATA[
    var disqus_shortname = 'parsifal32';
    (function () {
    var s = document.createElement('script'); s.async = true;
    s.type = 'text/javascript';
    s.src = '//' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
   //]]>
    </script>

dove anche in questo caso si sostituisce a parsifal32 il nostro nome utente su Disqus. Finalmente si salva il modello. Potete vedere una demo dell'hack creata dall'autore.

OSSERVAZIONI CONCLUSIVE

Volendo si possono eliminare i commenti di uno di questi quattro sistemi.
Eliminare i commenti di Blogger:
Si cancella il codice evidenziato di arancione e su Modello > Modifica HTML si incolla subito sopra la riga ]]></b:skin> il seguente codice
#comments{ display: none !important;}
Eliminare i commenti di Google+:
Si eliminano le righe evidenziate di rosso
Eliminare i commenti di Facebook:
Si cancellano le righe evidenziate di blu
Eliminare i commenti di Disqus:
Si cancellano le righe evidenziate di celeste e la terza parte del codice

Il margine sinistro di 50 pixel può essere modificato a piacere (margin-left:50px).

Per avere un completo controllo della personalizzazione si possono aprire nel browser i due javascript i cui URL sono colorati di rosso. Si clicca sulla scheda con il destro del mouse e si sceglie Salva con nome. Tali javascript potranno poi essere caricati sul nostro account Google Drive.