�ݺ�ߣ

Intesys Talk
Sviluppare applicazioni Facebook

Intesys, 11/07/2011

Sommario
1. Introduzione 4. In pratica 5. Tools
2. Risorse principali 1. Creare l’app 1. Access Token Tool
1. Canvas Page 2. Configurazione 2. Test Users
3. Il canvas 3. Platform Status
2. Social Channels
3. Insights
4. Autorizzazioni 4. Debugger
5. Esempio 5. Graph API
3. Concetti chiave della 6. SDKs Explorer
piattaforma 1. Javascript SDK
6. Javascript Test
1. Social Graph 1. Channel File
2. Autenticazione e
Console
2. Open Graph Autorizzazione 5. Funzionalità avanzate
3. Graph API 3. Chiamate alle
API 1. FQL
4. OAuth 2. PHP SDK 2. Dialogs
5. Authentication 1. Installazione e
1. Server-side Flow
Inizializzazione 3. Credits
2. Autenticazione e
2. Client-side Flow Autorizzazione 4. I18N
3. Chiamata alle 5. Chat API
API
5. Fonti e ringraziamenti

Intesys Talk
Pagina 

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.

Intesys Talk
Pagina 

Le 3 risorse principali

Strumenti messi a disposizione da Facebook
- Canvas Page
- Social Channels
- Insights

Intesys Talk
Pagina 

Canvas Page
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.

Intesys Talk
Pagina 

Social Channels
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.

Intesys Talk
Pagina 

Insights
Insights è 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.

Intesys Talk
Pagina 

Concetti chiave
Prima 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

Intesys Talk
Pagina 

Social Graph
Tutti 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)

Intesys Talk
Pagina 

Open Graph Protocol

L’OGP è un protocollo creato da Facebook nel 2008 (evolutosi fino ad oggi – vedi la “timeline”), che
trasforma 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.

Intesys Talk
Pagina 

Modifiche a Open Graph Protocol
Dal settembre 2011, dopo la conferenza
F8, 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.

Intesys Talk
Pagina 

Graph API

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=19292868552
L'impiego delle API verrà spiegato a breve, dopo la creazione e configurazione delle nostre
apps.

Intesys Talk
Pagina 

Il protocollo OAuth

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.

Intesys Talk
Pagina 

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.

Intesys Talk
Pagina 

Differenze tra OAuth 1.0 e OAuth 2.0

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.

Intesys Talk
Pagina 

Facebook Authentication
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 Login
Facebook 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 implicito
Quello 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 altri
Una volta completati tutti questi step, all'app viene fornito uno user access token, che permette all'app
di
accedere alle informazioni dell'utente.

Intesys Talk
Pagina 

Server-side Flow
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 vengono
mostrati 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.

Intesys Talk
Pagina 

Server-side Flow
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_SERVER
Avendo 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 prima
quindi
https://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

Intesys Talk
Pagina 

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 response
tipo e messaggio di errore.

Intesys Talk
Pagina 

Client-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=token
Anche 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.

Intesys Talk
Pagina 

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

Intesys Talk
Pagina 

Configurare l’app
1. Cliccando su “+Crea Applicazione”, avremo questo
popup in cui specificare nome dell’applicazione e
namespace (vedremo dopo a cosa servirà).
2. Il passo successivo prevede l’inserimento di un
CAPTCHA fino ad arrivare al pannello di gestione
dell’applicazione (figura 2).
3. Arrivati a questo punto Facebook avrà generato:
App ID e App Secret, dopo aver finito di compilare i
campi Contact Email e Category andiamo ad inserire i
campi Canvas URL e Secure Canvas URL(*) con il
nostro 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.

Intesys Talk
Pagina 

Dimensioni del Canvas
La nostra app viene comunque caricata all’interno di Facebook, quindi ci sono
imposizioni da parte della piattaforma sulle dimensioni.

Canvas width
La 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 tagliato
parte del contenuto.
Canvas height
L’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.setAutoResize
Per approfondire si veda l’ How-To: Build an app on Facebook with Fluid Canvas

Intesys Talk
Pagina 

Autorizzazioni
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_request
Per ottenere i permessi sull’utente da parte dell’applicazione è bene utilizzare il popup di
richiesta 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 ci verrà in aiuto l’SDK ufficiale.

Intesys Talk
Pagina 

Primo esempio
<?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 . /FMRiggio/sviluppare-applicazioni-facebook/"&</script>");
} else {
echo ("Welcome User: " . $data["user_id"]);
}
?>
Semplice esempio di come autenticare l’utente sulla nostra app.

Intesys Talk
Pagina 

SDKs
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 disposizione altri 2 SDK, uno per iOS e uno per
Android.

Javascript SDK
La versione Javascript mette a disposizione 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 generazione
del markup XFBML (linguaggio di markup proprietario) per i Social Plugins.

PHP SDK
Le 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 SDK
Mette a disposizione 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 SDK
Simile a quello per IOS anche a livello di funzioni offerte, anch’esso disponibile su GitHub

Intesys Talk
Pagina 

Javascript SDK
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 = /FMRiggio/sviluppare-applicazioni-facebook/"/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.

Intesys Talk
Pagina 

Channel File
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=/FMRiggio/sviluppare-applicazioni-facebook/"/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=/FMRiggio/sviluppare-applicazioni-facebook/"/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.

Intesys Talk
Pagina 

Autenticazione e Autorizzazione JS
Per ottenere i permessi ad accedere ai dati dell’utente dobbiamo utilizzare la funzione
FB.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. Talk
Intesys
Pagina 

Chiamate alle API
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);
}
);

Intesys Talk
Pagina 

PHP SDK
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.

Intesys Talk
Pagina 

Installazione e inizializzazione
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.

Intesys Talk
Pagina 

Autenticazione e autorizzazione
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();

Intesys Talk
Pagina 

Chiamate alle API
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=/FMRiggio/sviluppare-applicazioni-facebook/"& . $login_url . '">login.</a>';
error_log($e->getType());error_log($e->getMessage());
}
} else {
$login_url = $facebook->getLoginUrl();
echo 'Please <a href=/FMRiggio/sviluppare-applicazioni-facebook/"& . $login_url . '">login.</a>';
}
?>

Intesys Talk
Pagina 

Tools

- Access Token Tool
- Test Users
- Platform Status
- Debugger
- Graph API Explorer
- Javascript Test Console

Intesys Talk
Pagina 

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

Intesys Talk
Pagina 

Test Users
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 attraverso
le 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

Intesys Talk
Pagina 

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

Intesys Talk
Pagina 

Debugger
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.

Intesys Talk
Pagina 

Graph API Explorer
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.

Intesys Talk
Pagina 

Javascript Test Console
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.

Intesys Talk
Pagina 

Funzionalità avanzate

- FQL
- Dialogs
- Credits
- I18N
- Chat API

Intesys Talk
Pagina 

Facebook Query Language (FQL)
FQL è un linguaggio, molto simile a SQL, creato da Facebook per interrogare la vaste base dati in
maniera 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=/FMRiggio/sviluppare-applicazioni-facebook/"& +
rows[0].pic_square + '" alt=""/>' + "<br/>");
});
});
}
La chiamata si divide in 2 fasi:
1 - l'esecuzione della query
2 - 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/
Intesys Talk
Pagina 

Dialogs
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'utente
al 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/

Intesys Talk
Pagina 

Facebook Credits
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 tramite
Facebook Credits e Paypal.
Poi quotata in borsa (la prima azienda ad essere quotata in borsa per la vendita
di 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.

Intesys Talk
Pagina 

Internazionalization
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
e
andare 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/

Intesys Talk
Pagina 

Chat API
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 amici
Limitazioni 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

Intesys Talk
Pagina 

Fonti
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

Intesys Talk
Pagina 

Do You Have
Any Questions?

Filippo Riggio
Developer
filippo.riggio@intesys.it

Intesys Talk
Pagina 

�ݺ�ߣ

Sviluppare applicazioni Facebook

More Related Content

Sviluppare applicazioni Facebook