Come inserire i meta di Open Graph di Facebook nel modello di Blogger per utilizzarli con tutti i social plugin.
Facebook ha introdotto Open Graph già nel 2010 ma recentemente è stato ampliato per lanciare nuovi prodotti, aumentare la gamma di oggetti da condividere e consentire di integrare tutte le pagine web con l'esperienza di Facebook. Dopo aver creato una applicazione relativa a un sito, le azioni ivi compiute verranno mostrate nella Timeline, nel flusso delle Notizie e nel Ticker.
Associando una applicazione a un sito web, i visitatori vi potranno effettuare delle azioni come se fosse una vera e propria pagina di Facebook. Ho già avuto modo di illustrare come si fa a creare una applicazione di Facebook e come inserire il javascript localizzato in italiano una volta per tutte in modo da evitare che lo si debba fare tutte le volte che installiamo un plugin come il Mi Piace, il Like Box, le Attività Recenti, gli Articoli Consigliati, ecc.
Ricordo brevemente che bisogna andare su Facebook Developers, cliccare in alto a destra su Crea applicazione, digitare il nome della app, mettere la spunta sulla accettazione delle condizioni e cliccare su Continua. Successivamente occorre andare su Edit Settings per compilare i campi con particolare riguardo all'URL del nostro sito e al suo nome
Da notare che in App Domains va inserito l'URL del sito senza http:// iniziale e slash ( / ) finale mentre in Indirizzo del sito va incollato l'URL completo. In alto sarà visibile l'App ID insieme all'App Secret
Insieme all'ID della applicazione ci vuole anche l'ID utente che, se avete optato per il VanityURL, potrà sempre essere ricavato cliccando su una qualunque foto di un vostro album e copiando dalla barra del browser il numero che viene dopo fbid=
Dopo che si sono ottenuti questi due dati, gli utenti di Blogger possono andare su Modello > Backup/Ripristino e salvare il modello completo per ragioni di sicurezza. Dopo essere tornati su Modello > Modifica HTML > Procedi, nella parte alta dello stesso si cerca il blocco di codice
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
e si modifica in questo modo
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>
dove si è semplicemente inserito la stringa colorata di rosso. Dobbiamo quindi aggiungere tra i due tag <head> e </head> i Built-in Objects Types. Per essere sicuri che non vadano a interferire con un altro codice solitamente si preferisce aggiungere i nuovi tag subito sopra a </head>. Per ogni meta è associata una property e un content. In Blogger c'è tutta una serie di tag specifici che individuano in modo dinamico i contenuti da inserire. Per esempio data:post.url rappresenta il Permalink dei post mentre data:blog.title è il nome del blog. Si incolla quindi sopra a </head> questo codice
<!-- Facebook Open Graph Start -->
<meta content='ID_UTENTE' property='fb:admins'/>
<meta content='ID_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='URL_LOGO_BLOG' 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 End -->
<meta content='ID_UTENTE' property='fb:admins'/>
<meta content='ID_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='URL_LOGO_BLOG' 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 End -->
dove devono essere inseriti
- L'ID del nostro Profilo su Facebook
- L'ID della applicazione che abbiamo creato
- L'immagine da visualizzare come miniatura su Facebook di default (URL_LOGO_BLOG) quando nella pagina dell'articolo non siano presenti immagini
- La lingua del blog. Per un blog in lingua inglese si sostituisce it_IT con en_US.
Si salva il modello. Se vogliamo inserire anche lo script di Facebook nel modello in modo da aggiungere i plugin con i tag senza script, dobbiamo cercare la riga <body> nei vecchi modelli e
<body expr:class='"loading" + data:blog.mobileClass'>
nei template più recenti. Subito sotto si incolla questo codice specifico per Blogger
<!-- 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 la localizzazione in italiano it_IT può essere sostituita da quella in un'altra lingua mentre si inserisce l'ID della applicazione che si è creato in precedenza. Dopo aver predisposto il nostro template in questo modo si potranno inserire tutti i plugin di Facebook senza ulteriore javascript. Se si installa il Mi Piace, chi ci cliccherà sopra, condividerà il contenuto della pagina nella sua Bacheca immediatamente e senza bisogno di altre azioni.
Si aprirà un modulo in cui potrà opzionalmente digitare un commento che andrà a visualizzarsi accanto alla pagina del blog che è stata condivisa. Per configurare un qualsiasi plugin di Facebook, si va nella pagina dei Social Plugins, si sceglie quello desiderato, si configura inserendo i dati tra cui l'ID della applicazione quindi si copia e si incolla solo l'ultima parte del codice.
Osservazione conclusiva: Se in questa pagina cliccate su Ctrl+U si aprirà un'altra scheda del browser in cui sarà visualizzato il sorgente pagina vale a dire il codice HTML di questo post. La parte di codice dei metatag di Open Graph inserita nel modello prenderà questo aspetto
in cui si vede come i tag generici di Blogger sono stati sostituiti dai valori relativi a questo post.
Osservazione conclusiva: Se in questa pagina cliccate su Ctrl+U si aprirà un'altra scheda del browser in cui sarà visualizzato il sorgente pagina vale a dire il codice HTML di questo post. La parte di codice dei metatag di Open Graph inserita nel modello prenderà questo aspetto
in cui si vede come i tag generici di Blogger sono stati sostituiti dai valori relativi a questo post.
ciao Ernesto scusami mi sto scervellando con una cosina che è fuoriluogo su questo post, ma non riesco a venirne a capo..
RispondiEliminase hai modo di visualizzare il mio blogghino
www.iconadeironchi.com noterai che utilizzo il modello simple di blogger con un corpo del blog omogeneo. alla fine del blog si può notare la distanza del corpo del blog dallo schermo, mentre nella parte dell'header è attaccato.. come posso staccarla facendo sì che si visualizzi come nel footer? grazie in anticipo
@GaiaVincenzi
EliminaTi incollo l'URL del post che serve per diminuire lo spazio tra il top della pagina e l'header
http://www.ideepercomputeredinternet.com/2011/02/come-eliminare-lo-spazio-superiore-nei.html
Tu hai il problema opposto quindi invece di usare un numero negativo puoi usarne uno positivo tipo
.content {
margin-top:30px !important;
}
grazie mille,fatto!
EliminaErnesto, scusami se ti disturbo: non riesco a trovare né la riga body né la riga body expr:class='"loading" + data:blog.mobileClass'.
RispondiEliminaPossibile?
@# Forse non hai ancora preso pratica con il nuovo Editor HTML
Eliminahttp://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
no, ho anche ricontrollato, ho cercato tutte le istanze di "body" ma una riga uguale non l'ho trovata.
EliminaL'unica che somiglia, mi pare, è:
body class='loading'
b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'
@# La riga giusta è l'unica che inizia così
Elimina<body
Ce ne deve essere una sola per forza. E' l'inizio della parte visibile della pagina HTML
Ciao Ernesto come posso trovare URL logo blog?
RispondiElimina@# Puoi creartelo e caricarlo su Picasa oppure usare l'header o intestazione del blog. Vai con il destro del mouse sulla immagine di intestazione quindi su Copia URL Immagine
EliminaSto provando su un blog di prova ad installare i commenti di Facebook e sembra che non sono più funzionanti, questo vale solo per Blogger mentre su Wordpress funziona con questo metodo, ho provato tutte le possibili combinazioni dei tuoi post precedenti e non solo. Secondo me Blogger con la nuova modifica ha fatto in modo che nei nuovi blog non funzionano mentre chi l'aveva inserito già da prima continua a funzionare. Non lo dico tanto per dire perché a Marzo 2013 funzionava bene mentre ora che ho rifatto lo stesso procedimento non funziona. Magari mi sbaglio è da 2 ore che faccio tentativi.
EliminaSi sono moltiplicate le linee di codice, in taluni casi ci sono 4 occorrenze. Il modello poi è stato tutto rimescolato. È più difficile, bisogna prenderci pratica. Leggi qui
Eliminahttp://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
@#
I tag li trovo tutti, d'altronde c'è solo quel piccolo codice da aggiungere, trovare /head e body... però non va lo stesso. Secondo me l'hanno fatto apposta, penso che chi lo sta usando e toglie il codice, se lo rimette non gli funziona più, magari mi sbaglio. Grazie lo stesso.
EliminaSalve, avevo un dubbio : non sono sicuro di aver inserito correttamente l'ID Utente, anche perchè non ho capito se va inserito quello della pagina facebook che gestisco o quello di amministratore, ovvero quello del profilo personale.
RispondiEliminaCredo sia importante, perchè condividendo i link su facebook il problema non è risolto. Ho però notato che l'anteprima viene mostrata in altri siti, e prima non lo faceva. Anche se l'immagine mostrata è piccola.
Grazie in anticipo
Va messo l'ID del Profilo meglio se è un VanityURL cioè se hai scelto un nome utente al posto del numero identificativo. Leggi anche qui
Eliminahttp://www.ideepercomputeredinternet.com/2013/07/facebook-social-plugin.html
@#
Grazie per la risposta tempestiva, gentilissimo. E come risolvo il problema delle immagini 200x200 che mi risulta in fase di debug ?
EliminaCiao Ernesto!
RispondiEliminaCi sono variazioni ad oggi (23 Ottobre 2015) sulle indicazioni che hai riportato su questo post per inserire gli Open Graph?
Seguendo le tue indicazioni riportate in un altro tuo post (scusa ma non ricordo quale è passato parecchio tempo!) avevo aggiunto questo blocco di codice:
xmlns:fb='http://www.facebook.com/2008/fbml'
in questo post suggerisci di aggiungere questo blocco di codice:
xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>
sono la stessa cosa? Scusa ma (come avrai intuito) non me ne intendo molto. Non vorrei fare pasticci.
Grazie mille
Moira
Sì. La prima parte del codice quella che modifica la prima parte del template non devi più considerarla, per il resto credo sia tutto OK. Comunque fai riferimento a questo post
Eliminahttp://www.ideepercomputeredinternet.com/2015/08/facebook-modulo-commenti-blogger-moderazione.html
in cui si fa riferimento ai commenti di Facebook ma c'è anche il codice aggiornato Open Graph
@#
perchè quando collaudo il codice dalla pagina di facebook developers mi restituisce questo errore?
RispondiEliminaObject at URL xxx of type 'article' is invalid because it specifies multiple 'og:url' values: xxxxxx
Ti dico subito che anche a me Facebook Debugger restituisce dei test non perfetti. L'importante è che non ci siano warning di colore rosso e che l'anteprima della condivisione sia giusta. Dal messaggio pare che tu abbia delle metatag multiple. Ti consiglio di cercarle e di eliminarle dopo aver salvato il template. Poi segui questi due post che sono i più aggiornati sul tema
Eliminahttp://www.ideepercomputeredinternet.com/2016/03/facebook-app.html
http://www.ideepercomputeredinternet.com/2016/03/facebook-metatag-open-graph-markup-blogger-template.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
EliminaCome posso risolvere? Ps: anche rimuovendo l'html che riporta alla pagina Facebook il problema non si risolve