motore

acquista su amazon

Come installare in modo semplice nel modello di Blogger il modulo dei commenti di Facebook.




Continuo i tutorial sulla installazione dei Social Plugin di Facebook nel template di Blogger da farsi senza le complicazioni della creazione di applicazioni e dell'inserimento di metatag. Ricordo però che in questo modo non si potrà avere il completo accesso a tutte le funzionalità.

Dopo aver presentato il pulsante Condividi e ilbottone Mi Piace passo al tutorial per lavisualizzazione del modulo dei commenti alla fine del post prima del footer e quindi anche prima dei normali commenti di Blogger. Sarà possibile settare il numero di commenti postati su Facebook, la larghezza del modulo e scegliere lo stile per blog con sfondo chiaro o con sfondo scuro. Saranno possibile altre personalizzazioni che vedremo alla fine dell'articolo.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga che inizia con<body… che nei modelli più recenti ha questa struttura

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Subito sotto a questa riga si incolla il seguente 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 = &#39;//connect.facebook.net/it_IT/all.js#xfbml=1&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

Dove it_IT serve per la localizzazione in italiano mentre en_US è quella in inglese. Si tratta dello stesso codice inserito anche per il pulsante Mi Piace e per il bottone Condividi. È sufficiente inserirlo una sola volta per tutti i plugin di Facebook che vogliamo installare.

Sempre su Modello > Modifica HTML si clicca su Vai al widget > Blog1

vai-al-widget-blogger-editor-html

Si cerca adesso la sezione 

<b:includable id='post' var='post'>

e si clicca sulla freccetta nera a sinistra per visualizzare tutto il codice che vi è contenuto

commenti-facebook-editor

Si scorre il codice, o si clicca su Ctrl+F, per trovare la riga

<div class='post-footer'>

Subito sopra a questa si incolla questo nuovo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='text-align: center;'>
<div id='commentiFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='560' expr:data-href='data:post.canonicalUrl'/>
  </div></div>
</b:if>

nel modo mostrato in questo screenshot

modulo-commenti-facebook

Si salva il modello. Quando si aprirà un articolo alla fine del post verrà visualizzato il modulo di Facebook in cui i navigatori potranno commentare il post. Il commento oltre a essere visibile nel modulo sarà condiviso nel loro Profilo e sarà quindi visibile a tutti i loro amici sul social network

modulo-facebook

PERSONALIZZAZIONI DEL MODULO DEI COMMENTI DI FACEBOOK

   
   1) Le due righe colorate di viola sono i tag condizionali che impongono al modulo il vincolo di essere visto solo nei post. È opportuno lasciarli per non appesantire troppo la homepage e la pagina delle etichette. Nel caso il modulo fosse visibile anche nelle pagine statiche si possono aggiungere altri due tag condizionali per nasconderlo qualora fosse questa la nostra intenzione.

  2) data-colorscheme='light' è la configurazione per i blog con sfondo chiaro mentre data-colorscheme='dark' è quella per i siti con sfondo scuro

   3) In data-num-posts='5' si imposta il numero dei commenti che vogliamo lasciare visibili

   4) data-width='560' serve per impostare la larghezza del modulo in pixel

   5) <div style='text-align: center;'> e la sua chiusura </div> servono per centrare il modulo. Al posto di center possiamo mettere anche left e right con ovvio significato.

   6) Le due righe evidenziate di giallo possono anche essere tolte ma se lasciate possono servire perulteriori personalizzazioni. Se per esempio sopra alla riga </head> incolliamo questo codice

<style>
/* Stile Commenti Facebook */
#commentiFacebook {
margin-top:10px; /* Distanza dalla parte alta */margin-bottom:10px; /* Distanza dalla parte bassa */}
</style>

possiamo calibrare le distanze in alto e in basso del modulo dal resto del layout. Ovviamente possono essere inseriti altri parametri con tag come il background o il padding.

   7) Il lettore loggato su Facebook andando su Modifica potrà commentare come Profilo o selezionare una delle pagine fan da lui create per commentare con quella identità.

MODERAZIONE DEI COMMENTI


Con questa installazione il proprietario del sito non è in grado di moderare i commenti visto chenon è riconosciuto tale da Facebook. Se volgiamo utilizzare anche questa opzione dobbiamo andarecreare una applicazione specifica per il sito e ottenerne l'ID identificativo
  1. Developers Facebook Apps
  2. Come creare una applicazione e installare i metatag
All'inizio del template bisogna andare cercare il tag <html… che sarà una cosa di questo genere

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'xmlns:og='http://ogp.me/ns#'>

Se le righe colorate di rosso esistono già, come nel caso degli ultimi modelli lasciare tutto com'è altrimenti occorre aggiungerle. Si cerca quindi la riga </head> e, subito sopra, si incolla il codice

<!-- Facebook Open Graph Inizio -->
<meta content='parsifal32' property='fb:admins'/>
<meta content='687958031218259' property='fb:app_id'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
        <b:else/>
        <meta content='https://lh4.googleusercontent.com/-0L2P_yUFj3Q/T-lsE2iPfYI/AAAAAAAAY0I/RanQBNOCSig/s160/logo-ipcei.jpg' property='og:image'/>
        </b:if>
<b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
</b:if>
<meta expr:content='&quot;it_IT&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Open Graph Fine -->

dove sono da personalizzare il nome utente del Profilo Facebook, l'ID della applicazione e il logogenerico del sito qualora non esistessero immagini nei post. Cambiare quindi il primo codice

<div id='fb-root'/>
    <script>
   //<![CDATA[
      (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/all.js#xfbml=1&appId=687958031218259";
        fjs.parentNode.insertBefore(js, fjs);
      }
       (document, 'script', 'facebook-jssdk'));
  //]]>
</script>

dove quello in rosso è l'ID della nostra applicazione. Si salva il modello.  Se sono stati compilati tutti i campi della applicazione si potrà procedere alla moderazione dei commenti di Facebook cliccando sulla icona Impostazioni che sarà visibile solo per l'amministratore nella parte alta del modulo

commenti-facebook
Come installare in modo semplice nel modello di Blogger il modulo dei commenti di Facebook.
fiera uccelli

Commenti

google-playkhamsatmostaqltradent