Come aggiungere i plugin sociali di Facebook ad un sito

Hai un sito web? Un blog, un forum, o un sito internet aziendale e non l’hai ancora integrato con Facebook?

Milioni di siti sono connessi con Facebook, in modo da permettere ai visitatori di condividere facilmente i contenuti su social network, di diventare fan delle pagine, di scoprire nuovi contenuti del sito o di registrarsi facilmente ed usare svariati servizi tramite l’account Facebook.

Sto parlando dei plugin sociali, gli strumenti che da anni permettono ai siti di integrarsi con Facebook, con o senza l’ausilio di applicazioni.

Un esempio? Basta dare un’occhiata all’articolo che state leggendo. In alto e in basso potete trovare tasti mi piace e invia, un tasto condividi; in alto a destra (nella versione del sito per computer) potete trovare un tasto per diventare fan sulla pagina Facebook, in basso a questo articolo un box per i commenti ecc. ecc.

Prima elenco i principali plugin sociali e spiego perché sono importanti. Successivamente vi guido nell’integrazione di Facebook sul vostro sito; sono necessarie alcune competenze base di html ma vi assicuro che il procedimento è semplicissimo.

Elenco dei plugin sociali di Facebook

I plugin sociali di Facebook sono accessibili da questa pagina.

• Pulsante mi piace (like button): permette di cliccare mi piace su contenuti o pagine Facebook. E’ possibile personalizzarlo nel colore, larghezza, font utilizzato e termine da utilizzare (mi piace o raccomanda). E’ anche possibile includere un tasto invia (vedi in alto a questo articolo, nella versione da computer). Il tasto mi piace permette di cliccare “mi piace” su qualsiasi contenuto del web e generare così una storia in bacheca, condivisa in automatico con gli amici (o con chi settato nelle impostazioni sulla privacy).
• Pulsante Invia (send button): permette di inviare un contenuto come messaggio privato su Facebook.
• Box dei commenti: permette di commentare un contenuto sul web attraverso il profilo (o la pagina) Facebook. Il commento è condivisibile e le eventuali risposte al commento sono sincronizzate tra la storia generata su Facebook e i commenti sul sito. Per una prova basta commentare questo articolo, in basso.
• Box consigli (recommendation box): box che mostra i contenuti più condivisi sul sito, con consigli sociali (mostra quali contenuti hanno condiviso gli amici da quel sito).
• Barra consigli (recommendation bar): mostra due o più contenuti consigliati all’utente, scelti in base al numero di condivisioni (o click sul tasto mi piace/consiglia). Un esempio? Guarda in basso a destra, nella versione per computer di trucchi facebook.
• Box mi piace (like box): mostra i mi piace di una pagina e invita l’utente a seguire la pagina (cliccare mi piace) su Facebook.
• Tasto segui (follow button): permette di seguire gli aggiornamenti pubblici di una persona su Facebook. Un esempio? In fondo a questo articolo, sotto la mia foto.

Come integrare un sito con i plugin sociali di Facebook

Per aggiungere uno dei plugin sociali basta visitare questa pagina e scegliere quello desiderato, proviamo ad esempio il tasto mi piace.

Nel primo campo bisogna scrivere l’URL del contenuto dove aggiungere il tasto, oppure scrivere l’URL di una pagina fan.

Scegli se includere o meno un tasto invia, e scegli la forma del bottone. A box, o a tasto (per la differenza dai uno sguardo all’inizio e alla fine di questo articolo, nella versione per desktop computer).

Scegli poi la larghezza del bottone (consigliato lasciare quella standard) e valuta se includere o meno le foto degli amici che hanno cliccato mi piace.

Scegli carattere e colore (chiaro o scuro, ovvero blu o nero) e il termine da utilizzare (per generare storie del tipo “A tizio piace il contenuto” o “tizio raccomanda il contenuto”).

Infine clicca sul tasto “Get code”.

Per aggiungere il tasto mi piace a qualsiasi sito è essenziale avere accesso ai file ed avere competenze minime di html.

Facebook fornisce diverse opzioni per l’integrazione dei plugin sociali, nel nostro esempio possiamo usare HTML 5, XFBML, IFRAME o URL.

Il più facile da implementare è l’IFRAME, basta copiare e incollare il codice sulla pagina/file dove desiderate inserire il tasto.

Per una implementazione corretta èperò consigliato l’utilizzo di HTML 5 o XFBML attraverso il Javascript SDK di Facebook. Questo è un codice che va incluso sulle pagine del sito (meglio se nel footer, subito prima della chiusura del tag </body>) come spiegato in immagine.

Consigli e suggerimenti avanzati per un’integrazione perfetta

Chiudo l’articolo scrivendo alcuni miei consigli per una perfetta integrazione del vostro sito con Facebook.

• Create un applicazione prima di includere i plugin sociali. Avrete così modo di associare i plugin con l’applicazione ed avere accesso così a tantissime funzioni come gli insights (le statistiche) e la personalizzazione delle storie generate su Facebook. E’ possibile creare un’applicazione da qui.
• Utilizzate il javascript SDK in modalità asincrona, come spiegato su questa pagina, per non bloccare il caricamento delle pagine del vostro sito e migliorare così la performance del sito (velocità di caricamento).
• Utilizzate lo strumento di debug per capire  come verranno condivisi i contenuti del sito su Facebook e correggete eventuali errori segnalati aggiungendo i relativi parametri di open graph.

Pubblicato il: 26 Maggio 2013 In: Guide Tag: Aumentare Mi Piace, Funzioni Facebook, plugin, sito web

Scritto da: Fabrizio Trentacosti

Digital Manager, Imprenditore e Formatore. Autore e fondatore di TrucchiFacebook, il primo blog Italiano (non ufficiale) su Facebook.