Come mettere i commenti di Facebook su Blogger


Tutte le volte che Blogger fa degli aggiornamenti nel codice del modello è un bene dal punto di vista SEO perché vengono eliminati codici inutili e ne vengono aggiunti altri più utili ma le guide che gli esperti di Blogger scrivono nel web diventano nulle perché antiche, proprio come la guida su come inserire i commenti di Facebook su Blogger che come hanno segnalato alcuni lettori non è più funzionante, eppure i codici si trovano ugualmente ma c'è qualcosa che non va.

Anche voi vorreste un modulo dei commenti con la possibilità di moderarli come nell'immagine qui in basso? Allora seguite la mia guida passo passo e non ve ne pentirete.


Come nella guida precedente si deve creare un'applicazione su Facebook, tranquilli è Gratis! E' anche semplice crearla. Andate su Facebook Developers e createla senza commettere errori. Non dovete però incollare i codici presenti sull'altra pagina. Alla fine dovrete avere l'ID dell'applicazione che è un numero che vi servirà successivamente, per cui non chiudete la pagina.

Dato che si tratta di copiare diversi codici vi conviene anche salvare il modello in modo tale che in caso di errore potete ripristinarlo caricando il file appena scaricato.

La prima cosa da fare è andare su Modello > Modifica HTML, cliccare un colpetto sul codice e digitare Ctrl+F in modo da far apparire la casella di ricerca dei codici. Adesso cercate questo riga di codice:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Appena sotto dovete incollare quest'altro codice che serve per far funzionare i plugin di Facebook, e l'unica modifica che potete fare è cambiare la lingua it_IT inserendo per esempio quella inglese en_US.
<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>  
Adesso dovete cercare un nuovo codice, ma fate attenzione perché nel modello ce ne possono essere presenti più di uno:
<div class='post-footer'> 

Prima di questa riga di codice dovete inserire un altro codice ancora, che è il seguente:
<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> 

Adesso salvate il modello e controllato sotto uno dei post che avete pubblicato sia apparso il modulo dei commenti di Facebook. Nel caso in cui non appare provate a tagliare il codice appena sopra ed incollarlo sopra all'altro <div class='post-footer'> stavolta dovrà funzionarvi per forza perché se non appare significa che avete commesso altri errori.

Personalizzazioni

Quest'ultimo codice può essere personalizzato agendo sugli elementi del codice contraddistinti dal colore rosso.

center: in questo modo il modulo dei commenti è posizionato centralmente, se volete metterlo a sinistra sostituitelo con left, mentre se lo volete a destra con right.
light: si riferisce al colore del modulo dei commenti, in questo caso è chiaro ed è la coloritura standard, volendo potete cambiare il colore sostituendolo con la parola dark che sta per scuro.
5: è il numero dei commenti che volete mostrare, gli altri invece verranno immagazzinati per risparmiare spazio e permettere un caricamento più veloce.
560: è la larghezza del modulo dei commenti, conviene modificarla per adattarla al meglio alla larghezza che si ha dentro il post.

Se volete spostare il modulo dei commenti più in alto o più in basso dovete cercare questo codice ]]></b:skin> all'interno del modello. Subito prima dovete incollare:
#commentiFacebook {margin-top:10px}
Per variare la distanza del modulo dei commenti rispetto al testo dell'articolo. Oppure:

 #commentiFacebook {margin-bottom:10px}

Per variare la distanza del modulo dei commenti rispetto a ciò che viene dopo. Ovviamente aggiungendo un segno meno (-) subito prima del numero anziché aumentare potete diminuire la distanza, ed incrementando il numero la distanza subirà un mutamento maggiore.

Moderazione dei Commenti

Inserendo il modulo dei commenti in questo modo sarà perfettamente funzionante ma non avete la possibilità di vedere quanti commenti avete ricevuto recentemente. L'unico modo per poterli vedere è abilitare la moderazione dei commenti agendo sempre sul modello. Nelle prime righe del modello è presente questa riga:
xmlns:expr='http://www.google.com/2005/gml/expr'

Subito dopo e prima del tag di chiusura ">" dovete aggiungere quest'altro codice:
xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'

Probabilmente questa riga di codice è già presente, in questo caso passate avanti al codice successivo. Cercate </head> subito prima incollate quest'altro codice:

<!-- Facebook Open Graph Inizio -->
<meta content='id utente' property='fb:admins'/>
<meta content='id applicazione' 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='http://1.bp.blogspot.com/-shcv1H3Ini4/UiY_tAhihXI/AAAAAAAATqk/Nia_46mKj9Y/s1600/utente10.png' 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 -->

Sostituite l'id utente usando id di una immagine che possedete su Facebook oppure quella del vostro profilo. Per l'id dell'applicazione vi è stato spiegato ad inizio articolo come trovarla.

Adesso ricercate il primo codice di Facebook che avete inserito e sostituitelo con quest'altro:
<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=ID APPLICAZIONE";
        fjs.parentNode.insertBefore(js, fjs);
      }
       (document, 'script', 'facebook-jssdk'));
  //]]></script>

Sostituite ancora una volta ID APPLICAZIONE con il numero univoco della vostra applicazione. Ed è tutto, dopo milioni di codici avete finalmente il vostro modulo dei commenti di Facebook per Blogger. Anche se a detta di molti la moderazione dei commenti non appare per poter ritrovare i commenti dovrete recarvi in questo link:

https://developers.facebook.com/tools/comments/?id=id_applicazione

Se siete utenti di Blogger chi ve lo fa fare ad usare i commenti di Facebook? Avete uno spazio illimitato per i commenti e potete anche abilitare quelli anonimi o al massimo potete abilitare i commenti di Google Plus nettamente più adatti.


Argomenti più cercati

Seguici su

     



© Scuolissima.com - appunti di scuola online! © 2021, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies