Integrare Facebook con le API: Facepile

Facepile, uno dei solcial plugin ^[1] messi a disposizione da Facebook, può essere integrato in un sito con due finalità ben distinte:

1) mostrare la lista di amici a cui piace la pagina che stiamo visualizzando
2) mostrare la lista di amici che hanno autorizzato l’applicazione del sito visitato

Entrambe le funzioni possono utilizzare il tag IFRAME o il codice FBML. Si consiglia l’utilizzo di quest’ultimo perchè più versatile per quanto riguarda la personalizzazione grafica. Ovviamente per gli IFRAME non è richiesto javascript aggiuntivo o modifiche al codice della pagina.

Da ricordare che nella lista mostrata, dopo aver autorizzato l’applicazione, sarà compreso anche il nostro nome oltre a quello dei nostri amici.

Per una spiegazione approfondita dei vari parametri si rimanda a questa pagina: http://developers.facebook.com/docs/reference/plugins/facepile ^[2].

iframe: mostrare la lista di amici a cui piace la pagina che stiamo visualizzando

iframe: mostrare la lista di amici che hanno autorizzato l’applicazione

<iframe src="http://www.facebook.com/plugins/facepile.php?app_id=APP_ID" scrolling="no" frameborder="0" style="border:none;overflow:hidden; width:200px;" allowTransparency="true">

La differenza principale con il codice precedente è l’introduzione del parametro “app_id” al posto del parametro “href”. Il parametro “app_id”, ovviamente, andrà personalizzato con il valore della nostra applicazione.

fbml: mostrare la lista di amici a cui piace la pagina che stiamo visualizzando

Modificare il tag html della pagina in questa maniera:

Successivamente si deve aggiungere del markup alla pagina. Si è scelta la modalità asincrona del javascript per non interrompere, durante il caricamento, la visualizzazione della pagina.

Markup aggiuntivo:

Due considerazioni:

• al posto di APP_ID è necessario inserire l’ ID dell’applicazione (dato fornito da Facebook)
• da notare il parametro della lingua (it_IT) che permette di localizzare i testi

Una volta inserito questo codice è possibile utilizzare i tag FBML:

fbml: mostrare la lista di amici che hanno autorizzato l’applicazione

Modificare il tag html della pagina in questa maniera:

Successivamente si deve aggiungere del markup alla pagina. Si è scelta la modalità asincrona del javascript per non interrompere, durante il caricamento, la visualizzazione della pagina.

Markup aggiuntivo:

Due considerazioni:

• al posto di APP_ID è necessario inserire l’ ID dell’applicazione (dato fornito da Facebook)
• da notare il parametro della lingua (it_IT) che permette di localizzare i testi

Una volta inserito questo codice è possibile utilizzare i tag FBML:

Codice standard: