Integrare Facebook nel proprio sito web

 In Web Design

Con l’avvento dei social network, ed in particolare di Facebook, anche le aziende hanno sentito la necessità di auto promuoversi, raggiungendo milioni di persone con un pochi click.

Fino a qualche anno fa era necessario visitare le pagine dell’azienda interessante direttamente sul social network in questione poiché non esisteva l’integrazione dei social plugin che, oggi, permettono di seguirla tramite un apposito comando presente direttamente sul proprio sito web.

 

Come integrare Facebook nel proprio sito web

 

Prima di poter utilizzare il codice per integrare Facebook nel proprio sito web, va aggiunto il tag XFBML all’elemento<html>della pagina, ossia il tag che apre il documento da pubblicare:

 

xmlns:fb="http://www.facebook.com/2008/fbml"

 

Alla fine, risulterà:

 

<html xmlns="linksito" xmlns:fb="http://www.facebook.com/2008/fbml">

 

Va inoltre aggiunto il Javascript SDK copiando il link seguente una sola volta nella pagina subito dopo il tag<body>

 

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

Pulsante “Mi Piace” di Facebook

 

Ora che si è modificato il tag <html> è si è integrato l’SDK Javascript di Facebook, è possibile utilizzare il codice XFBML per visualizzare il pulsante “Mi Piace” inserendo nella pagina, nel punto in cui lo si vuole far comparire, il seguente tag:

 

<fb:like href="url-sito" />

 

Sostituendo “url-sito” con l’indirizzo del vostro sito web; ad esempio

 

<fb:like href="http://www.web.mnweb.it/news/integrare-facebook-nel-proprio-sito-web" />

 

Attraverso alcune opzioni è possibile modificare l’aspetto del tasto, per esempio:

 

<fb:like href="http://www.web.mnweb.it/news/integrare-facebook-nel-proprio-sito-web" layout="standard" width="400" action="like" colorscheme="light" font="arial"></fb:like>

 

Che mostrerà:

 

 

Plug-in Activity e Recommendations

 

Tramite XFBML è possibile visualizzare i plug-in Activity:

 

<fb:activity site="url-sito"></fb:activity>

 

 

o il plug-in  Recommendations:

 

<fb:recommendations site="url-sito"></fb:recommendations>

 

 

Integrare il Like Box di Facebook nel sito web

 

È possibile facilmente inserire il più famoso plug-in Like Box, indicato per promuovere una pagina Facebook specifica, inserendo all’interno della pagina del vostro sito web la seguente riga di codice:

 

<fb:like-box href="https://www.facebook.com/MN.Web.Solutions.Web.Agency" width="610" height="280" colorscheme="light" show_faces="true" header="true" stream="false" show_border="true"></fb:like-box>

 

 

Integrare i commenti nel proprio sito web tramite Facebook

 

Tramite XFBML è anche possibile includere in ogni pagina un sistema di commenti basato su Facebook tramite l’istruzione:

 

<fb:comments href="http://www.web.mnweb.it/news/integrare-facebook-nel-proprio-sito-web" width="610" numposts="5" colorscheme="light"></fb:comments>

 

I commenti possono essere cancellati e moderati dagli amministratori dell’applicazione. Inoltre, con i molti parametri del tag XFBML comments è possibile personalizzare molte delle funzioni di questo comodo sistema di commenti.

 

Sentitevi liberi di commentare questo articolo 🙂

Recommended Posts