Nel mio post precedente ho avuto modo di analizzare il trend che negli ultimi anni ha cambiato il nostro modo di fruire delle informazioni sul web. Oggi vorrei analizzare invece un esempio pratico di come condividere su Facebook un contenuto del proprio sito.
Già qualche mese fa, Yuri su questo stesso blog, aveva proposto un’analisi di come gestire un pulsante di condivisione su Facebook. Quello che voglio realizzare oggi è un po’ diverso in quanto la funzionalità sviluppata in questo articolo metterà in luce soprattutto come rendere dinamico il tracciamento delle varie condivisioni e poter risalire a chi ha condiviso il link e ha generato nuovo traffico.
La richiesta nel dettaglio
Una delle richieste più in voga al momento nel campo del web design è l’interfacciamento del proprio sito con i social network.
Per il post di oggi analizziamo una situazione in cui il cliente ci abbia chiesto di fare in modo che dal suo sito internet gli utenti registrati possano cliccare su “Mi piace” e automaticamente essere reindirizzati a Facebook con la schermata di conferma della condivisione che sicuramente abbiamo già tutti avuto modo di incontrare.
Il link condiviso su Facebook deve essere basato sull’utente che effettua la condivisione in modo che il web master sappia quanti nuovi utenti sono stati portati al nostro sito da questa azione e quindi conosca anche le varie statistiche di accesso, traffico e conversione.
Ovviamente il semplice inserimento del Like Button previsto dalle API Facebook non è sufficiente a realizzare il nostro intento, ma dobbiamo sfruttare l’Open Graph Protocol e il tag XFBML.
La pagina di destinazione
Il sistema di condivisione dei contenuti di Facebook utilizza una chiamata asincrona per prendere i dati da pubblicare in bacheca. Dobbiamo quindi distinguere due frammenti di codice:
- codice che definisce le informazioni da condividere; viene inserito nell'<head> della pagina;
- codice che permette la vera e propria condivisione e che inserisce nella pagina il pulsante “Mi piace”.
I due frammenti di codice, volendo, possono anche coesistere nella stessa pagina. In ogni caso la chiamata asincrona che Facebook opera utilizza l’url definito nel tag XFBML che vedremo più avanti. A questo url deve esserci il primo frammento di codice:
[html]
<meta property="og:title" content="TITOLO"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="URL"/>
<meta property="og:image" content="IMMAGINE"/>
<meta property="og:site_name" content="NOME_DEL_SITO"/>
<meta property="fb:app_id" content="ID_APPLICAZIONE"/>
<meta property="og:description" content="DESCRIZIONE_DELLA_PAGINA"/>
[/html]
Tra i vari meta tag richiesti (di facile comprensione) facciamo cenno al “fb:app_id” che viene generato secondo la procedura di registrazione dell’applicazione su Facebook.
Attenzione! È importante, in questa parte di codice non fare riferimento a variabili basate sulla sessione dell’utente poichè, come già esposto, la pagina viene richiamata in modo asincrono da Facebook.
Il tag XFBML
Per arrivare alla condivisione ci manca, però, la parte più importante: il pulsante “Mi piace”.
Ecco il codice:
[html]
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: ‘ID_APPLICAZIONE’, status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement(‘script’);
e.type = ‘text/javascript’;
e.src = document.location.protocol +
‘//connect.facebook.net/it_IT/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>
<fb:like width="50" layout="box_count" show_faces="false" href="LINK_DA_CONDIVIDERE" colorscheme="default"></fb:like>
[/html]
I due campi dinamici sono l’appId e l’href che specifica il link da condividere e che deve contenere il primo frammento di codice già definito poco fa.
Le altre opzioni del tag XFBML sono semplici e possono essere smaltite con una veloce lettura della documentazione di Facebook.
Come tracciare gli utenti?
Il nostro scopo, dicevo ad inizio post, è quello di tracciare chi ha generato del traffico sul nostro sito dopo aver pubblicato sulla propria bacheca di Facebook il nostro link. Per poter tracciare queste statistiche dobbiamo agire sul campo href impostando il link in modo da sapere chi ha utilizzato la nostra risorsa. Io ho utilizzato una soluzione di questo tipo:
[php]
urlencode("http://www.ilmiosito.com/social/{$_SESSION[‘login’][‘id’]}/<param_1>/<param_2>/[…]")
[/php]
Chiaramente la pagina di destinazione deve ottenere dall’url i vari parametri che ci interessano. L’ID dell’utente è essenziale per sapere CHI ha condiviso la risorsa, ma volendo possiamo utilizzare tutti i parametri che desideriamo secondo la sintassi che preferiamo (ovviamente passando nell’url tutte le informazioni).
Per la mia esperienza in merito a questa realizzazione posso dire che ho avuto qualche problema con la gestione della cache di Facebook. Ovvero andando a modificare l’url della pagina oppure le informazioni contenute nei meta tag già condivisi ho avuto problemi di visualizzazione direttamente in bacheca e sul tracciamento dei link. È necessario, dunque, fra le varie prove di realizzazione, considerare anche l’incognita cache.
