Facebook (Fan) Like Box, integrazione Pagina in un sito web
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:
![Certification Authentication PHP Zend Certified Engineer [PHP5 Zend]](http://www.zend.com/images/training/certification_auth_logo_s.gif){kind=logo}
![Certificazione PHP Zend Certified Engineer [PHP5 Zend]](http://www.zend.com/images/training/php5_zce_logo.gif){kind=logo}
![[FSF Associate Member]](http://www.m4ss.net/wp-content/themes/m4ss/images/FSF_member.png)
Articoli (RSS)
