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 == "item"'>
<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='"it_IT"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Facebook Open Graph Fine -->
<meta content='ID_DEL_PROFILO' property='fb:admins'/>
<meta content='ID_DELLA_APPLICAZIONE' property='fb:app_id'/>
<b:if cond='data:blog.pageType == "item"'>
<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='"it_IT"' 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='"loading" + 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 -->
<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.
Puoi inserire anche una Demo di come viene una volta sistemato tutti i codici?
RispondiEliminaAndrebbe bene anche un immagine, tanto per farmi un'idea...
@AndreaSapuppo
EliminaLa 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
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@AndreaSapuppo
EliminaIl 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.
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.
EliminaErnesto
RispondiEliminagrazie 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
@# Non mi viene in mente nulla di utile in tal senso
Eliminacaro 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@# Non so se è assolutamente necessario. Dipende da Facebook. Ogni tanto cambiano qualcosa. Prova con questo sistema molto più semplice
Eliminahttp://www.ideepercomputeredinternet.com/2012/05/come-inserire-il-mi-piace-di-facebook.html
Quando inserisco il secondo codice sempre sopra a head mi esce errore, che il div non deve apparire all interno di head, dove sbaglio?
RispondiEliminaGrazie mille per le risposte precedenti :)
Elimina@# Non hai sbagliato te, ho sbagliato io. Ho corretto il post. Ora dovrebbe andare bene.
EliminaCiao 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?
RispondiEliminaPurtroppo non è che so tutto :)
EliminaAnche 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
@#
Per far riconoscere a Facebook gli elementi adeguati durante la ricondivisione ci sono altri metodi oltre all'open graph?
EliminaÈ possibile fare in modo che nell'anteprima del post su FB sia visibile il titolo del blog dopo quello dell'articolo?
RispondiEliminaCerto. Segui questo tutorial
Eliminahttp://www.ideepercomputeredinternet.com/2015/10/blogger-titolo-post-nome-blog-modello.html
@#
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
RispondiEliminaCome posso risolvere? Ps: anche rimuovendo l'html che riporta alla pagina Facebook il problema non si risolve
Il post di riferimento è questo con il codice da usare per applicare lo script di Facebook. Altro non ti so dire :(
Elimina@#