Facebook (Fan) Like Box, integrazione Pagina in un sito web

facebook logo

Facebook sta allargando sempre più i suoi orizzonti e penso che le nuove API Facebook connect siano una trovata geniale. Oggi ogni azienda/marchio dovrebbe avere una propria pagina in Facebook, è fondamentale per creare interattività con i propri utenti/clienti. L’integrazione tra piattaforme (es: un blog WordPress con una pagina di Facebook) sta diventando sempre più semplice e il Fan Box (basato su Facebook connect) oggi ne è la dimostrazione.

Chiunque abbia un sito web (Aziendale, Blog, Forum, Community o qualsiasi altro genere) può incorporare facilmente il flusso dei contenuti che scorre sulla Bacheca della pagina di Facebook. Con una maggiore interattività tra le due piattaforme si mantiene viva la comunità di utenti che ruota intorno al sito web.

Nell’area dedicata agli sviluppatori è possibile creare il codice per il Fan Box (ora denominato Like Box).

Cliccando si accede a questa schermata:

In alto è possibile selezionare la Pagina per cui si vuole creare il Fan Box, mentre i due checkbox sotto permettono di aggiungere il flusso e i fans. In pratica il box risulta come lo vedete nell’immagine qui sopra (Preview). Nel riquadro il codice da utilizzare si aggiorna istantaneamente per cui potete copiare e incollare nel HTML della pagina che andrà ad ospitare il Fan Box.
Fatto ciò gli utenti, sul vostro sito web, visualizzeranno le informazioni relative alla pagina di Facebook. Visualizzeranno inoltre il tasto “Diventa Fan” (ora trasformato in “Mi piace“). Per gli utenti loggati su Facebook, e già Fan, il pulsante non appare ma verrà visualizzata la scritta “Sei fan” (ora “Ti piace“).

Resta un ultima cosa da sistemare per rendere il tutto completamente integrato sul vostro sito web. E’ il fattore estetico. Lo stile grafico infatti è quello che vedete nell’immagine, quello di default di Facebook.
Sul Facebook Developer Wiki troviamo la documentazione sul Fan Box che ci spiega come fare.

Il codice che andremo ad incorporare è simile a questo:

<script src="http://www.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript">FB.init("API_KEY", "");</script> <fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300" css="http://www.../fb_widget_connect.css"></fb:fan>

Gli altri parametri su cui è possibile intervenire sono:

  • width
    E’ la larghezza del box in pixel.
  • connections
    Prima abbiamo visto come impostare la visualizzazione dei fans. Se l’avete abilitata in questo campo dovreste trovare 10. E’ possibile modificarlo aumentando il numero di Fan da visualizzare. Se impostato a 0 (zero) disattiva la visualizzazione.
  • css
    Con questo parametro è possibile assegnare l’URL di un CSS personalizzato. In questo modo potrete cambiare colori e grafica del box.
    N.B.: Per migliorare le prestazioni Facebook memorizza in cache il nostro stylesheet. Consiglia quindi di utilizzare un cachebreaker nell’URL in modo da poter aggiornare tale file quando necessario. Possiamo, ad esempio, inserire una versione per il nostro CSS: http://www.example.com/my.css?2

Con l’aiuto di Firebug, il prezioso add-on di Firefox per gli sviluppatori, si riesce rapidamente a risalire alle classi dei vari oggetti che compongono il Box. In questo modo potrete personalizzare il vostro CSS.

Per myGDM, ad esempio, ho realizzato un CSS ad hoc per integrare flusso e fans della myGDM Facebook page.
Questo è il risultato:

myGDM Community Page

17 pensieri su “Facebook (Fan) Like Box, integrazione Pagina in un sito web

  1. Francesco

    Ciao, sai se è possibile farlo anche con un GRUPPO di Facebook.
    Per adesso vedo l’opzione solo su una Pagina Facebook o un’applicazione.

    Saluti e complimenti x il blog!

  2. Jazzo Autore articolo

    @Francesco
    Purtroppo al momento no. A dire il vero, così su due piedi, non saprei dirti se attraverso le API di Facebook Connect è possibile realizzarlo. Appena ci dò un occhio ti saprò dire.
    Se vuoi integrare il tuo sito (ho visto il tuo bel link) con Facebook ti consiglio, in generale, di passare ad una Pagina. Leggi qui: Facebook web marketing: Pagina o Gruppo?

  3. Francesco

    A dire il vero ho sia la pagina che il gruppo che un’applicazione. Il fatto è che personalmente tra pagina e gruppo ho sempre visto meglio il gruppo, e infatti ho molti più fan li!
    Grazie per la risposta! E complimenti ancora è molto carino il tuo template!

  4. Boz

    Ciao, spero risponderai a questo post.. sto cercando di collegare la fan box di fb ad un foglio di stile. Il codice lo puoi vedere nella home del mio sito, la box è sulla sinistra, dopo il modulo log in. Non riesco ad inserire il foglio di stile.. ed è snervante! le sto provando tutte!
    grazie..

    Max
    .

  5. Jazzo

    Boz/Max
    Ho visto il tuo sito e vedo un colore viola non standard quindi penso tu abbia già risolto.
    Secondo me il problema a cui ti riferivi stava nella cache che Facebook crea per i fogli di stile CSS. In pratica la prima volta che lo carica lo mette in cache e per tutte le volte successive lo prende dai suoi server e non dal nostro. Per ovviare a questo problema è bene usare il sistema descritto qui sotto.

    N.B.: Per migliorare le prestazioni Facebook memorizza in cache il nostro stylesheet. Consiglia quindi di utilizzare un cachebreaker nell’URL in modo da poter aggiornare tale file quando necessario. Possiamo, ad esempio, inserire una versione per il nostro CSS: http://www.example.com/my.css?2

  6. Carlo

    Ciao.Vorrei inserire le news del mio sito di consulenza informatica automaticamenteanche al gruppo che ho creato su facebook.Come posso fare?Mi puoi aiutare?
    Grazie!!

  7. studio21

    Certo che potete mettere i gruppi ecc, basta sostituire l’id numerica con quella dell’indirizzo della pagina del gruppo.

    esempio: questo indirizzo web del mio gruppo http://www.facebook.com/group.php?gid=357582471114 dobbiamo semplicemente copiare il numero dopo il gid=, in questo caso 357582471114 e sostituire quello che si trova nel codice fanbox cioè a questa riga: <fb:fan profile_id="327398754044" sostituire 327398754044 con 357582471114 (quello riferito al vostro gruppo).

    Buona condivisione fan a tutti….

    Unitevi al mio gruppo!
    http://www.facebook.com/group.php?gid=357582471114

    per avere trucchi di webdesign, programmazione, download template e molto altro…

  8. Fabry

    Salve raga ho integrato sul mio sito un plugin che gestisce facebook si chiama fanbox una volta essermi loggato vedo i fan del mio gruppo ma non riesco a visualizzare la bacheca vedo solo uno spazio bianco.sapete il motivo?

  9. Andrea

    Fantastico, grazie mille per questa guida. Sto pensando di rimettere mano su facebook ed integrarvi il mio sito. Grazie ancora.

  10. Giorgia

    ciao! grazie per il tutorial..io ho inserito il like box però all’aggiornarsi della pagina fb, non mi aggiorna le info nel likebox del sito..restano fisse al giorno in cui ho inserito il likebox..tu dici solamente di inserire una versione per il nostro CSS: http://www.example.com/my.css?2
    …ma che vuol dire?? come faccio col cachebreaker?

    grazie in anticipo

  11. Jazzo

    ciao Giorgia,
    sono due cose diverse. Il discorso dei CSS serve per poter vedere gli aggiornamenti di stile istantaneamente (FB li tiene in cache). Per i contenuti invece dipende da FB stesso. I contenuti infatti vengono caricati dinamicamente ogni volta. Ricordo che fu così anche per me all’inizio, si vede che FB si prende un po’ di tempo…
    Prova a vedere tra qualche giorno!

  12. michele

    ciao, sai spiegarmi perchè se metto il mio fan box nel mio sito ho bisogno di loggarmi a FB per vedere i miei fans, mentre in molti altri siti non sono loggato a FB e neanche fan del sito che sto visitando eppure vedo il loro fan box con tutti i fan. potete aiutarmi? grazie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *