Inserire lo stream di Facebook in un sito web con stile
By Andrea Marchetti
@marchetti_design
Quando si condividono contenuti sui social può essere utile inserire lo stream di facebook sul propio sito. In questo articolo andiamo a vedere come inserire il like box di facebook con gli ultimi aggiornamenti di stato. Una volta inserito il box applicheremo delle modifiche allo stile.
Come prima cosa andiamo alla pagina del plug-in
https://developers.facebook.com/docs/reference/plugins/like-box/
e inseriamo nel campo URL, l’indirizzo della nostra pagina facebook.
Poi disattiviamo border, header e facecs spuntando i checkbox, lasciando solo lo stream.
Clicchiamo get code e copiamo il codice dove vogliamo che appaia lo stream, successivamente bisogna copiare lo script di facebook all’inizio del body. Questo script per funzionare deve essere associato a un applicazione facebook, per creare l’app e associare id allo script utilizziamo questa guida dal paragrafo “Creare una Facebook App”:
http://www.robertoiacono.it/inserire-box-commenti-facebook-wordpress-senza-plugin/
Creata l’applicazione, inseriamo l’id nello script. Ecco il codice finale:
<!doctype html>
<!–[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]–>
<!–[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]–>
<!–[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]–>
<!–[if gt IE 8]><!–> <html class="no-js" lang="en"> <!–<![endif]–>
<head>
<meta charset="utf-8" /><title>Facebook Stream</title>
</head>
<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/all.js#xfbml=1&appId=INSERISCI QUI L’ID DELL’APP";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script> <div id="wrapper"><div class="fb-like-box" data-href="INSERISCI QUI IL LINK DELLA PAGINA FACEBOOK" data-width="292" data-show-faces="false" data-stream="true" data-show-border="false" data-header="false"></div>
</div>
</body>
</html>
Ora con un piccolo trick CSS, andiamo a nascondere il pulsante like, ottenenedo solo lo stream con fondo trasparente. Inseriamo un div contenitore che contiene il like box:
<div class="container-like">
<div class="fb-like-box" data-href="https://www.facebook.com/pages/MarchettiDesignnet/140329246021912" data-width="280" data-height="600" data-show-faces="false" data-stream="true" data-show-border="false" data-header="false"></div>
</div>
.container-like{overflow: hidden;float:left;border-bottom: 1px solid #e5e5e5;border-top: 1px solid #fff;}
.fb-like-box{margin-top:-70px;border:none!important}
Tramite Css spostiamo il box di 70px in alto facendolo scorrere sotto il div contenitore con propietà overflow: hidden, l’area in eccesso non viene visualizzata.
Il risultato finale:
Il file del esempio è disponibile qui sotto per il download.
Stay Tuned!
Potrebbero interessarti:
Ciao Andrea,
inserire lo stream di fb in una pagina è la soluzione ideale che cercavo per creare un ponte fra il social marketing, il blog e il sito personale per consentire ad un cliente di gestire facilmente i contenuti!
Ho seguito le tue indicazioni, creato l’applicazione, collegato AppID e tutto funziona: vedo intestazione, pulsante Mi piace e footer del social plugin.. ma non c’è lo stream.
Questo succede già nel momento in cui inserisco il link nella pagina del plugin, il che mi fa sospettare che dipenda dal tipo di pagina..
Ciao JT,
ti consiglio di controllare il doctype e le impostazioni dell’applicazione, la pagina con lo stream deve essere nel dominio inserito quando crei l’applicazione..
Come doctype ho
le impostazioni dell’applicazione sono a posto, il dominio è quello giusto e la modalità sandbox disabilitata.
Ho fatto una prova, ho creato una pagina aziendale, ho creato l’applicazione e funziona tutto esattamente come nel tuo tutorial!
Mi rimane il problema dello stream che non appare per la pagina artista, già quando inserisco il link qui: https://developers.facebook.com/docs/reference/plugins/like-box/
Nell’anteprima appaiono solo le facce, ma niente stream
a questo punto la soluzione più immediata sarebbe far aprire una pagina aziendale all’artista, ma non capisco se è una politica di facebook
non sono riuscito a postare il doctype
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
Può darsi che facebook applichi delle limitazioni..
Ehi ciao..
complimenti per tutto.. per come tratti gli argomenti.. per il sito.. sei un grande!!!
Ascolta credo che tu debba rivedere questo tutorial.. non si vede più nella demo..
🙂
Ciao ciao,
Valo
Ciao Valo,
grazie della segnalazione, probabilmente facebook ha cambiato il sistema per embeddare lo stream appena avrò tempo proverò a sistemare il tutorial..
slve, intanto complimeti!
vorrei farti una domanda.
c’è l apossibilità di creare degli eventi su facebook e automaticamente mandari ad un sito web che NON sarà fatto con wordpress.
grazie
Ciao, volevo sapere se è possibile realizzare un box di FB direttamente sul sito web (magari come widget) ma solo per quanto riguarda gli album fotografici (il sito è in WP, con tema creato ad hoc). Grazie mille!
Ciao Roberta, dai un occhiata qui:
https://developers.facebook.com/docs/plugins/embedded-posts
Ciao. Ho trovato molto interessante questo post. Ti disturbo perché avrei bisogno se e possibile di un informazione. Mi servirebbe sapere dove trovo codici per inserire nel sito internet la pagina facebook come una finestra iniziale.
Avete per caso qualche tutorial o sapete consigliarmi come fare ?
Grazie mille
Ciao Michela, dai un occhiata qua:
https://developers.facebook.com/docs/plugins?locale=it_IT
Ciao, sto costruendo un sito x una psicologa di Firenze..sono riuscito ad inserire lo stream di facebook nella pagina blog ma mi occupa tutta la pagina..c’è un modo per inserirlo lateralmente? Puoi visionare il sito in costruzione http://martinafino.it la pagina in questione è blog.. Grazie x l’aiuto
Ciao, l’articolo è un po datato ma ho provato ugualmente inserire il like box nel mio sito, ma avrei una domanda è valido solo per le pagine o anche per i gruppi?
Grazie per l’aiuto
Manuela
Ciao, ho inserito lo stream di facebook ma non riesco a centrare la pagina. Puoi aiutarmi? Il sito è https://www.angelomarrone.com è un sito di un compositore, arrangiatore . Grazie ancora