Facebook Plugin per visualizzare i post della bacheca di una Pagina FAN – PHP & Json

Questo plugin, creato in Php & JSON, restituisce i post della bacheca da una pagina fan di Facebook e li pubblica sul tuo sito personale.


DEMO | DOWNLOAD


Qualche tempo fa ero alla ricerca di qualcosa di molto semplice per pubblicare i feed delle pagine facebook, ma non ho trovato alcuna soluzione sul web. Quello che vorrei ottenere sono i post (solo dalla mia pagina fan personale, non da altre) della bacheca di una pagina FB (si tratta di una fan page, non profili privati) e di pubblicarla sul mio sito. Speravo di ottenere i post nel formato XML o JSON e poi di codificarli in modo da utilizzare FB come un sistema di news. Purtroppo non ho trovato alcuna soluzione del genere poichè non voglio che l’utente debba effettuare il login tramite il suo account per vedere qualcosa quindi deve essere un flusso di feed pubblico. Così ho deciso di codificare il plugin.

1) Scaricare la Facebook Php SDK

Per usare la Facebook Php SDK è necessario scaricarla usando questo link: https://github.com/facebook/facebook-php-sdk. Questo è il primo esempio di come funziona:

Questo codice restituirà un array di feed.

2) Facebook App ID

Come posso ottenere un App ID ??

  1. Esegui il login su Facebook
  2. Vai alla pagina Applicazione su Facebook Developers: https://developers.facebook.com/apps
  3. Clicca il pulsante Crea un’applicazione (se non vedi l’opzione per creare una nuova app nell’angolo a destra allora clicca su Registrati come sviluppatore). fb-stream-01
  4. Inserisci un nome per l’applicazione nel campo Display Name.
  5. Potrebbe apririsi un controllo Captcha di sicurezza. Inserisci il codice Captcha e clicca il pulsante Continua.
  6. All’interno della descrizione troverai il tuo App ID e l’App Secret. fb-stream-02
  7. Nella pagina delle Impostazioni dell’app troverai il nome che hai inserito nel punto 4 nel campo di testo Display Name. Controlla se il nome è corretto, e che il tuo indirizzo email sia corretto.fb-stream-03
  8. Se vuoi rendere la tua App pubblica entra nella pagina Status & Review e imposta Page Stream a “Si”. fb-stream-04

3) Trova la tua facebook page ID

Poichè ti servirà la tua page ID, questo sito ti aiuterà a trovarla: http://findmyfacebookid.com/.

fb-stream-04

4) Primi passi in Html & Php

Prima di tutto è necessario creare una pagina base in HTML5 dove verranno mostrati i nostri post. Nell’head della pagina inseriremo il codice php necessario a salvare la variabili App ID, App Secret, Page Id. In seguito si dovrà includere il file fb_stream.php. Questo file è necessario per creare un App Acces Token(*) che ci permetterà di ottenere i feed della tua pagina.

[ (*): Se la tua app pubblica contenuti per conto dei propri utenti e richiede un token di accesso senza scadenza ai fini della pubblicazione, è necessario utilizzare un App token di accesso. Questo viene creato usando il vostro App Secret e non scadrà mai, ma sarà invalidato se resettate l’App Secret dell’applicazione. Questo tipo di token serve per modificare e leggere le impostazioni dell’applicazione. Può anche essere utilizzato per pubblicare le azioni delle Open Graph API. Fonte: FB DOCS: Open Graph ActionsFB DOCS: Access Tokens ]

5) Lo script da includere nella pagina: fb-stream.php

Questo script si occupa prima di tutto di includere le API di Facebook e di recuperare le variabili appId, secret e cookie che sono state definite precedentemente. In seguito, tramite l’utilizzo di quest’ultime, viene creato un “App Access Token” per accedere alle Open Graph API. Viene eseguita poi la richiesta di accesso alle OG API utilizzando l’url “https://graph.facebook.com/”.$page_id.”/feed/?access_token=”.$params[‘access_token’]” e il token precedentemente creato. Questa richiesta restituirà un feed di informazioni della pagina facebook indicata nella variabile $page_id. Infine viene serializzato il risultato in JSON tramite l’utilizzo della funzione json_decode(). L’ultima parte dello script utilizza le FQL (Facebook Query Language) per interrogare la tabella del database della pagina ed ottenere il numero di fan, il nome e la foto profilo.

6) Dentro il body della pagina

Nella prima parte di codice vengono recuperati i valori delle variabili fb_pic, fb_name e fb_fans precedentemente ottenuti tramite le Facebook Query Language. Successivamente, una volta impostato il nostro ID di pagina nella variabile pageId, creeremo il classico pulsante I LIKE tramite l’utilizzo della funzione document.write() in Javascript.

In seguito dalla riga 30 è stato implementato il codice che servirà a visualizzare i post restituiti tramite le Open Graph API. Sono state inserite inoltre due funzioni per modificare il testo dei post. La funzione cropWord_($str) si occupa di limitare le parole troppo lunghe mentre la funzione cropString_($str, $chars) serve per delimitare le stringhe al numero di parole inserito come parametro.

Sono stati considerati tre tipi di post: link, status, e photo. Per poter valutare il tipo di post pubblicato dovremo accedere alla variabile type(**) all’interno del feed. Nella figura seguente è possibile vedere il feed con tutti i post della pagina generato dalle Open Graph API. Per vedere il vostro feed personale è necessario incollare il vostro page ID e il vostro access token nell’url della pagina (esempio: https://graph.facebook.com/VOSTRO-PAGE-ID/feed/?access_token=VOSTRO-ACCESS-TOKEN). screenshoot-post

Quindi in base al tipo di post vengono stampati diversi tipi di contenuti. Nel caso in cui type sia un “link” allora si dovrà valutare se all’interno del post vi è un “message” o una “story” e in seguito se il link consiste in un collegamento vero e proprio o se il link è costituito da un’immagine ovvero una “picture”. Nel caso in cui type sia uno “status” si dovrà valutare se stampare la “story” o il “message” come nel caso precedente ed in seguito stampare la data del post. Ed infine nel caso in cui type sia una “photo” si dovrà sempre valutare se stampare la “story” o il “message” e successivamente stampare l’immagine (con il collegamento a se stessa su facebook), il link relativo all’immagine ed infine la data del post.

[ (**) Documentazione ufficiale sui campi di testo disponibili in un post: https://developers.facebook.com/docs/reference/api/post ]