11 Commenti
Oggi vedremo la terza parte della guida alla creazione di applicazioni Facebook, concentrandoci in particolar modo sul codice FBML.
Se vi siete persi le prime due parti, rimediate subito:
Il codice FBML è un’estensione dell’HTML che permette di costruire il layout della nostra applicazione e di inserire elementi che sono propri dell’interfaccia di Facebook, come pulsanti, form, foto, elementi multimediali, popup e molto altro.
Le pagine, infatti, sono un misto di HTML e d FBML che verrà poi parsato da Facebook, il quale si occuperà di sostituire i tag speciali con l’HTML e gli stili necessari.
Per un elenco di tutti i tag a disposizione vi rimando a questa pagina della wiki, mentre in questo articolo vedremo più nello specifico come organizzare gli elementi di layout.
Prima di iniziare, vi consiglio di ripassare come abbiamo strutturato i file dell’applicazione la volta scorsa, in particolare andremo ad agire su index.php e config.php.
Creiamo ora un nuovo file, header.php, dove metteremo gli elementi di layout comuni a tutte le pagine, come l’header ed il menu.
L’header
Iniziamo la nostra pagina con l’header contenente il titolo e l’icona dell’applicazione. E’ sufficiente usare questo tag:
L’icona comparirà di fianco al titolo.
Il menu a tab
Nel caso avessimo più pagine, quello che non può mancare è un bel menu a tab, come ogni applicazione che si rispetti. Anche in questo caso esistono dei tag appositi che facilitano il tutto:
<fb:tab-item href="<?php echo $url; ?>/" title="Home" <?php echo ($page == 'index.php') ? 'selected="true"' : ''; ?> />
<fb:tab-item href="<?php echo $url; ?>/invite.php" title="Invita Amici" <?php echo ($page == 'invite.php') ? 'selected="true"' : ''; ?> />
<fb:tab-item href="http://www.bigthink.it" title="BigThink.it" align="right" />
</fb:tabs>
Ricordate la variabile $url che abbiamo inserito nel file config.php della scorsa lezione? Ecco che ora ci torna utile. Aggiungete a tale file anche la variabile $page, in modo che contenga il nome della pagina corrente:
Come potete vedere, il codice precedente crea un menu a tre tab: i primi due sono le pagine interne e rimangono selezionate quando siamo sulla pagina relativa. Il terzo è il link al mio blog e ho deciso di separarlo, allineandolo a destra grazie all’attributo align.
Menu azioni
Un altro tipo di menu che può tornarci utile è quello con le possibili azioni che possiamo compiere:
<fb:action href="new.php">Crea un nuovo album</fb:action>
<fb:action href="you.php">Le tue foto</fb:action>
</fb:dashboard>
Come potete vedere, le varie voci andranno inserite all’interno di una dashboard.
Messaggi e notifiche
Altro elemento utile per interagire con l’utente sono i messaggi di errore e le notifiche a schermo, ad esempio per mostrare informazioni dopo il submit di un form. Anche qui abbiamo dei tag predefiniti:
<fb:message>Attenzione</fb:message>
Non hai compilato tutti i campi.
</fb:error>
<fb:success>
<fb:message>Successo!</fb:message>
Modifiche salvate correttamente
</fb:success>
E questo è il risultato:
Il foglio di stile
Se grazie all’FBML possiamo utilizzare l’interfaccia di Facebook, potremmo anche aver bisogno di definire dei nostri propri stili CSS. L’importazione del foglio di stile avviene nel modo classico, dobbiamo solo ricordarci che viene salvato in cache e potrebbe non aggiornarsi se facciamo delle modifiche. Ecco quindi come fare:
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $myurl; ?>/style.css?ts=<?php echo $ts; ?>" />
Al nome del file viene aggiunto il timestamp dell’ultima modifica, in modo che la cache sia sempre sincronizzata.
Vi rimando invece a questa pagina per una spiegazione dettagliata degli stili predefiniti di Facebook.
Si conclude così questa terza lezione alle applicazioni Facebook. Nella prossima parte vedremo come creare dei form ed esploreremo nel dettaglio altre funzionlità che il framework ci mette a disposizione.
Stay Tuned!
Ciao, ottima guida
A quando la prossima con i form?
Già, hai ragione…. Mi sono un po’ fermato, in effetti.
Vedrò di proseguire la guida appena riesco!
Ciao!
la guida è ottima ho però un problema…
ho creato un’applicazione di prova inserendo l’header, il menu e le azioni.
Il problema è che viene visualizzato tutto come se non esistesse alcun foglio di stile (ho provato sia in facebook che nel sito dell’applicazione ).
Bisogna forse includere qualche libreria FBML?
Tnx
mh… un colpo di genio ( o scemità se vogliamo…
Giusto per segnalarlo a qualche sbadato come me:
Ho risolto modificando in questo modo:
impostazioni applicazione > modelli > Metodo di restituzione: FBML
Avevo impostato come “iframe”.
Grazie lo stesso
FBML Error (line 32): illegal tag “noscript” under “fb:canvas” -> questo errore a cosa è dovuto? Grazie in anticipo ragazzi!
Hai x caso risolto? da lo stesso errore a me x il tag body
Grazie ragazzi a chi risponderà
risolto
Dato che tu hai risolto con i tag body mi spiegheresti brevemente come hai risolto?
ciao, complimenti per gli articoli. Ho dei problemi, sicuramente errore mio, con i menu’ a tab, mi da errore 404. la cosa strana è che se clicco sul tab il link alla pagina è giusto, mentre quando viene visualizzato l’errore mi viene riproposto il link senza ultimo slash:
<fb:tab-item href="/invite.php” title=”Invita Amici” />
nell’errore 404 cosi’… a video: http://apps.facebook.com/abtestapiinvite.php
Non ti funziona perchè non hai messo l’indirizzo completo nel tab, come ho fatto io nel mio codice, usando la variabile: $url.
Serve il percorso completo della pagina
ho creato il riquadro fbml ma x sbaglio l ho spostato in bacheca e mi spunta come scheda non so come rimetterlo nei riquadri.mi spieghi come si fa ke sto impazzendo.grazie