Integrare Facebook nel proprio sito Web

Facebook ha reso da qualche mese molto più semplici le procedure per integrare funzionalità del social network all'interno di blog o siti Web. Grazie alle novità introdotte, i Webmaster possono aggiungere funzionalità al proprio sito Web (come un semplice sistema di commenti), accedere ad informazioni statistiche sugli utenti che lo visitano, personalizzare la loro navigazione o aggiungere un vero e proprio sistema di registrazione.

In questo articolo introdurremo velocemente le novità della piattaforma e i suoi vantaggi e poi vedremo:

• Come integrare nel nostro sito un social plugin con iframe
• Come creare un'applicazione per abilitare l'SDK Javascript di Facebook
• Come integrare nel nostro sito un social plugin con XFBML
• Come includere le nostre pagine nel grafo sociale di Facebook
• Come validare la pagina quando si usano i meta-tag di Facebook
• Come seguire le statistiche delle interazioni generate sul proprio sito

In ultimo spiegheremo cosa è un grafo dal punto di vista di Facebook.

Le novità della piattaforma Facebook

Le novità introdotte alla conferenza F8 dello scorso Aprile sono sostanzialmente tre: i social plugin, il protocollo open graph e un nuovo modello di istruzioni con cui interagire con il database di Facebook (Graph API).

• I social plugin sono piccole porzioni di codice che rendono molto semplice l'integrazione in un sito Web di elementi Facebook: consentono ai visitatori di raccomandare una pagina web, di visualizzare cosa altri utenti o amici hanno raccomandato, di commentare una risorsa e così via. Tutto con una sola riga di codice HTML.
• Open graph è un protocollo, ossia un set di istruzioni condivise, che aggiunge uno strato semantico ai documenti presenti sul Web (le pagine), trasformandoli in oggetti con caratteristiche fisse (titolo, immagine, indirizzo, descrizione e così via) che possono essere poi integrati in Facebook.
• La Graph API è la piattaforma che include i nuovi metodi con cui i siti potranno interrogare Facebook per ricevere informazioni sugli utenti (sulle loro relazioni, sulle loro preferenze) e con cui potranno interagire con questi utenti, anche pubblicando sul loro flusso nuove informazioni.

I vantaggi dell'integrazione con Facebook

Il vantaggio principale è la possibilità di aumentare il numero di visitatori. Con i suoi 500 milioni di utenti (in crescita), Facebook è diventato uno degli ambienti più frequentati del Web. Ogni azione compiuta su un servizio Facebook integrato in un sito viene pubblicata sul profilo dell'utente e diventa "pubblica" per gli amici che potranno apprezzarla, commentarla o seguirne il link.

Secondo Compete, un servizio di rilevazione del traffico Web, Facebook negli USA è il primo "fornitore" di traffico su siti come MSN e Yahoo (prima di Google), mentre Typepad ha dichiarato lo scorso giugno che dall'integrazione del pulsante "Mi piace" di Facebook, i blog ospitati sulla sua piattaforma hanno ricevuto un incremento del traffico del 50 per cento.

I vantaggi ottenuti dipendono naturalmente dal modo viene progettata l'integrazione. Un blog potrebbe usare i social plugin per permettere agli utenti di Facebook di condividere i post preferiti e mostrare ad altri amici quello che hanno letto e apprezzato; un sito che offre recensioni di prodotti (ristoranti, film, software) dovrebbe usare l'open graph per stabilire relazioni fra il prodotto recensito e l'utente così da poter, ad esempio, inviare aggiornamenti quando il prodotto cambia.

Integrare i social plugin con iframe

I social plugin sono un set di estensioni costruite sulla Graph API che rendono semplice integrare alcune funzioni di Facebook all'interno di un sito Web.

Attenzione: negli esempi useremo sempre come Url https://www.html.it/ (http%3A%2F%2Fwww.html.it%2F nella sua forma "encodata"). Per adattare gli esempi alle vostre pagine dovrete naturalmente sostituire a https://www.html.it l'indirizzo della pagina Web in cui includere il codice. Nelle versioni iframe, quelle discusse in questa pagina, l'url del sito deve essere "encodata", lo si può fare facilmente online.

Il più basilare è il Like button, il "pulsante 'mi piace'". Per pubblicare accanto al titolo di ogni articolo un pulsante "mi piace" e permettere ad ogni utente di Facebook di condividere questa scelta sul suo profilo, è sufficiente includere il seguente codice nel punto della pagina che si desidera:

<iframe src="http://www.facebook.it/plugins/like.php?href=http%3A%2F%2Fwww.html.it%2F&locale=it_it" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:70px"></iframe>

Per ottenere il seguente risultato (impostato sulla pagina di questo articolo):

Ad ogni clic sul pulsante, un link al proprio articolo comparirà, a seconda delle opzioni, anche nella bacheca degli amiche di colui che lo ha cliccato:

Recommendations

Degno compagno del pulsante 'Mi piace' è il box delle raccomandazioni che si implementa con il codice di cui sotto:

<iframe src="http://www.facebook.com/plugins/recommendations.php?site=http%3A%2F%2Fwww.html.it%2F&locale=it_it" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:300px;" allowTransparency="true"></iframe>

Il risultato è un box in cui vengono elencate tutte le pagine condivise o raccomandate dai propri contatti o, nel caso non ve ne fossero, da altri comuni utenti che hanno visitato e interagito con il sito. Da notare l'aggiunta, nel codice, dell'istruzione locale=it_it, cosa che ci permette di visualizzare il box in lingua italiana.

Le pagine mostrate nel box sono quelle pubblicate all'interno del dominio specificato nel codice (nell'esempio qui sotto il dominio è webapp.html.it):

Activity Feed

Questo plugin può mostrare sia raccomandazioni, allo stesso modo di quello sopra, sia le attività che voi o i vostri amici avete generato sul sito visitato. Le attività verranno mostrate solo quando si è eseguito il login con Facebook. Per gli utenti non collegati il box mostrerà gli stessi contenuti del plugin Recommendations.

Per includere l'Activity Feed basta includere il seguente codice:

<iframe src="http://www.facebook.com/plugins/activity.php?site=http%3A%2F%2Fwwww.html.it%2F&locale=it_it" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:300px;" allowTransparency="true"></iframe>

Per ottenere il seguente box:

Se siete collegati a Facebook, e voi o qualcuno dei vostri amici ha interagito con il sito webapp.html.it (magari facendo clic sul pulsante "mi piace" in fondo a questa pagina), dovreste vedere in alto queste attività, altrimenti visualizzerete delle semplici raccomandazioni.

Ma queste sono le implementazioni di base dei social plugin. Più opzioni e una maggiore efficacia si può ottenere usando il linguaggio Xfbml.

Creare un'applicazione per il Javascript SDK

Per ottenere una maggiore versatilità è necessario usare la versione XFBML del codice. I vantaggi sono diversi: una scrittura più pulita del codice, aggiornamenti dinamici grazie a Javascript, dimensioni del box "Mi piace" variabili (nell'iframe l'altezza e la larghezza sono fisse). Con XFBML c'è inoltre la possibilità di pubblicare un commento quando si condivide una pagina attraverso il pulsante "Mi piace", cosa che nella versione iframe è concessa solo se si adotta una dimensione di almeno 450 pixel in larghezza.

Per poter utilizzare codice XFBML nella pagina è necessario tuttavia creare preventivamente un'applicazione Facebook e includere un po' di codice JavaScript.

Andate sulla pagina dell'applicazione Sviluppatore di Facebook, consentitele l'accesso (se non lo avete già fatto) e create una nuova applicazione facendo clic sul pulsante Imposta Nuova Applicazione in alto a destra. Inserite il nome dell'applicazione e, nella pagina successiva, fate clic sulla voce Connettiti nel menu di sinistra indicando nel campo Connetti URL l'indirizzo della homepage del vostro sito e nel campo Base Domain il dominio su cui si desidera attivare l'applicazione.

Per HTML.it le impostazioni sono quelle che vedete nella figura sotto. Come Base Domain abbiamo impostato html.it e non www.html.it perché la nostra applicazione dovrà essere attiva non solo nelle pagine sotto il dominio www.html.it, ma anche nei sotto-domini (come linux.html.it, php.html.it e così via).

Segniamoci adesso l'Id della nostra applicazione che ci servirà quando andremo a includere il codice Javascript. Lo si trova facendo clic, sempre dalla schermata in figura 2, sulla voce Principale: il dato si chiama ID applicazione (figura 3).

L'id va incluso al posto della voce ID_APPLICAZIONE (riga 4) nel seguente codice Javascript che serve a fornire alla pagina le istruzioni per la connessione con Facebook:

<script>

window.fbAsyncInit = function() {

FB.init({appId: 'ID_APPLICAZIONE', status: true, cookie: true,

xfbml: true});

};

(function() {

var e = document.createElement('script'); e.async = true;

e.src = document.location.protocol +

'//connect.facebook.net/it_IT/all.js';

document.getElementById('fb-root').appendChild(e);

}());

[/code"></script>
L'unica cosa da notare è, alla riga 10, l'indicazione della lingua di visualizzazione dei vari elementi indicata con i classici codici linguistici (per l'italiano it_IT).
Il codice di cui sopra va incluso in tutte le pagine su cui si vuole far uso di codice XFBML. Poiché il codice è asincrono, lo si può includere anche subito dopo il tag <body> senza che interrompa, durante il caricamento, la visualizzazione della pagina.
Integrare i social plugin con XFBML
Un'ultima aggiunta prima di poter usare codice XFBML va fatta all'elemento <html>, l'elemento che apre, dopo il doctype, il documento da pubblicare. Per far sì che i browser riconoscano i tag XFBML, all'elemento va aggiunto questo attributo
[code lang=html]xmlns:fb="http://www.facebook.com/2008/fbml"

In modo che diventi una cosa del genere:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Ora che si è incluso l'SDK Javascript di Facebook nelle pagine e si è modificato il tag <html> è possibile usare il codice XFBML per visualizzare il pulsante "mi piace":

<fb:like href="https://www.html.it/" />

Attraverso alcune opzioni (disponibili anche nella versione iframe) è possibile cambiare caratteri, stile dei colori e il testo del bottone da "Mi piace" a "Consiglia".

<fb:like href="https://www.html.it/" layout="standard" width="450" action="recommend" colorscheme="dark" font="verdana" />

Sempre con XFBML è possibile visualizzare i plugin Activity (<fb:activity site="https://www.html.it"></fb:activity>) o quello Recommendations (<fb:recommendations site="https://www.html.it/"></fb:recommendations>) o il plugin Like Box, indicato per promuovere una pagina Facebook specifica (nel nostro caso è quella di HTML.it):

<fb:like-box profile_id="93192098615" width="450" connections="14"></fb:like-box>

Il plugin Like Box è questo qui sotto:

Solo con XFBML (non è prevista una versione per iFrame) è possibile includere in ogni pagina un sistema di commenti basato sulla piattaforma di Facebook:

<fb:comments></fb:comments>

Che sarà visualizzato in questo modo (commentate pure!):

I commenti potranno essere cancellati e moderati da tutti gli amministratori dell'applicazione che abbiamo creato nella pagina precedente. Inoltre, con i molti parametri del tag XFBML comments è possibile personalizzare molte delle funzioni di questo comodo sistema di commenti.

Includere le nostre pagine nell'open graph

Includere i social plugin è tuttavia il primo passo per ottenere un "posto al sole" su Facebook. Un'integrazione molto più profonda si può avere utilizzando il protocollo Open Graph. Ciò si ottiene includendo all'interno di una pagina Web alcune istruzioni semantiche che permettono, in parole semplici, di catalogare quel documento all'interno del "sistema" di Facebook in modo univoco e di rivendicarne la proprietà. In questo modo ogni pagina Web diventa un elemento del social network: gli utenti vi si possono iscrivere e, nella maggioranza dei casi, il gestore del sito può inviare loro aggiornamenti.

Poniamo, ad esempio, che si abbia un negozio online di articoli sportivi. Utilizzando nella pagina di ogni singolo prodotto i meta-tag open graph è possibile permettere agli utenti di "iscriversi" a quel prodotto (lo si fa con il classico pulsante "Mi piace") e inviare a questi utenti aggiornamenti sulla loro bacheca o messaggi quando cambia il prezzo, quando arriva un nuovo modello o quando si vuole comunicare con essi.

Quando l'utente amministratore della pagina fa clic sul link "Mi piace", accanto al dato di condivisione verrà visualizzato anche un link chiamato Amministra la pagina (figura 4):

Facendo clic su quel link si arriverà ad una normale pagina Facebook (figura 5) da cui pubblicare aggiornamenti per tutti gli altri utenti che hanno premuto il pulsante "mi piace" su quella specifica pagina.

Per abilitare ogni pagina del sito al protocollo open graph è necessario, per prima cosa, aggiungere il seguente attributo all'elemento <html>

xmlns:og="http://opengraphprotocol.org/schema/"

che diventerà dunque una cosa del genere

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">

In secondo luogo, bisogna includere i seguenti meta-tag tra i tag <head> </head> del documento. I primi quattro sono obbligatori:

<meta property="og:title" content="Integrare Facebook nel proprio sito Web" />
<meta property="og:url" content="http://webapp.html.it/articoli/leggi/3456/integrare-facebook-nel-proprio-sito-web/"/>
<meta property="og:image" content="http://utenti.html.it/tmp_img/articolo_9d4b9c343d209227.png"/>
<meta property="og:type" content="article" />
<meta property="og:site_name" content="HTML.it" />
<meta property="fb:page_id" content="93192098615" />
<meta property="fb:app_id" content="116841295012220" />

I tag sono quelli presi da questo articolo e sono abbastanza semplici da interpretare. I primi tre indicano il titolo della risorsa, l'indirizzo Web in cui si trova e un'immagine allegata (possibilmente quadrata e con dimensioni minime di 50x50 pixel).

Al rigo 4 è indicato il tipo di risorsa (og:type). Deve essere scelto fra quelli supportati dal protocollo: vi sono tipologie per prodotti (<meta property="og:type" content="product" />), per film (<meta property="og:type" content="movie" />), per hotel (<meta property="og:type" content="hotel" />) e così via. Per i siti Web generici, come ad esempio un blog, i tipi suggeriti da Facebook sono tre: blog, website e article.  Blog e website andrebbero usati, spiega la documentazione di Facebook, solamente per le homepage dei siti, mentre per le altre pagine si dovrebbe usare l'attributo article. Al momento tuttavia, l'impostazione dell'attributo article non consente di attivare l'amministrazione delle pagine così come descritto poco sopra.

Al rigo 5 va indicato (og:site_name) il nome del sito, nome che verrà usato da Facebook per la pubblicazione delle segnalazione degli utenti:

Gli ultimi due tag,  fb:page_id e fb:app_id, permettono di definire gli amministratori della pagina; il primo assegnando gli stessi amministratori che ha la pagina Facebook indicata dall'ID numerico che segue, il secondo assegnando gli stessi amministratori che ha l'applicazione indicata dall'ID. Gli amministratori di una pagina sono coloro che possono inviare aggiornamenti agli utenti, cancellare la pagina, recuperarne le informazioni e così via.

Per verificare che tutto sia a posto si può usare l'URL Linter, uno strumento che, indicata la pagina da controllare, verifica che i meta-tag siano inclusi correttamente.

Il Linter si può usare anche per aggiornare la pagina nell'open graph quando si cambiano alcuni meta-tag. A questo proposito va sottolineata una cosa: secondo la documentazione, i meta-tag di una pagina possono essere modificati a piacimento, ad eccezione dei meta-tag og:title e og:type. Questi, se modificati una volta raggiunte le 10 interazioni, faranno perdere gli utenti che hanno cliccato fino a quel momento su "mi piace".

Validare le pagine open graph

Quando includete i meta-tag open graph in una pagina Web, questa non verrà più validata dai classici strumenti di validazione, come ad esempio il validatore del W3C.

Anche a questo c'è una soluzione. Il protocollo open graph è infatti basato, almeno nella sua versione iniziale, su RDFa, il "formato" standard del W3C per l'integrazione di elementi semantici all'interno delle pagine Web. Per validare elementi RDFa all'interno di una pagina è necessario modificare il Doctype, ossia la prima riga di definizione posta prima dell'elemento <html>.

Per pagine Web scritte in HTML, il doctype da usare sarà:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01+RDFa 1.1//EN"
"http://www.w3.org/MarkUp/DTD/html401-rdfa11-1.dtd">

Per le pagine scritte in XHTML, il doctype da usare sarà invece:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

Un problema più grave è invece la validazione delle pagine che includono codice XFBML. Per i tag tipo <fb:like>, <fb:activity> e così via non c'è modo di vedere validata la propria pagina: sono tag proprietari di Facebook e non c'è Doctype che li possa descrivere.

Le statistiche per le condivisioni

Un altro vantaggio nell'usare questi nuovi strumenti messi a disposizione da Facebook è offerto dalla funzione Insights sul il tuo dominio che offre statistiche, aggiornate ogni 24/48 ore, sulle interazioni che gli utenti hanno avuto con i contenuti del sito, siano essi commenti, pressioni del pulsante "mi piace" o condivisioni.

Per poter utilizzare la funzione è necessario in primo luogo associare il dominio di cui si vuole ricevere le statistiche al proprio account Facebook o agli account di amministratore di un'applicazione. Andate alla pagina Facebook Insights, fate clic sul pulsante verde Insights sul il tuo dominio in alto a destra e riempire i campi che compaiono nella finestra (figura 6).

Nel campo Domain va inserito il dominio, o il sotto-dominio, per il quale si desidera tracciare le statistiche; mentre nel campo Link With bisognerà invece specificare il metodo con cui selezionare gli amministratori in grado di visualizzare le statistiche.

Si può scegliere di far visualizzare le statistiche solo a se stessi (in figura Antonello da Messina), a tutti gli amministratori di un'applicazione Facebook (in figura HTML.it social) o a quelli di una pagina Facebook (in figura HTML.it, Webnews o Testing). Il nostro consiglio è quello di scegliere o l'autenticazione solo per se stessi o per applicazione. L'autenticazione per pagina non ha funzionato nelle nostre prove.

Scelto il metodo, non resterà da fare che includere il codice mostrato tra i tag <head> </head> della homepage del dominio indicato nel campo domain e fare clic sul pulsante Check Domain. Subito apparirà nella pagina di Facebook Insights anche il dominio appena aggiunto.

I dati forniti sono pochi, ma allo stesso tempo utili. In alto, nella sezione Sharing, si trovano i dati di condivisione dell'ultimo mese e l'elenco delle pagine che hanno suscitato più interazioni.

In basso, nella sezione Demographics, ci sono invece le informazioni su sesso, età e provenienza degli utenti che hanno provocato quelle interazioni.

Il concetto di grafo

Terminiamo questo lungo articolo cercando di soddisfare una domanda che probabilmente qualcuno dei lettori si è posta: che cosa è un grafo e che cosa è un grafo aperto?

Facebook è una rete sociale fondata sulle connessioni: connessioni fra persone (Francesco è fidanzato con Claudia), fra persone e "oggetti" (a Francesco piace il film il Padrino), fra persone ed eventi (Francesco ha partecipato al Mix 2010) e così via. In questo senso Facebook può essere rappresentato sotto forma di "grafo": un'insieme di relazioni fra diversi nodi. Più il grafo diventa grande, ossia più relazioni vengono generate, più aumenta il valore di Facebook e l'"esperienza" dei suoi utenti.

Tuttavia i grafi, ossia le connessioni, non esistono solo all'interno di Facebook, ma in tutto il Web.

Attraverso gli strumenti che abbiamo discusso in questo articolo, quasi ogni oggetto della vita reale (film, prodotti, attori) rappresentato sul Web può diventare un nodo con cui costruire relazioni all'interno di Facebook ed esportarle al suo esterno. Ogni singola pagina Web, in altre parole, potrà dunque contenere un link "mi piace" che trasformerà quella pagina in un nodo della relazione.