Pubblicato il 10/12/13e aggiornato il

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.

sistema-commenti-multipli
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://lh4.googleusercontent.com/-flX4T2xpXFE/UqXVWf_ZSGI/AAAAAAAAlJw/37ddBf-LGVs/s16/blogger-icon.png) no-repeat; background-size: 16px;}
.comment-google {background: url(https://lh6.googleusercontent.com/-YDBLE2bbyzk/UqXVhueW-UI/AAAAAAAAlJ4/hiL1DKKbt_s/s16/googleplus-icon.png) no-repeat;background-size: 16px; 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: 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://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;FBcomments&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 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://lh4.googleusercontent.com/-flX4T2xpXFE/UqXVWf_ZSGI/AAAAAAAAlJw/37ddBf-LGVs/s16/blogger-icon.png) no-repeat; background-size: 16px;}
.comment-google {background: url(https://lh6.googleusercontent.com/-YDBLE2bbyzk/UqXVhueW-UI/AAAAAAAAlJ4/hiL1DKKbt_s/s16/googleplus-icon.png) no-repeat;background-size: 16px; 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: 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 -




20 commenti :

  1. speriamo si sbrighino a rendere più personalizzabile il modulo dei commenti di Google Plus e di raggruppare tutto in esso oppure a rimuovere le restrizioni dei commenti di Blogger...

    RispondiElimina
  2. Volevo solo segnalare che a volte non si visualizza il box per commentare con Google+.

    RispondiElimina
  3. sei un grande, pensa che stavo per chiederti proprio se si potesse inserire un contatore....! Grazie!!!!!!!! :D

    RispondiElimina
  4. Approfitto per chiederti un'altra cosa: da ieri con questa personalizzazione non è più possibile lasciare commenti con l'opzione blogger (cliccando sul bottone non compare più il riquadro per scrivere), sai da cosa potrebbe dipendere.....? Grazie ;)

    RispondiElimina
    Risposte
    1. Non lo so. In passato è successo anche con Facebook e Google+ limitatamente a alcuni blog come puoi leggere in un commento qui sopra o in altri commenti nel post precedente poi tutto è tornato a posto. Nella Demo è tutto OK
      @#

      Elimina
    2. aspetterò che tutto torni funzionante allora, grazie lo stesso! :)

      Elimina
  5. Ciao! In primis volevo farti i complimenti! Grandi capacità e semplicità nello spiegare, bravo davvero! Premetto di andare OT con questo commento, ma non so a chi altri rivolgermi. Ho un problema con il mio blog, un problema causato da qualche modifica "recente" di blogger o facebook in quanto per motivi vari ho dovuto lasciare il blog per circa quattro mesi (ed era perfettamente funzionante), ora invece mi dà un problemino. Il problemino in questione gravita intorno alla condivisione dei post creati tramite Facebook, o meglio, il post me lo condivide, è solo che le miniature che mi propone non sono attinenti al post (che porta la sua specifica immagine). Ho provato a controllare in giro per trovare soluzioni, purtroppo quelle trovate o non funzionano più o non corrispondono più alla realtà...in pratica non so davvero come fare a risolvere questo problema. Spero in un tuo aiuto, grazie in anticipo!

    RispondiElimina
    Risposte
    1. Devi seguire le indicazioni di questo post
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      @#

      Elimina
    2. Grazie per l'aiuto! Purtroppo ho ancora un problemino nel creare l'app. Seguo il link che è presente nella guida e mi si apre una pagina, quindi sono andata alla ricerca della tua guida, purtroppo le due cose non coincidono più in quanto mi si apre una pagina dove mi sento completamente persa e non so come proseguire!

      Elimina
  6. Ciao, grazie per queste istruzioni dettagliatissime, che mi hanno permesso finalmente di personalizzare il mio blog, pur essendo una neofita. Volevo chiederti se sarebbe possibile rendere visibili i commenti, ora come ora sono nascosti, mi piacerebbe che fossero visibili, visto che sono mooooolto pochi per ora e il fatto di non vederli non incentiva in ogni caso la conversazione... ti ringrazio già in anticipo se potrai rispondermi

    RispondiElimina
    Risposte
    1. No. Il contatore dei commenti serve appunto per mostrare ai visitatori quanti sono stati i contributi e con quale sistema di commenti
      @#

      Elimina
    2. Ciao Ernesto!
      Ho aggiunto il contatore dei commenti già a due dei miei blog, ma solo ora mi sono accorta che non funziona con Facebook, solo con Blogger e G+. Se ci sono commenti con Facebook, in altre parole, il contatore non li rileva, rimane a 0..ho sbagliato qualcosa nell'istallazione?
      Grazie infinite ^_^

      Elimina
    3. Altri lettori hanno rilevato questo problema che dipende probabilmente dal fatto che Facebook considera diverso l'url del post dagli URL dei commenti che vi sono stati postati
      @#

      Elimina
    4. grazie per la spiegazione ^_^ ..ma quindi non c'è un modo per risolvere il "problema", giusto?

      Elimina
    5. Se trovo un modo ovviamente lo pubblico
      @#

      Elimina
    6. grazie mille!! competente e premuroso, come sempre ;-)

      Elimina
  7. Ciao Ernesto, ho utilizzato questo tutorial ed effettivamente funziona ma... Non mi piace che vengano conteggiati solo i commenti blogger, mentre per vedere gli altri, bisogna proprio cliccare sul link "commenti" (non so se sono riuscita a spiegarmi...)
    C'è per caso un modo per sistemare la cosa?

    Grazie :)

    RispondiElimina
    Risposte
    1. Questo credo sia il massimo si possa fare :)
      Onestamente non vedo il problema
      @#

      Elimina
  8. Scusami ma non funziona nel mio blog fa inserire solo da blogger.. Come mai?

    RispondiElimina
    Risposte
    1. Anche in questo caso la Demo funziona, altro non ti so dire
      @#

      Elimina

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.