Pubblicato il 04/03/16e aggiornato il

Come aggiungere i metatag e il javascript SDK di Facebook a Blogger.

Come aggiungere nel modello di Blogger i metatag degli Open Graph Markup di Facebook per condividere correttamente titolo, miniatura e descrizione dei post.
Nell'articolo precedente abbiamo visto come creare una applicazione Facebook per un sito web che ci permetterà di avere l'ID della applicazione da utilizzare insieme agli altri dati per implementare i metatag di Facebook.  

Si tratta in sostanza di righe di codice che verranno rilevate da Facebook quando verrà condiviso un contenuto del nostro sito. Vediamo nel dettaglio come procedere per un blog su Blogger. Oltre all'ID della applicazione occorre anche avere l'ID del proprietario del Profilo Facebook e l'indirizzo dello stesso profilo. Inoltre bisogna avere caricato online una immagine di default da mostrare come miniatura qualora non fosse presente nessuna immagine nel post.

AZIONI PROPEDEUTICHE ALLA INSTALLAZIONE DEI METATAG


1) PREFERENZE DI RICERCA

Per i blog su Blogger prima di procedere dobbiamo essere sicuri di avere attivato le Preferenze di Ricerca.  Si va su Impostazioni > Preferenze di ricerca > Metatag > Descrizione > Modifica

preferenze-di-ricerca

e si digita una descrizione di un massimo di 150 caratteri degli argomenti trattati nel nostro sito. Quindi si va su Salva Modifiche. Questa descrizione è relativa a tutto il blog e sarà visibile su Facebook solo quando si condivide la homepage del sito. Dopo aver attivato le Preferenze di Ricerca, quando si creerà un post, sulla destra verrà visualizzata sotto Impostazioni Post il campo Descrizione della ricerca in cui digitare un riassunto dell'articolo

descrizione-della-ricerca

Si va poi su Completato. Questa descrizione sarà lo snippet che verrà visualizzato su Facebook quando si condivide l'articolo in oggetto.

2) MOSTRARE IL TITOLO POST PRIMA DEL NOME DEL BLOG

Come impostazione di default i titoli dei contenuti dei post hanno la struttura

NOME BLOG : TITOLO POST

che vogliamo modificare in questo modo

TITOLO POST | NOME BLOG

e che porterà a questo risultato

titolo-post-nome-blog

per avere il titolo del post prima del nome del blog non solo nei contenuti condivisi su Facebook ma soprattutto nei risultati di ricerca di Google.  Per questa operazione, dopo aver salvato il template, si va su Modello > Modifica HTML e si cerca questa riga di codice

<title><data:blog.pageTitle/></title>

che di solito si trova tra la decima e la quindicesima riga.  Si sostituisce tale riga con questo codice

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <title><data:blog.title/></title>
<b:else/>
  <title><data:blog.pageName/> |  <data:blog.title/></title>
</b:if>

quindi si salva il modello. Con questa modifica tramite l'introduzione di opportuni tag condizionali si differenzia la homepage dalle altre pagine del blog.

3) AGGIUNGERE IL CODICE SDK AL MODELLO 

Come illustrato nel post linkato all'inizio dell'articolo va inserito nel modello di Blogger il codice javascript SDK che servirà per installare i vari social plugin. Si va su Modello > Modifica HTML e si cerca la seguente riga

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

quindi subito sotto a questa si incolla il codice SDK con questa struttura

<!-- Facebook SDK Start -->
<div id='fb-root'></div>
<script>
 //<![CDATA[
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '116894568356960',
      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 dobbiamo inserire l'ID della app del sito al posto di quella colorata di rosso e opzionalmente en_US al posto di it_IT se si preferisce la lingua inglese. Si salva il modello.

AGGIUNTA DEI METATAG OPEN GRAPH MARKUP DI FACEBOOK


L'obiettivo è quello di fare in modo che Facebook riconosca titolo, descrizione, immagine e altri oggetti presenti nel nostro post. A questo scopo vengono usate le API Open Graph Markup che arricchite dai Tag dei dati per i layout di Blogger portano alla creazione di un codice come questo

<!-- Metatag Facebook Inizio -->
<meta content='https://www.facebook.com/parsifal32' property='article:author'/>
<meta content='parsifal32' property='fb:admins'/>
    <meta content='116894568356960' 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'/>
      <meta expr:content='data:blog.metaDescription' property='og:description'/>
      <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
        <b:else/>
        <meta content='https://lh3.googleusercontent.com/-SMxI9TtqpKA/UiPB9AuUYKI/AAAAAAAAADo/Z7FdOnU3H3Q/w640-h180-p-rw/Cover-googleplus3.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'/>
<!-- Metatag Facebook Fine -->

Si va su Modello > Modifica HTML e si incolla tale codice subito sopra alla riga </head>.

PERSONALIZZAZIONI


   1) Nella riga evidenziata di giallo dovete sostituire l'URL del mio profilo Facebook con quello vostro. L'ultima parte può essere un nick (parsila32) oppure anche un numero. In questo modo nelle condivisioni su Facebook verrà inserito il link al nome dell'autore del post

link-profilo-facebook   2) Nella riga <meta content='parsifal32' property='fb:admins'/> a parsifal32 va sostituita l'ultima parte dell'indirizzo del vostro profilo sia esso un username o un numero.

   3) Nella riga  <meta content='116894568356960' property='fb:app_id'/> al posto del numero colorato di rosso va inserito l'ID della applicazione che avete creato per il vostro sito seguendo le istruzioni del post linkato all'inizio di questo articolo.

   4) L'URL della immagine colorato di viola è quello del logo di questo sito. Va sostituito con l'indirizzo del logo del vostro blog. Tale logo deve avere dimensioni adeguate (≥ 400x400 pixel).

COME TESTARE CON FACEBOOK DEBUGGER

Dopo aver salvato il modello si deve testare il funzionamento di tali metatag. È lo stesso Facebook che ci dà lo strumento necessario. Si apre Facebook Debugger e si incolla l'URL di un post 

facebook-debugger
Si va quindi su Debug per verificare che i metatag siano stati rilevati correttamente

metatag-facebook-debugger
Se ci sono degli warning di colore rosso significa che qualcosa non ha funzionato bene. Un Warning come quello presente nello screenshot è trascurabile anche perché avverte che la proprietà 'og:description' deve essere esplicitamente prevista anche se può essere dedotta dagli altri tag.

In realtà la descrizione del post viene dedotta dalle Preferenze di Ricerca secondo le istruzioni illustrate anche in questo post. Non ho ancora trovato un modo per esplicitare metatag 'og:description' per Facebook ma non escludo di riuscirci in futuro. La descrizione è invece facilmente inseribile nei metatag per Pinterest e Twitter come mostrato nel post seguente


Se si scorrono verso il basso i risultati di Facebook Debugger

SNAGHTML4e94b3
si visualizzerà anche l'Anteprima della condivisione oltre agli altri metadati rilevati. Nei prossimi post inizieremo a prendere in considerazione l'installazione dei vari social plugin. Concludo ricordandovi di non testare con Facebook Debugger un post appena pubblicato ma aspettate un tempo ragionevole che potrebbe essere un quarto d'ora o anche di più per i siti meno indicizzati.

Aggiornamento: Ho risolto il problema della mancanza del tag og:description nel test con Facebook Debugger con l'aggiunta della riga evidenziata di verde




9 commenti :

  1. Grazie Ernesto,
    i tuoi post sono sempre utilissimi e ultra affidabili!

    RispondiElimina
  2. Buongiorno Ernesto. Ho seguito la tua guida passo

    per passo ma riscontro dei problemi. Sto usando il

    template "PICTURE WINDOWS" di Josh

    Peterson.Fatto tutto cio che dici in questa guida,

    quando faccio il debug da fb, mi dice che esiste gia

    un tag og:url che viene richiamato da qualche altra

    parte sul template. Usando il pulsante ispeziona

    elemento da chrome e poi da li cercando la parola "og:url" , scopro che ci sono dei metatag che non si trovano propriamente sul template ma a quanto pare vengono richiamati dall'esterno. Guardando e e cercando dall'editor del codice sorgente dentro blogger non c'è traccia di questi meta tag e non so come rimuoverli per sfruttare solamente quelli indichi in questa guida per la condivisione su fb. Come faccio a togliere questo

    conflitto tra i tag? Vorrei poter mantenere il

    template in questione. Soluzioni ? Grazie in anticipo

    e complimenti per il tuo sito. Grazie per tutte le

    guide che crei ;)

    RispondiElimina
    Risposte
    1. I Metatag di Facebook mi hanno già fatto venire il mal di testa :)
      1) Quando si fa il Debugger con Facebook i risultati non sono univoci. Magari il giorno dopo si ottengono risultati diversi dal giorno prima
      2) I post appena pubblicati non danno dei risultati attendibili. Bisognerebbe aspettare almeno un giorno
      3) In linea di massima però le condivisioni funzionano quasi sempre
      4) Ho notato che altri metatag come quelli di Pinterest possono interagire con quelli di Facebook. Togliendoli dal mio modello ho migliorato la situazione del Debugger
      http://www.ideepercomputeredinternet.com/2015/12/blogger-metatag-google-facebook-pinterest-twitter.html
      @#

      Elimina
  3. Facendo il debug di un post di blogger,mi esce fuori questo messaggio:
    The provided 'og:image' properties are not yet available because new images are processed asynchronously. To ensure shares of new URLs include an image, specify the dimensions using 'og:image:width' and 'og:image:height' tags
    Puoi darmi qualche suggerimento?

    RispondiElimina
    Risposte
    1. Mi dice qualcosa di simile anche a me. Dipende dal tag
      data:blog.postImageThumbnailUrl
      che indica come immagine del post la miniatura che però non ha dimensioni sufficienti. Sto studiando come risolvere. Se ci riesco ci faccio un nuovo post.
      @#

      Elimina
  4. Ciao Ernesto, sei sempre il riferimento numero uno per noi "bloggers", vorrei fare in modo che nell' anteprima non esca la descrizione del sito, è possibile?

    RispondiElimina
    Risposte
    1. Per non mostrare la descrizione del sito devi attivare le Preferenze di ricerca e modificare il modello come illustrato nei primi due capitoli di questo post. Se poi per descrizione intendi non la descrizione del sito ma quella del post allora segui queste istruzioni
      http://www.ideepercomputeredinternet.com/2016/09/blogger-metadescrizione-incipit-snippet-schemaorg.html
      @#

      Elimina
    2. intendo la descrizione del sito. Nella descrizione ho usato delle keywords che effettivamente mi portano delle visite tramite google, ma sono "sconvenienti" nel momento in cui appaiono in un post fb. Vorrei mantenerle nella descrizione ma non farle apparire nelle anteprime. Si possono modificare manualmente da fb desktop, ma oltre ad essere una perdita di tempo, questa funzione da mobile o da hootsuite non è prevista.

      Elimina
    3. Le keyword inserite nella descrizione del sito non dovrebbero vedersi nella condivisione di un post su Facebook. Si dovrebbe vedere solo la descrizione di ricerca inserita con l'Editor del post. Forse le hai aggiunte nel modello e quindi vengono rilevate automaticamente.
      @#

      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.