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

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, sempre sopra a </head>, 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.