Pubblicato il 13/10/16e aggiornato il

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

commenti-facebook-blogger-googleplus

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='&quot;loading&quot; + data:blog.mobileClass'>

quindi subito sotto si incolla questo codice

<!-- Facebook SDK Start -->
<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>
<!-- Facebook SDK End -->

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

<meta content='ID_AMMINISTRATORE' property='fb:admins'/>
<meta content='ID_APPLICAZIONE' property='fb:app_id'/> 

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 == &quot;item&quot;'>
<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://lh4.googleusercontent.com/-flX4T2xpXFE/UqXVWf_ZSGI/AAAAAAAAlJw/37ddBf-LGVs/s16/blogger-icon.png) no-repeat; background-size: 14px;}
.comment-google {background: url(https://lh6.googleusercontent.com/-YDBLE2bbyzk/UqXVhueW-UI/AAAAAAAAlJ4/hiL1DKKbt_s/s16/googleplus-icon.png) no-repeat;background-size: 14px; vertical-align: top; line-height: normal;}
.comment-facebook { background: url(https://lh4.googleusercontent.com/-Us8s4ItKIQE/UqXW5apFMWI/AAAAAAAAlKM/2ZGaeZa_Q4U/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 = &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;comentariosFacebook&#39;).style.display = &quot;block&quot;;
}
</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(&apos;gpluscomments&apos;)'><img alt='commenti google' border='0' src='https://lh5.googleusercontent.com/-03ZyN8EIw1c/UmRT3ZoXvDI/AAAAAAAAj90/CqH8iPqsWe0/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://lh4.googleusercontent.com/-QcZ7jRPKxkk/UmRTzS2CxwI/AAAAAAAAj9k/HUUhxXw7gCk/s120/commenti-blogger-1.png'/></a></div>
<div id='face'>
<a class='faceb' href='javascript:show(&apos;comentariosFacebook&apos;)'><img alt='commenti facebook' border='0' src='https://lh4.googleusercontent.com/--gRIIun-g_8/UmRT1aUWobI/AAAAAAAAj9s/aaJ0z66lFbw/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 == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>

Subito sotto questo va incollato quest'altro codice

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

<script language='javascript' src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Si salva il modello.


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). Infine la famiglia di font Arial può essere cambiata con un'altra.




2 commenti :

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

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.