Piccole applicazioni crescono…

La mia applicazioncina Facebook, il famoso Numerologicon creato in un momento di frustrazione, continua a crescere… perlomeno questa è l’impressione sfogliando questi numeri:

facebook-app-stats-146

Si, non sono certo numeri da capogiro, ma magari sono destinati ad aumentare.. in particolare adesso che ho raggiunto un numero decente di utilizzatori ho potuto fare richiesta per inserirla nella directory applicazioni, il che dovrebbe darle maggiore risalto..

Comunque i 43 utenti che l’hanno installata hanno la mia piena gratitudine, e per ringraziarli, da buon sviluppatore, mi adopererò al fine di aggiungere funzionalità interessanti al software.. stay tuned! E se ancora non l’hai fatto, sii gentile e aggiungi anche tu il Numerologicon al tuo profilo! Non costa nulla ed è simpatico! :-)

Applicazioni Facebook: il pulsante “Condividi”

Un elemento molto importante in qualunque applicazione (e non solo) in ambiente Facebook è il pulsante condividi:

fb-puls-condividi

Tale pulsante permette infatti all’utente dell’applicazione di pubblicare una casella di link sul suo profilo, che ovviamente punterà all’applicazione e permetterà in tal modo di farle pubblicità verso tutti gli amici dell’utente (di solito si tratta di decine se non centinaia di persone raggiunte con un semplice click!).

Per creare il suddetto pulsante è sufficiente inserire uno specifico tag FBML (una specie di HTML per Facebook), il tag fb:share-button. Ecco un esempio, tratto dalla mia applicazione Numerologicon:

<fb:share-button>
<meta name=”medium” content=”application”/>
<meta name=”title” content=”Numerologicon”/>
<meta name=”description” content=”L’antica arte della numerologia, lo studio del significato dei nostri numeri e delle loro implicazioni sulla nostra vita. Scopri i tuoi numeri fortunati, leggi i loro significati e condividii con gli amici!”/>
<link rel=”image_src” href=”http://photos-f.ak.fbcdn.net/photos-ak-sf2p/v43/173/93221711021/app_1_93221711021_443.gif”/>
<link rel=”target_url” href=”http://apps.facebook.com/numerologicon/”/>
<
<fb:share-button class="meta">
 <meta name="medium" content="application"/>
 <meta name="title" content="Numerologicon"/>
 <meta name="description" content="L'antica arte della numerologia, lo studio 
    del significato dei nostri numeri e delle loro implicazioni sulla nostra 
    vita. Scopri i tuoi numeri fortunati, leggi i loro significati e 
    condividii con gli amici!"/>
 <link rel="image_src" href="http://photos-f.ak.fbcdn.net/photos-ak-sf2p/v43
    /173/93221711021/app_1_93221711021_443.gif"/>
 <link rel="target_url" href="http://apps.facebook.com/numerologicon/"/>
</fb:share-button>

All’interno del tag come si vede sono ospitati gli attributi che andranno a comporre il risultato finale: il tag “medium”, ad esempio, specifica che si tratta di un’applicazione, il tag “title” il titolo del blocco di condivisione, il “target_url” l’url del link, e così via. Il risultato è un semplice pulsante “Condividi”, del tutto identico a quello visto all’inizio del post, che se premuto mostrerà qualcosa del genere:

fb-app-condiviso

A questo punto, premendo il pulsante “condividi”, il nostro link è bello che pubblicato sul nostro profilo, e sarà visibile a tutti i nostri amici.

fb-app-condiviso2

Ecco fatto. Per concludere, ulteriori informazioni ed esempi sull’uso del tag fb:share-button si possono trovare sul Facebook Developer. Buon lavoro!

Creare un’applicazione per Facebook: le basi

Tutti usano Facebook (o almeno quasi), ma molti meno sono quelli che ne conoscono le reali potenzialità. Facebook non è solo un modo per scrivere cazzate o chiedere l’amicizia a centinaia di persone che neanche saluterei se le vedessi per strada, ma anche e soprattutto una vera e propria piattaforma di sviluppo per applicazioni sociali web based. Spinto dalla curiosità ho voluto cimentarmi nell’impresa di creare una semplice applicazione, e ho scoperto che, a parte i primi attimi di smarrimento, in realtà è semplice come bere un bicchier d’acqua (beh, a patto di conoscere un pò bene php, html e magari pure sql).

Il primo passo è installare sul proprio account fb (beh, si, ovviamente bisogna avere un account!) l’applicazione Developer (se avete l’account in lingua italiana si chiamerà “Sviluppatore”). La trovate all’indirizzo: http://www.facebook.com/developers/. Installatela, accettate le richieste ed è fatta.

A questo punto, accedendo all’applicazione (mediante l’indirizzo visto sopra o il pulsante che sarà apparso nel vostro menu di fb) troveremo in alto a destra il pulsante “Set Up New Application”, che ovviamente andrà premuto.

set-up-new-application-png

A questo punto comparirà la finestra di creazione dell’applicazione, in cui si chiede semplicemente di inserire il nome e accettare le licenze. A questo punto l’applicazione è nata, anche se per il momento solo in modo virtuale. Ci troviamo di fronte a una finestra in cui dobbiamo cominciare a configurare i parametri base della nostra creatura.

Le informazioni più importanti che abbiamo a disposizione in questa finestra sono la chiave segreta dell’applicazione (che, ovviamente, dovrà essere mantenuta segreta e servirà ad autenticare le transazioni tra l’applicazione e gli sviluppatori accreditati) e la chiave API, quella che dovrà essere usata per le chiamate alle API di facebook.

fb-application-keys

Accantoniamo un attimo questa bella pagina e soffermiamoci un attimo su un problema: abbiamo bisogno di un hosting che ospiti i files (e i database, se necessario) della nostra applicazione. L’hosting deve essere gratuito (cioè, non è obbligatorio, ma è sempre meglio :-) ), deve avere un database a disposizione (se richiesto dall’applicazione) e supportare il php5. Io mi sono iscritto a Joyent, che fornisce account gratuiti di prova progettati appositamente per hostare applicazioni per facebook; credo che per applicazioni non particolarmente massicce qualunque account gratuito possa andare bene.

Se come me volete usare Joyent, non dovete fare altro che andare qui, premere “sign up for a free facebook accelerator” in alto a destra, inserire un pò di dati (verà richiesto anche il codice API che abbiamo visto prima) e aspettare la mail con nome utente e password (si, il nome utente ve lo assegnano loro a random, ma tanto non apparirà scritto da nessuna parte all’utente della vostra applicazione quindi no problem).

Torniamo alla finestra di prima (quella dell’applicazione) e inseriamo ii dati sull’hosting: apriamo la sezione “Modelli” e compiliamo i primi due campi:

  • Canvas Page Url: l’url interno a facebook al quale ci si dovrà riferire per aprire la nostra applicazione, sotto forma di “apps.facebook.com/NOME”. Di solito coincide con il nome dell’applicazione o una sua versione abbreviata.
  • Canvas Callback Url: l’url vero e proprio della nostra applicazione, o meglio del server sul quale è hostata. Qualcosa del tipo “http://NOMEUTENTEJOYENT.facebook.joyent.us”.

A questo punto possiamo premere il pulsante “Salva impostazioni” in basso. Dovremmo tornare all’elenco delle nostre applicazioni. In fondo alla pagina vedrete un link “Example Code”:

fb-get-sample-code

Cliccandolo si aprirà un popup con del codice di esempio, un ottimo modo per iniziare a scriver un’applicazione (sono già predisposte le inizializzazioni degli oggetti per la chiamata alle api). Copiamo questo codice e incolliamolo in un file “index.php”.

Come ultima cosa ci dovremo procurare alcuni files di libreria che sono necessari al nostro codice php per interagire con facebook. Nella stessa pagina in cui ci trovavamo poc’anzi c’è un link “Scarica Libreria Client”. Scarichiamo il file e decomprimiamolo: avremo una serie di cartelle, di cui una si chiama “footprints” (contiene un’applicazione d’esempio) e un’altra “client”: i tre files contenuti in quest’ultima insieme al nostro index.php devono essere caricati sull’host, nella stessa cartella; se abbiamo un account Joyent la cartella da usare è “~/web/public”. Per caricare i files bisogna usare un client che supporti l’SFTP, e se siete uteiti mac vi consiglio l’ottimo Cyberduck (open source).

A questo punto, che ci crediate o no, la vostra applicazione è pronta a funzionare; il codice di prova mostra una semplice chiamata alle api di fb per visualizzare 25 amici della vostra lista, potete verificarlo voi stessi all’indirizzo http://apps.facebook.com/NOME (dove NOME è ovviamente il nome che avete inserito prima).

Bello, eh? Per ulteriori informazioni vi consiglio il sito ufficiale di supporto agli sviluppatori facebook, qui.

Nota promozionale: se vi è piaciuto il tutorial, andate a installare la mia prima applicazione, il Numerologicon. Attraverso un semplice script PHP e un pò di HTML colorato calcola alcuni vostri “numeri maestri” secondo i principi della numerologia e vi mostra un report, che potete poi anche pubblicare come box a fianco del vostro profilo! Si, lo so, non è nulla di eccezionale, ma è la mia prima applicazione e godrei un mondo nel vedere salire il “numero di utenti attivi”, senza contare il fatto che se otterrà un pò di notorietà sarò spronato a migliorarla e aggiungere informazioni e funzionalità aggiuntive, delle quali ovviamente parlerò su questo blog. Grazie! :-)