Come creare un bottone Share on Facebook
Se vogliamo permettere ai nostri visitatori di condividere un nostro contenuto nel loro profilo di Facebook, tra le tante opzioni forniteci dal social network possiamo aggiungere alla nostra pagina un bottone “Share on Facebook” che permetta al visitatore di linkare il nostro contenuto con un commento o perlomeno delle informazioni che riguardano la pagina.
Nella modalità più semplice Facebook ci mette a disposizione un tool di creazione del link da mostrare on-line. Questo tool permette di automatizzare alcune delle caratteristiche che vediamo qui di seguito.
Funzionamento del tasto condividi
Quando un utente vuole condividere il nostro link, clicca sul tasto “Share on Facebook” che trova nella nostra pagina. Il link aprirà una finestra di popup a cui viene passato come parametro l’url della pagina in cui si trova o che noi gli segnaliamo.
A questo punto si può ipotizzare che Facebook faccia una chiamata asincrona alla nostra pagina e dal documento vada a pescare direttamente le informazioni da mostrare nel box di condivisione sul profilo dell’utente: il titolo, la descrizione, un’eventuale immagine. Recuperate queste informazioni, le mostra all’utente che le può modificare come meglio crede per poter, infine, condividere il link.
Ma come è fatto il bottone da inserire?
<a name="fb_share" type="icon_link" share_url="" href="http://www.facebook.com/sharer.php">
Condividi
</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Il tag script consente al bottone di ottenere la funzionalità di apertura del popup, ci basti sapere che aprirà una finestra riconoscendo come bottoni facebook tutti i tag a con parametro name =”fb_share” presenti nella pagina.
Il tipo di bottone
Il parametro type nel link ci permette di scegliere l’aspetto del bottone di share. Esso può assumere differenti valori: box_count (un box con il numero di utenti che hanno condiviso), button_count (lo stesso di box, ma un po’ più piccolo), button (un bottone senza riferimento al numero di condivisioni), icon_link (un’icona di facebook con in più il testo del bottone), icon (esclusivamente l’icona).
L’URL da condividere
Il parametro share_url identifica l’url della pagina che vogliamo condividere, se lasciato vuoto viene usata la pagina in cui il link è stato creato. Volendo personalizzare il link, possiamo dare un titolo alla share:
http://www.facebook.com/sharer.php?u=<link>&t=<title>
Come valore di “u” dobbiamo inserire il link urlencoded (attenzione se non usate rewrite degli indirizzi, dopo il ? tutti gli / verranno trasformati in valori urlencoded insieme a tutti gli altri carattere). Come valore di “t” Possiamo inserire una stringa rappresentativa del titolo che verrà mostrato nel popup.
Il testo
Oltre a questi parametri è possibile inserire al posto di “Condividi” un testo personalizzato che se omesso è riempito in automatico dal termine “Share” in inglese che verrà mostrato (a meno che usiamo il tipo di bottone “icon”).
Informazioni aggiuntive
Abbiamo detto che una volta aperto il popup Facebook raccoglie autonomamente i dati necessari ad aggiungere informazioni alla condivisione, ma se volessimo controllarle come fare?
Quando Facebook chiama in modo asincrono la pagina da condividere va a leggere nella sezione head il titolo e la descrizione e successivamente raccoglie una lista di immagini inserite nell’html per mostrarle all’utente. Volendo suggerire tali informazioni in modo automatico, è sufficente inserire alcuni metatag insieme ad i normali meta html:
<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" / >
In questo modo i dati che il nostro sito metterà a disposizione di Facebook saranno quelli effettivamente utilizzati. Inoltre se volessimo condividere un video o dell’audio o un filmato flash, potremmo indirizzarli nello stesso modo. Le specifiche di funzionamento spiegano in dettaglio come fare.
Personalizzazione completa
Una volta capito il funzionamento e volendo customizzare totalmente il link di Facebook senza basarsi sulla libreria JS fornitaci (la quale modifica l’aspetto del nostro link, cosa che talvolta non è l’ideale), dobbiamo eliminare il tag script che carica la libreria proprietaria e sostituirlo con del nostro codice specifico:
<script>
function fbs_click() {
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u=' +
encodeURIComponent(u) +
'&t=' +
encodeURIComponent(t),
' sharer', 'toolbar=0, status=0, width=626, height=436');
return false;
}
</script>
<a href="http://www.facebook.com/share.php?u=<url>"
onclick="return fbs_click()" target="_blank">
<img src="" />
</a>
Questo codice risulta identico al funzionamento della libreria nativa con la possibilità di personalizzare l’immagine dell’icona, l’eventuale struttura del bottone e perchè no, integrare ulteriori azioni al click sul bottone.
A seguire i link per sviluppatori forniti da Facebook:
- Usare la Share di Facebook
- Meta tag
- Implementare un Share di Facebook
e per un qualcosa di più avanzato:
- Facebook Connect
Ciao,
interessante articolo, che si potesse personalizzare anche l’immagine non lo sapevo. 🙂 Io ho un problema con i bottoni Condividi e Mi Piace sul mio sito web.
Ho inserito i bottoni in una pagina del mio sito. Inizialmente, la pagina aveva un titolo e una descrizione. Poi ho modificato entrambi secondo le mie esigenze; ho inserito un titolo e una descrizione che attirano maggiormente l’attenzione degli utenti.
Il problema è che cliccando ora su Mi Piace, Facebook continua a pubblicare il vecchio titolo e la vecchia descrizione. Accade la stessa cosa se si condivide il post.
Come posso fare?
Grazie in anticipo per la risposta.
Ma sei io volessi aggiungere un piccolo script che dopo la condivisione reidirizzasse ad una pagina ?… Io ho una pagina in PHP, vorrei mettere un bottone di share, ma dopo lo share deve accedere alla pagina… lo script com’è per far questo ? 🙂
Vorrei approfittarne per segnalare la messa in bando da parte di Facebook del bottone share in favore del Feed Dialog.
Per quel che riguarda il Feed Dialog gianvito, non ho mai provato quello che vuoi fare tu, ma in teoria non è più possibile in quanto facebook redireziona già ad una pagina sua interna dove ti permette di “sharare”.
Detto questo sconsiglerei comunque l’azione che proponi in quanto un po’ azzardata in fatto di usability
Ciao,
Una volta personalizzato il tasto come faccio a modificare il titolo, la descrizione e l’immagine di anteprima?
I metatag non funzionano più.
Grazie
Ciao,
è possibile passargli tramite url anche l’indirizzo dell’immagine e la descrizione?
@Cristian, facendoti notare che la specifica dello share è abbandonata (è cambiato proprio il concetto, Facebook preferisce il mi piace, l’invia o il feed dialog), posso dirti che la logica di tutti i bottoni social sta a segnalare solo l’url.
Dopodichè è il social che scarica la pagina e inserisce le informazioni necessarie o autonomamente o leggendo i metatag dell’opengraph nel tag head:
http://ogp.me/
ciao, complimenti per l’articolo! è l’unico che ho letto che mi ha permesso di raggiungere un mezzo risultato 🙂
sono molto interessata ma, per quanto ci provi, non ce la faccio proprio. Sbaglia sempre qualcosa :). Se mi contatti posso mandarti il link da condividere, il link dell’immagine che deve apparire in anteprima e il titolo della condivisione; mi mandi indietro un html per il pulsante Share completo e poi lo modifico io ricalcando il modello che mi prepari…. che ne dici? troppo lavoro? leggo le mail 24h su 24, se ti va scrivi al mio indirizzo allora… grazie millemila!!!
molto interessante il tuo articolo e chiaro
Grazie