Come creare un bottone Share on Facebook

Pubblicato il

Categoria: Social Network

LinkedIn0

wiki_logoSe 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
LinkedIn0