Inserire e personalizzare lo share di Facebook

E’ un dato di fatto che il web odierno ruoti intorno ai Social Network, quasi ogni applicazione web o blog ha la possibilità di condividere su Twitter o Facebook. Oggi ci addentriamo nello sharer di Facebook e nella sua personalizzazione.

Sharer di Facebook

Inserire nelle nostre pagine questo metodo di condivisione è molto semplice grazie anche all’ottima documentazione disponibile a questo indirizzo : Facebook Share

<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Essenziale e veloce, basta inserire questo codice e sulla vostra pagina comparirà il vostro pulsante per lo share.
Ma se volessimo personalizzarlo?

Personalizzare lo Sharer di Facebook

Per chi volesse invece sporcarsi un pò di più le mani è possibile inserirlo senza API Javascript in un classico link :

<a href="https://www.facebook.com/sharer.php?u=http://www.fmdesignblog.com">
Condividi su Facebook
</a>

Forse ancora più immediato del precedente metodo ed in più è possibile inserire un’immagine o un testo formattato a nostro piacimento. Una volta cliccato noterete come è possibile condividere il titolo, una descrizione ed una thumbnail, vediamo come.

Per il titolo lo sharer di default prende quello della pagina, ma se volessimo inserirne un altro basta inserire nel tag head del nostro HTML :

Stesso discorso vale per la descrizione e per la immagine di anteprima:

<meta property="og:description" content="Nostra descrizione" />
<meta property="og:image" content="http://www.nostrosito.com/images/nostraimmagine.jpg" />

Ovviamente nel content relativo all’anteprima sarà necessario l’URL dell’immagine.

Nonostante il codice sia corretto non vedi le personalizzazioni?

A volte capita che nonostante vengano personalizzate le pagine con i tag meta adatti lo sharer non consideri le nostre variazioni.
Non tutti sanno che  lo sharer (ed in generale gli strumenti messi a disposizione da Facebook) hanno una propria cache.
Per far sì che la nostra non sia sottoposta al cacheing aggiungiamo un parametro di fantasia (ad esempio v=1) al nostro URL:

<a href="https://www.facebook.com/sharer.php?u=http://www.fmdesignblog.com?v=1">
Condividi su Facebook
</a>

Una volta fatto ciò vedrete che il vostro sharer sarà aggiornato con le informazioni che avete immesso nel tag head!

Condividi questo articolo:

• Tweet

Info sull' autore:

Appassionato di "web" fin dall'arrivo in casa del primo modem sono diventato nel 2008 uno Sviluppatore Web per Acktel. Sono un amante delle "novità" e dei nuovi linguaggi ma anche di grafica e disegno. Tutte le novità che scopro le condivido sul il mio Blog
Leggi gli altri articoli di Alessandro Alessio