Come commentare a scelta su Blogger anche con Google+ e Facebook con contatore dei commenti.

Come far scegliere al lettore di commentare oltre che su Blogger anche con Google+ e Facebook con i contatori di tutti e tre i tipi di commenti.

Gli utenti della piattaforma Blogger possono abilitare anche i commenti di Google+ e di Facebook. I commenti di Google+ vengono abilitati dalla scheda Impostazioni -> Post e Commenti e Condivisioni -> Commenti di Google+ selezionando il Sì al posto del No.

La controindicazione di questa scelta è che dopo che si sono abilitati i commenti di Google+ quelli che abbiamo ricevuto su Blogger non sono più visibili. Un discorso diverso vale invece per Facebook visto che possiamo mostrare il modulo dei commenti di Facebook sopra o sotto a quelli di Blogger.

In questo articolo vedremo come risolvere brillantemente la questione e come dare la possibilità al lettore di scegliere tra commentare con Blogger, Google+ o Facebook. Inoltre sarà mostrato anche il contatore dei commenti per ciascuna delle 3 opzioni. Nella versione mobile saranno visualizzati solo i commenti di Blogger a cui opzionalmente potrà essere aggiunto anche il modulo di Facebook seguendo le indicazioni del post linkato in precedenza. L'aspetto dell'area dei commenti diventerà simile a questo

Per selezionare il tipo di commento il lettore non dovrà fare altro che cliccare su una delle tre icone visibili sotto la scritta che avverte della scelta. Sopra alle tre icone grandi ci sono le tre piccole con accanto il numero di commenti ricevuti rispettivamente su Google+, Blogger e Facebook.

COME ABILITARE I COMMENTI DI FACEBOOK

Prima di iniziare occorre abilitare i commenti di Facebook creando una applicazione specifica per il nostro sito. Il dato importante da considerare sarà l'ID della applicazione che è fondamentale per la moderazione dei commenti insieme all'ID del profilo utente.

Bisogna quindi installare lo script di Facebook se non lo si fosse già fatto per l'installazione di altri plugin come il Mi Piace, Invia, Condividi, ecc. Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga di codice

<body expr:class='"loading" + data:blog.mobileClass'>

quindi subito sotto si incolla questo codice

<div id="fb-root"></div>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
    FB.init({
      appId      : 'ID_APPLICAZIONE',
      xfbml      : true,
      version    : 'v2.5'
    });
};
(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 = "//connect.facebook.net/it_IT/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
//]]>
</script>

dove al posto di ID_APPLICAZIONE va messo l'ID della stessa ottenuto da Facebook. Dobbiamo adesso aggiungere i metatag che probabilmente avrete già nel modello visto che servono per condividere correttamente con Titolo, Miniatura e Descrizione i post su Facebook. Se non lo avete fatto potete consultare il post linkato in precedenza. I metatag essenziali per la moderazione dei commenti di Facebook sono

da incollare subito sopra alla riga </head>.

COME INSTALLARE I COMMENTI MULTIPLI CON CONTATORE

Sempre su Modello -> Modifica HTML con Ctrl+F si cerca questa riga

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

quindi subito sotto si incolla questo codice

<b:if cond='data:blog.pageType == "item"'>
<div id='com-header'>
<div class='comments-count-blo-goo'>
<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>.comments-count-blo-goo {padding: 5px;margin-left:10px;background: rgb(248, 248, 248); margin-top: 5px; border: 1px solid rgb(229, 229, 229);border-radius: 3px; 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: 110px; }
.comment-blogger { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmeR5-YOk52yRR5QeYeItKksWT5kJEW51jt-wesB49MfkYGdIGvwnSN2kJGUnqZ5Wmjlqz3obvWTPdWzjAVM1rkgTcAsYWzHed7FjPrk5fAkzftJhC6I9Gri-et4qsKKH6SOlj1y7b/s16/blogger-icon.png) no-repeat; background-size: 14px;}
.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: 14px; 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: 14px; 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='commentacon'>
<script language='javascript' type='text/javascript'>
function show(id) {
var oc = document.getElementById(id).style;
hide();
oc.display = "block";
}
function hide() {
document.getElementById('gpluscomments').style.display = "none";
document.getElementById('comments').style.display = "none";
document.getElementById('comentariosFacebook').style.display = "block";
}
</script>
<style type='text/css'>#gpluscomments{margin-left:10px}
#com-header {width: 550px;margin-left:10px;padding: 2px;float:left;margin-bottom: 10px;text-align: center; }
.commentacon {background:#edeaea;width: 550px;margin-left:10px; margin-top: 5px; } #comments, #gpluscomments {display:none;}#goog{margin-left:65px;display:block;}#blog{margin-left:210px;margin-top:-45px;} #face{margin-left:355px;margin-top:-45px;}#comentariosFacebook{margin-left:15px;margin-top:10px;}</style>
<div id='goog'>
<a class='googl' href='javascript:show('gpluscomments')'><img alt='commenti google' 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('comments')'><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('comentariosFacebook')'><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>
<div class='comentarios' 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>
</b:if>

Subito sotto a questo codice aggiunto si visualizzerà questo blocco di codice già presente nel template

<b:if cond='data:blog.pageType == "static_page"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>

Subito sotto questo va incollato quest'altro codice

<b:if cond='data:blog.pageType == "item"'>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='1' data-width='540' expr:href='data:post.url'/></div>
</b:if>

Non resta quindi che aggiungere la libreria jQuery se non fosse già presente nel template. Si cerca la riga </head> e si incolla questa riga di codice subito sopra

Si salva il modello.

Demo
Clicca qui

PERSONALIZZAZIONI

La larghezza dell'area dei commenti è stata settata a 550 pixel e quella dei commenti di Facebook a 540 pixel. Questi valori sono indicativi e possono essere modificati. Le tre icone grandi su cui cliccare e le tre piccole accanto al numero dei commenti hanno l'URL colorato di rosso e possono essere cambiate. Le scritte visibili sono colorate di blu ed è possibile modificarle. I colori di sfondo sono nel modello HEX e RGB e possono essere modificati. Per un colore bianco trasparente si opta per rgb(255,255,255). La famiglia di font Arial può essere cambiata con un'altra. Infine il colore di sfondo della scritta Per commentare scegli il sistema che più ti piace è determinato dal codice di colore #edeaea; che può essere sostituito con un altro (p.e. #fff; per uno sfondo bianco).

4 commenti :

Admin13 ottobre 2016 alle ore 23:38
ciao, spero di non essere stressante ma sono curioso. Ho visto che per 1,5€ al mese si puo migliorare il posizionamento del sito. E offerto da GoDaddy(una specie di Aruba). Allora essere piu visibili su google per soli 1,5€ al mese, ma quanto potrebbe essere efficiente sta cosa
RispondiElimina
Risposte
Unknown10 febbraio 2017 alle ore 22:26
Ciao Ernesto, si puo' cambiare il colore di sfondo del riquadro grigio, dove dice scegli il sistema che piu' ti piace?
RispondiElimina
Risposte

Aggiungi commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy