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

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

capre


  • La razza Romanov Le Pecore Romanov sono un prodotto di nicchia, almeno per quanto concerne l’Italia; sono tuttavia conosciute in tutt...
  • Razze ovine: le pecore migliori d’Italia https://www.noisiamoagricoltura.com/razze-ovine/#Razze_da_latte Sei un agricoltore che...
  • offerte di lavoro agricoltura allevamento pascolo pubblica il tuo annuncio qui
  • Capra Saanen Origine Originaria della Svizzera, si è diffusa in molti Paesi europei ed extra europei. E’ la tipica razza da allevamen...
  • Origine Originaria della Svizzera, si è diffusa in molti Paesi europei (in particolare in Francia e Germania) ed extra europei. In Itali...
  • Capra Dal Collo Nero Del Vallese Razza di origine incerta ma, pare, molto antica: alcuni la farebbero derivare dall’invasione del Vallese...
  • Titolo per questa foto?
  • capra murciana Origini La Capra Murciana è una razza che ebbe origine nel sud est della Spagna, dove è molto allevata. E’ stata espo...
  • Capra Kamori del Pakistan .. Capra Kamori del Pakistan Esageriamo. Che razza è? Kamori del Pakistan. Un esemplare ha sfiorato in una...
  • Capra Striata Grigionese Origine Razza caprina svizzera originaria del cantone dei Grigioni. E’ una delle sette razze caprine rico...