Pubblicato il 17/10/12 - aggiornato il  | 19 commenti :

Come inserire nel template di Blogger i tag Open Graph Facebook.

Come inserire i metadati e lo script dell'Open Graph di Facebook nel modello di Blogger.
Facebook ha introdotto Open Graph nel 2010, si tratta di un protocollo per estendere le funzionalità di Facebook a tutti i siti web che lo adotteranno. Quando si mettono nel sito i bottoni del Mi Piace o il Like Box in ultima analisi non facciamo altro che utilizzare Open Graph.

I tecnici di Facebook hanno messo a disposizione degli webmaster una serie di metatag da inserire nel codice del sito per usufruire delle funzionalità di Open Graph. Questo è utile per poter caricare tutti i widget e i pulsanti di Facebook in modo asincrono per aumentare la velocità di caricamento e per acquisire in modo più corretto le descrizioni e le immagini dei post che vengono condivisi.

Prima di inserire i metatag nel modello di Blogger occorre risalire all'ID del nostro Profilo su Facebook e creare una applicazione specifica per ciascun sito che amministriamo. Il nostro ID può essere lo stesso per tutti i blog mentre l'ID della applicazione deve essere univoco e collegato all'URL del sito.

Dopo che si sono acquisiti ID del Profilo e ID della applicazione può anche essere utile ottenere l'URL del logo o della favicon del blog. Quando abbiamo a disposizione tutti i dati si va su Modello > Modifica HTML > Procedi, si cerca la riga </head> e, subito sopra, si incollano i seguenti metadati

<!-- Facebook Open Graph Inizio -->
<meta content='ID_DEL_PROFILO' property='fb:admins'/>
<meta content='ID_DELLA_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='ID_DEL_LOGO' 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 devono essere personalizzati i dati in rosso. Se si vuole inserire una volta per tutte anche lo script di Facebook per non doverlo fare tutte le volte che installiamo un nuovo bottone o un nuovo widget, subito dopo la riga  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>, o subito dopo </b:section> del blocco di codice successivo a quella riga che riguarda la Navbar, va incollato quest'altro codice

<!-- Facebook Open Graph Start -->
<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>
<!-- Facebook Open Graph End -->

Si salva il modello. Anche in questo caso va inserito l'ID della applicazione e la lingua utilizzata nel nostro sito (per l'inglese si mette en_US al posto di it_IT). Per inserire nel blog i vari plugin di Facebook quali bottoni, widget o commenti basterà incollare nel template o in un widget HTML/Javascript solo una o due righe di codice.


19 commenti :

  1. Puoi inserire anche una Demo di come viene una volta sistemato tutti i codici?
    Andrebbe bene anche un immagine, tanto per farmi un'idea...

    RispondiElimina
    Risposte
    1. @AndreaSapuppo
      La Demo è questo stesso blog in cui ci sono pulsanti Mi Piace, il Like Box e il Modulo dei commenti inseriti usando questa procedura
      http://www.ideepercomputeredinternet.com/2012/06/facebook-blogger-plugin-open-graph.html
      dopo che sono stati incollati nel modello i metadati e lo script di Facebook come illustrato in questo post

      Elimina
    2. Invece per quando riguarda il modulo dei commenti tramite Facebook, pensi sia utile o negativo? E soprattutto tu come ti stai trovando, ti commentano anche da li, oppure l'hai messo per cambiare un po' ? :)

      Elimina
    3. @AndreaSapuppo
      Il numero di commenti dipende dalla tipologia dei lettori del blog. In questo per il momento non sono molto numerosi. Tengo il modulo per un po' tanto appesantisce poco la pagina visto che lo script è sempre lo stesso degli altri. Dopo il test decido cosa fare.

      Elimina
    4. Su 2 diversi blog con wordpress io utilizzo solamente la seconda parte di codice, inserendo il mio ID. La prima parte non l'ho mai messa. Credo che la prima porzione di codice non sia così indispensabile.

      Elimina
  2. Ernesto

    grazie mille. finalmente ho capito perchè e da oggi rifunziona.

    quando non sono io che scelgo l'anteprima, ma magari un lettore che condivide un mio post, purtroppo la prima immagine che sceglie in automatico il sistema è quella dell'header, gigante.
    c'è per caso un modo per escluderla?

    grazie

    RispondiElimina
  3. caro ernesto ma è x forza necessario creare un applicazione facebook? io vorrei solo cambiare la miniatura del mio blog quando la gente condivide su facebook i miei post...

    RispondiElimina
    Risposte
    1. @# Non so se è assolutamente necessario. Dipende da Facebook. Ogni tanto cambiano qualcosa. Prova con questo sistema molto più semplice
      http://www.ideepercomputeredinternet.com/2012/05/come-inserire-il-mi-piace-di-facebook.html

      Elimina
  4. Quando inserisco il secondo codice sempre sopra a head mi esce errore, che il div non deve apparire all interno di head, dove sbaglio?

    RispondiElimina
    Risposte
    1. @# Non hai sbagliato te, ho sbagliato io. Ho corretto il post. Ora dovrebbe andare bene.

      Elimina
  5. Ciao Ernesto, questo codice per l'open graph non funziona sul mio sito. Le miniature degli articoli non le prende sempre, se non le prende non mi dà l'immagine impostata e come descrizione mi prende il testo presente sulla sidebar a destra. In pratica come se non ci fosse. Ho cercato su internet altri codici per l'open graph, ma nessuno funziona. sai dirmi da cosa può dipendere e come risolvere?

    RispondiElimina
    Risposte
    1. Purtroppo non è che so tutto :)
      Anche in questo sito ci sono diverse cose che non mo vanno a partire dall'avatar nelle ricerche. La procedura è quella, poi siamo tutti nelle mani dei server che fanno un po' quello che gli pare
      @#

      Elimina
    2. Per far riconoscere a Facebook gli elementi adeguati durante la ricondivisione ci sono altri metodi oltre all'open graph?

      Elimina
  6. È possibile fare in modo che nell'anteprima del post su FB sia visibile il titolo del blog dopo quello dell'articolo?

    RispondiElimina
    Risposte
    1. Certo. Segui questo tutorial
      http://www.ideepercomputeredinternet.com/2015/10/blogger-titolo-post-nome-blog-modello.html
      @#

      Elimina
  7. Ciao Ernesto dopo aver inserito sul mio sito il tasto mi piace e la mia pagina Facebook, l'immagine di anteprima dei miei articoli non si vede più e se si vede si vede in modo errato come mai? Facendo il test su debbuger di condividere mi da il seguente messaggio : Mancano le seguenti proprietà necessarie: og:url, og:type, og:title, og:image, og:description, fb:app_id

    Come posso risolvere? Ps: anche rimuovendo l'html che riporta alla pagina Facebook il problema non si risolve

    RispondiElimina
    Risposte
    1. Il post di riferimento è questo con il codice da usare per applicare lo script di Facebook. 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.
Info sulla Privacy