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!
Elimina