Sviluppare applicazioni Facebook

Sviluppare applicazioni Facebook

Intesys, 11/07/2011

Intesys Talk

Intesys TalkPagina 2

1. Introduzione2. Risorse principali

1. Canvas Page2. Social Channels3. Insights

3. Concetti chiave della piattaforma

1. Social Graph2. Open Graph3. Graph API4. OAuth5. Authentication

1. Server-side Flow2. Client-side Flow

Sommario4. In pratica

1. Creare l’app2. Configurazione3. Il canvas4. Autorizzazioni5. Esempio6. SDKs

1. Javascript SDK1. Channel File2. Autenticazione e

Autorizzazione3. Chiamate alle

API2. PHP SDK

1. Installazione e Inizializzazione

2. Autenticazione e Autorizzazione

3. Chiamata alle API

5. Tools1. Access Token Tool2. Test Users3. Platform Status4. Debugger5. Graph API

Explorer6. Javascript Test

Console6. Funzionalità avanzate

1. FQL2. Dialogs3. Credits4. I18N5. Chat API

7. Fonti e ringraziamenti


Perché sviluppare applicazioni Facebook?E’ utile sviluppare applicazioni Facebook perchè permette di creare un canale social tra il brand per cui lavoriamo e gli utenti finali.


Strumenti messi a disposizione da Facebook- Canvas Page

- Social Channels - Insights

Le 3 risorse principali


Le applicazioni FB sono web app liberamente realizzabili con i comuni linguaggi orientati allo sviluppo web (php, python,Java, C#,ecc).La canvas è molto simile ad un iframe all’interno del quale viene caricata la nostra app.La canvas viene popolata attraverso una Canvas URL sulla quale risiederà la nostra app.Quando un utente visita la nostra app, FB caricherà tramite iframe il contenuto della nostra Canvas URL. Lo spazio a disposizione all’interno della Canvas è di default di 760px ma può essere fluido (dal Novembre 2011) ed occupare tutta la larghezza del browser.

Canvas Page


Per portare più traffico possibile verso la propria app, Facebook mette a disposizione alcuni

canali quali :

Bookmarks

Aggiunti in automatico sulla pagina dell’utente una volta che ha utilizzato l’app;

permettono facilmente di far tornare l’utente

Notifiche

Permettono a più utenti di ricevere notifiche riguardanti inviti ad utilizzare l’app;

ne esistono di 2 tipi:

user generated : richieste tramite popup all’utente che decide se inviarle o meno agli amici

app generated : inviate in automatico dall’app agli utenti che ne hanno espresso il consenso nei

permessi (si vedrà dopo come richiedere i permessi)

News feed

Vengono creati in automatico da Facebook nella parte in alto a destra dell’homepage

mentre possono essere pubblicati come post sempre dietro consenso esplicito dell’utente.

Social Channels


InsightsInsights è uno strumento messo a disposizione da Facebook per trackare e quindi poter analizzare gli utenti, lo sharing fatto in relazione all’applicazione, le performance dell’applicazione, ecc.


Concetti chiavePrima di procedere con la creazione di un applicazione bisogna andare a capire com'è stato strutturato e

concepito il social network.

- Social Graph

- Open Graph

- Graph API

- Authentication


Social GraphTutti i dati presenti all'interno di Facebook sono

rappresentati come entità di un immenso grafo(*)

dotato di identificato univoco (FB id).

Ad esempio, l'utente Mario Rossi con i suoi dati è

un nodo del grafo, da questo nodo partono

connessioni verso altri nodi : gli amici di Mario,

le sue foto,ecc. Tutto l'insieme dei milioni e milioni

di utenti di Facebook forma il grafo dell'intero

social network, che si potrà scandagliare per

mezzo delle Graph API.

(*) Grafo: struttura matematica costituita da un

insieme di nodi collegati fra loro.

Date le molte proprietà, vengono studiati sia in

matematica che in informatica.

(http://it.wikipedia.org/wiki/Grafo)


L’OGP è un protocollo creato da Facebook nel 2008 (evolutosi fino ad oggi – vedi la “timeline”), chetrasforma qualsiasi pagina web in un entità associabile al grafo sociale di un’utente.Le pagine web che contengono il “Like Button” di Facebook vengono viste dalla piattaforma come “pagine Facebook” e quindi entità del grafo complessivo del social network.Come nell’esempio qui sotto, l’utente clicca sul “mi piace” di una pagina di un film ed in automatico viene creata la connessione tra l’entità (la pagina Facebook del film) e l’utente.

Open Graph Protocol


Dal settembre 2011, dopo la conferenzaF8, che ha introdotto Timeline, all'interno di OGP sono state incluse le “attività” e gli “oggetti” (per ora solo applicazioni) che si integrano in profondità con il social network.Un breve esempio.Creiamo un'applicazione che fornisce ricette, durante la configurazione dell'app si può impostare che tipo di attività l'utente svolgerà (in questo caso cucinare).Quando l'utente aggiungerà l'app alla sua timeline, le attività specificate durante la configurazione verranno condivise sul news feed, sul ticker (l'area in alto a destra) e sulla propria timeline.

Modifiche a Open Graph Protocol


Il cuore della programmazione Facebook è costituito dalle Graph API, collezione di semplici servizi Web utili per navigare il grafo sociale.Un semplice esempio.Collegandosi all'indirizzo https://graph.facebook.com/platform, vedremo apparire una serie di informazioni relative all'id (in questo caso l'alias) dell'utente inserito.Come detto prima, ogni entità del grafo ha un suo identificativo (numerico o alias) che può essere usato per recuperare i dati sull'entità, qualora ne avessimo i permessi.Ogni entità ha i suoi dati, in quanto, ovviamente, un album di foto avrà campi diversi dal profilo di un utente.Per vedere quali campi si possono estrarre da ogni entità ci viene incontro la documentazione ufficiale: http://developers.facebook.com/docs/reference/api/Altro tool molto utile è il Graph API Explorer, che ci aiuta notevolmente nello sviluppo delle apps: https://developers.facebook.com/tools/explorer?method=GET&path=19292868552L'impiego delle API verrà spiegato a breve, dopo la creazione e configurazione delle nostre apps.

Graph API


Si aveva la necessità di autenticare applicazioni di terze parti su sistemi esterni per dare la possibilità a queste applicazioni di accedere alle API del sistema esterno.OAuth è un protocollo open, conforme alla metodologia RESTful, quindi facilmente applicabile da tutte quelle applicazioni scritte con linguaggi capacia di aprire socket.I principi fondamentali sono 2 (riportati dal sito ufficiale): - è un metodo facile per interagire con dati protetti, è un metodo sicuro con cui gli utenti forniscono gli accessi. - se si interagisce con i dati degli utenti si consiglia Oauth, perché permette di accedere ai dati degli utenti senza conoscerne le credenziali.In poche parole, l’utente autorizzerò un’applicazione ad accedere ai suoi dati presso il sistema esterno senza che l’applicazione conosca le credenziali dell’utente.

Lo utilizzano quasi tutti i big del web, come Facebook, Twitter, Yahoo!,Google,ecc.Di seguito spiegherò il flusso di autenticazione.

Il protocollo OAuth


Fase preliminare: lo sviluppatore dell’Applicazione deve registrare quest’ultima sul Servizio Esterno, indicando quali dati potranno essere recuperati.1 - L’ utente accede all’applicazione,(2) che contatta il sistema esterno per ricevere un “Unauthorized Request Token”(3);4 - L’applicazione ridirige l’ utente verso il sistema esterno, passando il token non autorizzato;5 - L’ utente decide di autorizzare l’applicazione direttamente sul sistema esterno;6 - Il sistema esterno ridirige l’utente verso l’applicazione passando un “Access Token”(7);L’applicazione accede ai dati dell’Utente presenti sul sistema esterno grazie al token autorizzato.

Il protocollo OAuth


All’inizio del Maggio 2010, il gruppo di lavoro di OAuth ha rilasciato la bozza della seconda versione.Le novità rispetto alla versione precedente riguardano:- 6 nuovi flussi di autenticazione (user-agent flow,web server flow, device flow, ecc.) per

le applicazioni che non prevedono browser- L’applicazione client non necessità per forza di meccanismi di crittografia, ma si utilizza

una connessione via https per l’autenticazione (basato sulle API di Twitter, poi implementato anche da facebook)

- Autenticazione meno complicata- I token forniti con OAuth 2.0 hanno un tempo di expires breve- Netta separazione dei ruoli tra il server responsabile della gestione delle richieste

OAuth e il server che gestisce l’autorizzazione dell’utente.

Differenze tra OAuth 1.0 e OAuth 2.0


Facebook utilizza il protocollo OAuth 2.0 per l'autenticazione e l'autorizzazione.Supporta diversi flussi per l'autenticazione da integrare con il proprio sito o la propria app, mobile o desktop che sia.

User LoginFacebook supporta 2 tipi diversi di flusso per il login dell'utente. - server-side, noto come flusso con codice di autenticazione - client-side, noto come flusso implicitoQuello server-side viene usato per fare una chiamata alle Graph API dal nostro web server, quello client-side per effettuare le chiamate tramite javascript su browser o da applicazioni mobile o desktop.

Indipendentemente dal tipo di flusso scelto, l'implementazione di Facebook dei flussi prevede 3 step: - user authentication, verifica che l'utente è quello che dice di essere - app authorization, verifica che l'utente conosce quali permessi l'applicazione avrà sui suoi dati - app authentication, verifica che l'utente sta fornendo le sue informazioni e non quelle di altriUna volta completati tutti questi step, all'app viene fornito uno user access token, che permette all'app di accedere alle informazioni dell'utente.

Facebook Authentication


L'autenticazione dell'utente e l'autorizzazione dell'app vengono effettuate contemporaneamente attraverso il popup OAuth.Quando si richiama questo popup si devono passare i parametri app_id (generata al momento di creazione dell'app) e l'URI di ritorno a cui il browser punterà dopo l'autorizzazione dell'app (*).https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL

(*) Il parametro redirect_uri deve ovviamente far parte del dominio su cui risiede l'app.

Se l'utente è già loggato, il popup valida il cookie di login salvato sul browser dell'utente, altrimenti vengonomostrati i campi di login.Una volta autenticato l'utente viene mostrata la lista di permessi che l'applicazione richiede all'utente.Di default l'app ha accesso alle informazioni pubbliche dell'utente.Per richiedere informazioni aggiuntive, come foto, note, link, ecc., si deve aggiungere un altro parametro all'url, cioè scope. Nel parametro scope vanno specificati i permessi da richiedere all'utente.https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream

Per la lista di tutti i permessi si guardi la reference: http://developers.facebook.com/docs/reference/api/permissions/

NB: Facebook ha verificato una proporzionalità inversa tra il numero di permessi richiesti ed il numero di utenti.

Server-side Flow

http://developers.facebook.com/docs/reference/api/permissions/


Se l'utente non garantisce i permessi l'OAuth Dialog redireziona(via HTTP 302) all'URI passato come parametro con alcuni parametri aggiuntivi: http://YOUR_URL? error_reason=user_denied& error=access_denied& error_description=The+user+denied+your+request.Se l'utente garantisce i permessi l'OAuth Dialog redireziona, come nel precedente, all'URI specificato aggiungendo però il parametro code : http://YOUR_URL?code=A_CODE_GENERATED_BY_SERVERAvendo il parametro code in mano si può procedere allo step finale, cioè l'app authentication, per ottenere l'access token da utilizzare per le chiamate API.Per farlo si devono passare all'URL https://graph.facebook.com/oauth/access_token questi parametri:- client_id=YOUR_APP_ID : parametro generato alla creazione dell'app- redirect_uri=YOUR_URL : come nello step precedente, è un URI che risiede sul nostro dominio,

su cui atterreremo una volta autorizzata l'app- client_secret=YOUR_APP_SECRET : parametro generato alla creazione dell'app- code=THE_CODE_FROM_ABOVE : il codice ottenuto appena primaquindihttps://graph.facebook.com/oauth/access_token? client_id=YOUR_APP_ID& redirect_uri=YOUR_URL& client_secret=YOUR_APP_SECRET& code=THE_CODE_FROM_ABOVE

Server-side Flow


Una volta autorizzata l'app, il server ci restituirà l'access token.Insieme all'access token avremo anche il parametro expires, contenente il numero di secondi prima che il token scada.Ovviamente se il token scade, si dovranno rifare tutti quanti i passaggi precedenti.

NB: per avere un access_token che non scada mai, bisogna richiedere come permesso quello di offline_access,permesso che però viene molto spesso negato dagli utenti.

Nel caso di un errore nell'autorizzazione dell'app, il server ci restituirà l'errore HTTP 400, contenente nel responsetipo e messaggio di errore.

Server-side Flow


La versione client-side usa anch'essa OAuthDialog ma con un parametro aggiuntivo che è il response_type.https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&response_type=tokenAnche qui, per i permessi aggiuntivi, si usa il parametro scope=permessi_da_richiedere.Una volta che l’utente è autenticato ed ha autorizzato l’app, il browser reindirizza al redirect_uri, però anziché passare il parametro code, passa l’access_token all’interno di un frammento dell’URI (#access_token).Dato che l’access_token è passato tramite frammento dell’URI, solo codice client-side potrà estrapolarlo.

Client-side Flow


Creare l’appSe non si sono mai create applicazioni, bisogna visitare la “Developer app”, che ci autorizza a creareapplicazioni.Per creare un app poi verrà verificato l’account dello sviluppatore attraverso la conferma del numero ditelefono o della carta di credito.


1. Cliccando su “+Crea Applicazione”, avremo questopopup in cui specificare nome dell’applicazione enamespace (vedremo dopo a cosa servirà).2. Il passo successivo prevede l’inserimento di un CAPTCHA fino ad arrivare al pannello di gestionedell’applicazione (figura 2).3. Arrivati a questo punto Facebook avrà generato:App ID e App Secret, dopo aver finito di compilare icampi Contact Email e Category andiamo ad inserire i campi Canvas URL e Secure Canvas URL(*) con ilnostro dominio sulla quale risiede l’app.La nostra app dovrà risiedere o sulla document root o su una sottocartella del dominio.Ad esempio:https://www.gardaland.it/facebook/TabRaptorCountdown/

(*) Dal 1° Ottobre 2011 tutte le applicazioni su Facebook dovranno essere su domini con certificato HTTPS, mentre la fase di testing si può fare con il dominio senza certificato.

Configurare l’app


La nostra app viene comunque caricata all’interno di Facebook, quindi ci sonoimposizioni da parte della piattaforma sulle dimensioni.

Dimensioni del Canvas

Canvas widthLa larghezza della nostra app può essere impostata su fissa a 760px o su fluida.Nel qual caso la larghezza fosse fluida l’iframe che contiene l’app avrà width al 100%.Se il nostro contenuto sfora la larghezza massima verrà mostrata la scrollbar sotto o tagliatoparte del contenuto.Canvas heightL’altezza del canvas può essere impostato su fluida(come sopra) o su Settable (default: 800px).Lo sviluppatore può cambiare l’altezza dell’iframe attraverso alcune funzioni messe a disposizione da Facebook quali:- FB.Canvas.setSize()- FB.Canvas.setAutoResizePer approfondire si veda l’ How-To: Build an app on Facebook with Fluid Canvas

http://stackoverflow.com/questions/4113934/how-is-oauth-2-different-from-oauth-1


Quando un utente accede alla nostra app, Facebook ci invia informazioni sull’utente Attraverso una richiesta HTTP POST alla nostra canvas, contenente un parametro (signed_request) formato da un oggetto JSON encodato in base 64).Al primo accesso, l’oggetto signed_request contiene solamente:- user : array composto dai dati sulla localizzazione ed età dell’utente- algorithm : stringa che descrive il meccanismo usato per il sign-in della richiesta- issued_at : timestamp di quando è stato creato il parametro signed_requestPer ottenere i permessi sull’utente da parte dell’applicazione è bene utilizzare il popup dirichiesta permessi (OAuth Dialog) attraverso il redirect (top.location.href dato che siamo in un iframe) all’url:https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE

che permetterà all’applicazione di avere accesso ai permessi di base sull’utente (nome,sesso, immagine profilo,ecc).Per ottenere altri permessi quali email, post dell’utente, ecc. è necessario modificare l’url aggiungendo alcuni parametri, nella forma:https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE&scope=email,read_stream

Per tutte queste operazioni c i verrà in aiuto l’SDK uffic iale.

Autorizzazioni


<?php $app_id = "YOUR_APP_ID";

$canvas_page = "YOUR_CANVAS_PAGE_URL";

$auth_url = https://www.facebook.com/dialog/oauth?client_id= . $app_id . "&redirect_uri=" . urlencode($canvas_page);

$signed_request = $_REQUEST["signed_request"];

list($encoded_sig, $payload) = explode('.', $signed_request, 2);

$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);

if (empty($data["user_id"])) {echo("<script> top.location.href='" . $auth_url . "'</script>");

} else {echo ("Welcome User: " . $data["user_id"]);

}?>Semplice esempio di come autenticare l’utente sulla nostra app.

Primo esempio


Facebook mette a disposizione degli sviluppatori vari tipi di kit di sviluppo tutti open-source.Quelli che si utilizzano per lo sviluppo di applicazioni sono quelli Javascript e PHP.Per lo sviluppo di applicazioni mobile Facebook mette a disposiz ione altri 2 SDK, uno per iOS e uno per Android.

Javascript SDKLa versione Javascript mette a disposiz ione una serie di funzioni che effettuano le chiamate alle API server-side per l’accesso alle API Rest, alle Graph API e alle Dialogs. Inoltre aiuta nella generazionedel markup XFBML (linguaggio di markup proprietario) per i Social Plugins.

PHP SDKLe funzionalità che va a ricoprire sono pressochè identiche a quello Javascript (tranne le Dialogs).La differenza nei tempi di caricamento dell’applicazione però è notevole. E’ disponibile su GitHub.

iOS SDKMette a disposiz ione una starting-class scritta ovviamente in Objective-C.Le funzioni che supporta sono SSO, Graph API e le Dialogs.Vale sia per iPhone che per iPad e iPod Touch. Reperibile sempre su GitHub.

Android SDKSimile a quello per IOS anche a livello di funzioni offerte, anch’esso disponibile su GitHub

SDKs


L’SDK javascript viene caricato asincronamente tramite una funzione javascript, per via della velocità di caricamento della pagina.

<div id="fb-root"></div><script> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', // App ID

channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); // Additional initialization code here }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script>

La funzione window.fbAsyncInit inizializza l’SDK utilizzando le opzioni maggiormente usate.

Javascript SDK


Il channel file serve per risolve alcuni problemi cross-browser di caricamento dell’SDK via Javascript. Deve puntare ad un URL che contenga solamente il tag:

<script src="//connect.facebook.net/en_US/all.js"></script>

e deve essere cachato :<?php$cache_expire = 60*60*24*365;header("Pragma: public");header("Cache-Control: max-age=".$cache_expire);header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');?><script src="//connect.facebook.net/en_US/all.js"></script>

E’ un parametro opzionale ma raccomandato dalla piattaforma stessa perché risolve 3 problemi già conosciuti.1. Pagine che contengono frame comunicanti non fanno funzionare correttamente i Social Plugins se non con il channel file.2. Se la pagina contiene file audio o video con autoplay, l’utente sentirà 2 stream audio perché la pagina viene ricaricata per permettere la comunicazione cross-domain.3. Evita che le statistiche “sballino”.

Altra nota riguardo al cambiamento del document.domain via javascript, in quanto anche il channel file deve avere lo stesso document.domain per poter funzionare.

Channel File


Per ottenere i permessi ad accedere ai dati dell’utente dobbiamo utilizzare la funzioneFB.login (Callback function, options):

FB.login(function(response) { if (response.authResponse) { console.log('Welcome! Fetching your information.... ');

FB.api('/me', function(response) { console.log('Good to see you, ' + response.name + '.');

FB.logout(function(response) { console.log('Logged out.'); }); }); } else { console.log('User cancelled login or did not fully authorize.'); } }, {scope: 'email'});

Questa funzione non solo autentica l’utente sulla nostra app, ma ci permette di chiedergli a quale delle sue informazioni vogliamo accedere, tramite l’opzione scope.

Questa funzione aprirà il classico popup di facebook contenente la lista dei permessi che vogliamo ottenere dall’utente.La procedura avviene tramite il protocollo OAuth, dal 13 Dicembre passato alla versione 2.0 .Altre funzioni possibili sono: FB.logout, FB.getLoginStatus (asincrona – ci dice lo stato attuale dell’utente) e FB.getAuthResponse (sincrona – ci restituisce il record creato al momento dell’autenticazione contenente la signed_request, l’access_token e l’ID dell’utente.

Autenticazione e Autorizzazione JS


Accedere ai dati dell’utente è molto semplice, si utilizza la funzione FB.api(‘URL’, callback function).

FB.api('/me', function(response) {alert('Your name is ' + response.name);

});

Si può anche utilizzare FQL (Facebook Query Language) per eseguire query via REST.

FB.api( { method: 'fql.query', query: 'SELECT name FROM user WHERE uid=me()' }, function(response) { alert('Your name is ' + response[0].name); });

Chiamate alle API


L’SDK PHP mette a disposizione una serie di funzionalità per accedere alle API server-side.E’ scaricabile da GitHub(https://github.com/facebook/php-sdk).

Spesso usato per operazioni di gestione del profilo (modifiche alle foto, video, ecc.) , elimina la necessità di gestire “manualmente” l’autorizzazione degli access_token.

Per prima cosa si dovrà inizializzare l’SDK per mezzo dei dati ottenuti durante la creazione dell’app.

PHP SDK

https://github.com/facebook/php-sdk












Una volta scaricato il file zip contenente l’SDK da GitHub, si devono copiare i file della cartella src all’interno della cartella che ospiterà tutta l’app.Successivamente si istanzia l’oggetto Facebook con i 2 dati principali ricavati al momento della creazione (app_id e app_secret).

require_once("facebook.php");

$config = array();$config[‘appId’] = 'YOUR_APP_ID';$config[‘secret’] = 'YOUR_APP_SECRET';$config[‘fileUpload’] = false; // optional

$facebook = new Facebook($config);

L’opzione fileUpload autorizza o meno l’SDK ad effettuare l’upload di file sul proprio server.Ovviamente dovrà essere attiva questa configurazione anche sul server.

Installazione e inizializzazione


Per effettuare le operazioni di autenticazione ed autorizzazione, l'SDK PHP mette a disposizione alcuni metodi statici:

Login$params = array( 'scope' => 'read_stream, friends_likes', 'redirect_uri' => 'https://www.myapp.com/post_login_page');$loginUrl = Facebook::getLoginUrl($params);

Logout$params = array( 'next' => 'https://www.myapp.com/after_logout' );$logoutUrl = Facebook::getLogoutUrl($params);

Retrieve User$uid = Facebook::getUser();

Autenticazione e autorizzazione


Per effettuare una chiamata alle API ed avere accesso ai dati dell'utente ci viene in soccorso il metodo Statico: Facebook::api(/* Polymorphic*/)

Un breve esempio:<?php// […] Installazione e inizializzazione SDK$user_id = $facebook->getUser();if($user_id) { try { $user_profile = $facebook->api('/me','GET'); echo "Name: " . $user_profile['name']; } catch(FacebookApiException $e) { $login_url = $facebook->getLoginUrl(); echo 'Please <a href="' . $login_url . '">login.</a>'; error_log($e->getType());error_log($e->getMessage()); } } else { $login_url = $facebook->getLoginUrl(); echo 'Please <a href="' . $login_url . '">login.</a>';}?>

Chiamate alle API


- Access Token Tool

- Test Users

- Platform Status

- Debugger

- Graph API Explorer

- Javascript Test Console

Tools


E' un utile strumento per ottenere gli access_token dalle applicazioni che si sono create ed avere informazioni utili sulle proprie apps.

Access Token Tool


Facebook mette a disposizione la possibilità di impostare alcuni utenti come tester dell'applicazione.Si possono usare utenti esistenti ed aggiungerli tramite il pannello di gestione dell'app, nella sezione Edit Roles oppure esiste la possibilità di crearne di nuovi solo per la fase di testing

attraversole Graph API.

https://graph.facebook.com/APP_ID/accounts/test-users? installed=true &name=FULL_NAME &permissions=read_stream &method=post &access_token=APP_ACCESS_TOKEN

(*) installed : imposta se l'utente di test ha già installato l'app oppure no

Test Users


Facebook mette a disposizione una pagina pubblica in cui è possibile vedere lo stato aggiornato in tempo reale di tutta la piattaforma.

Platform Status


Un altro utile strumento è il debugger, una pagina che presenta un campo di test in cui inserire le pagine contenente i metatag per opengraph, oppure il link per il Like Button o per i Social Plugins.

Debugger


Lo strumento più utile di tutta la suite messa a disposizione da Facebook è il Graph API Explorer.Permette di fare tutti i test del caso con le API per andare a capire quale API andare ad utilizzare.

Graph API Explorer


La Javascript Test Console è un tool che permette di andare a testare tutte le funzionalità dell'SDK Javascript. Sono presenti già molti esempi di codice da lanciare per vedere il funzionamento dell'SDK.

Javascript Test Console


- FQL

- Dialogs

- Credits

- I18N

- Chat API

Funzionalità avanzate


FQL è un linguaggio, molto simile a SQL, creato da Facebook per interrogare la vaste base dati inmaniera facile.Ad esempio la query: SELECT uid FROM user WHERE is_app_user = 1 AND uid IN (SELECT uid FROM friend WHERE uid1 = $app_user)ritorna tutti gli id degli utenti amici dell'utente che sta utilizzando l'app.Un altro esempio per recuperare nome,cognome e avatar dell'utente che sta usando l'app.function getQuery() { FB.api('/me', function(response){ var query = FB.Data.query('select name, hometown_location, sex, pic_square from user where

uid={0}', response.id); query.wait(function(rows) { $('#fql-data').html('Il tuo nome:' + rows[0].name + "<br/>" +'<img src="' + rows[0].pic_square + '" alt=""/>' + "<br/>"); }); });}

La chiamata si divide in 2 fasi:1 - l'esecuzione della query2 - l'attesa dei risultati tramite query.wait() che poi popola un div html.FQL è molto utile perchè permette di utilizzare funzionalità avanzate che con le Graph API sarebbero impossibili, ad esempio inserire chiamate multiple in una singola chiamata.Per approfondire si rimanda alla documentazione ufficiale: http://developers.facebook.com/docs/reference/fql/

Facebook Query Language (FQL)


I popup tipici di Facebook(dialogs) mantengono la grafica di facebook senza necessitare di permessi degli utenti per essere usati, in quanto i popup stessi necessitano dell'interazione dell'utenteal suo interno.

Possono essere usati in qualsiasi tipo di applicazione, su Facebook, su un sito o su un app mobile.

Si possono utilizzare tramite la costruzione di un URL o utilizzando uno degli helper dei vari SDK.

Ogni dialog è si compone di un metodo ed alcuni parametri.L'URL inizia con "http://www.facebook.com/dialog", seguito dal metodo e dai parametri.

Ad esempio il popup per inserire un post sulla propria bacheca. http://www.facebook.com/dialog/feed? app_id=123456789101112& redirect_uri=http://www.example.com/response/

Dialogs


Facebook credits è un sistema di pagamento che permette agli sviluppatori di applicazioni Facebook di guadagnare in maniera semplice e veloce.

Utilizzare Facebook Credits è utile perchè:- gli utenti sono già fidelizzati con Facebook e si fidano ad effettuare pagamenti per mezzo della piattaforma- Facebook supporta più di 80 metodi di pagamento in 50 paesi ed è in continua espansione

I vari flussi di pagamento vengono effettuati attraverso un set di API messe a disposizione della piattaforma.Un esempio di come questo metodo di guadagno è stato vantaggioso è Farmville.Gioco in flash che conta circa 29 milioni di utenti attivi ed un sistema di pagamento effettuato tramiteFacebook Credits e Paypal.Poi quotata in borsa (la prima azienda ad essere quotata in borsa per la venditadi beni virtuali) è arrivata ad essere valutata circa 5 miliardi di dollari.

Ovviamente Facebook offrendo il bacino di utenti più grande del mondo vuole anche qualcosa in cambio, si parla di circa il 30% delle transazioni effettuate tramite la piattaforma.

Facebook Credits


Facebook è disponibile in più di 70 lingue grazie ad un particolare framework che permette alla comunità stessa di tradurre le etichette. L'elenco di tutte le lingue disponibili si trova all'interno di un file XML(http://www.facebook.com/translations/FacebookLocales.xml).Le lingue sono codificate tramite i codici standard ISO e il codice del paese separate da un'underscore (it_IT, en_US).Per determinare la lingua da utilizzare più opportunamente, basta esaminare la signed_request di un utente

eandare ad interpretare il valore della variabile locale.

Le varie localizzazioni vengono fatte attraverso l’SDK Javascript, al momento dell’inclusione://connect.facebook.com/it_IT/all.js

Facebook mette a disposizione un app, per effettuare il translating della propria seguendo alcuni semplici passi descritti qui: https://developers.facebook.com/docs/internationalization/

Internazionalization

https://developers.facebook.com/docs/internationalization/


Una cosa molto utile che ha fatto Facebook è stato di mettere a disposizione le API della chat per dare la possibilità di integrare un sistema di instant-messaging sul proprio sito/app.Le API si basano sugli standard XMPP (Extensible Messagging Presence Protocol).Sono molto semplici da implementare, e la documentazione è molto ricca(https://developers.facebook.com/docs/chat/), intanto un breve elenco di funzionalità e limitazioni.

Funzionalità messe a disposizione:- Autenticazione sulla piattaforma tramite SASL (Simple Authentication and Security Layer)- Autenticazione dell’utente tramite Username/Password con Digest-MD5- Messaggi inviati e ricevuti in plain-text- Invio delle notifiche di stato (sto scrivendo, online, offline) sullo standard XEP-0085 (sempre XMPP)- Ricezione di vCard sullo standard XEP-0054 (semper XMPP)- Ricezione delle foto dagli amiciLimitazioni imposte:- non si inviano/ricevono messaggi in HTML- La rimozione degli utenti dalla chat-room non avviene secondo gli standard XMPP- Non c’è nessun controllo sui messaggi inviati (parolacce, insulti, ecc.)- Altre funzionalità che non rispettono gli standard XMPP

Chat API

https://developers.facebook.com/docs/chat/













Potete trovare altro materiale relativo allo sviluppo di applicazioni Facebook:

Online- Documentazione ufficiale (https://developers.facebook.com/docs/)- BigThink (http://www.bigthink.it/)

Cartaceo- IoProgrammo (ne parla in svariati numeri)- Creare applicazioni per Facebook (

http://www.hoepli.it/libro/creare-applicazioni-per-facebook/9788882339920.asp)

Prossimamente online sul mio blog:- www.good2know.it

Fonti

https://developers.facebook.com/docs/

http://www.bigthink.it/

http://www.hoepli.it/libro/creare-applicazioni-per-facebook/9788882339920.asp

http://www.good2know.it/


Do You Have Any Questions?

Filippo [email protected]

Documents

Sviluppare applicazioni Facebook