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!
ma quindi io non posso prepararmi la pagina HTML con programmi tipo Nuv e poi fare copia>incolla sulla pagina?
Ciao,
io vedo che mi cambia i css
es:
se nel css al div #ciao ho come immagine di background http://google.it/image.jpg
in facebook controllando con firebug nella mia app il css mi segna un altra immagine vuota
ciao, volevo dire che ho risolto era una banalità, un errore di upload…
mi chiedevo jquery e fbml possono andare insieme?
Se fai un’applicazione iframe
Io vorrei inserire in un riquadro FBML
questo codice solo che non me lo legge
Ciao, volevo sapere perchè la mia applicazione non interpreta i tag FBML.
Nel senso che viene eseguito tutto il codice php(compreso quello che utilizza le API Facebook), ma ogni volta che faccio un tag del tipo mi salta tutta la parte del tag.
Per esempio il codice è:
echo “Ciao, !”;
Ed il risultato che mi trovo è:
Ciao, !
anzichè Ciao, Matteo Rizzi!
Spero saprai aiutarmi,grazie
Ciao, nelle impostazioni hai settato l’applicazione come FBML invece di IFRAME?
Grazie, ho risolto il prblema…era perche usando un localhost come apache non andava a collegarsi direttamente con facebook.
Ora che uso uno spazio web come altervista è tutto ok.
Un ultima cosa:
Ci sono dei metodi come notifications_send che utilizza le API facebook che il wiki di facebook developer dice che sono deprecati e effettivamente utilizzandoli non funzionano.
Secondo te c’è bisogno di una nuova versione della classe facebook.php e facebook platform di php5 ??
Oppure questi metodi non sono piu utilizzabili per le applicazioni facebook?
Grazie
ciao a tutti io ho lo stesso problema di benni!!!!vi prego aiutatemi!
Allora, salve a tutti. Io parto da zero, e vorrei mettere foto/scritte ai lati della mia pagina su fb, ma non ho la più vaga idea nemmeno per cominciare! Non potreste rendere il tutto un po’ più semplice? xD
Grazie mille (:
Complimenti ancora per la guida!
Ma volendo io posso personalizzare l’idex di application builder?
Grazie ancora per il chiarimento! Solo che se io imposto come modello->iframe poi i tag fb:header, fb:tabs ecc non funzionano… ho dimenticato di settare qualcosa?!
Se imposti il modello iframe non puoi utilizzare i tag del FBML (facebookmarkup language) quindi le scelte sono due:
o ti accontenti di includere le tue pagine senza sfuttare FBML (quindi imposti iframe) oppure devi settare FBML.
Questo è quello che ho capito
ciao e complimenenti per le guide
Marco
Ciao, queste guide sono veramente fantastiche… aiutano a capire molto meglio la documentazione ufficiale.
Mi chiedevo come potrei includere la libreria jquery e un rispettivo plugin utilizzando il modello fbml, e non iframe. Ho provato con il classico tag ma non funziona… in rete ho trovato discussioni in cui si consiglia di usare fbjs.
Grazie in anticipo, un saluto!
Ciao. Se hai un’applicazione FBML, puoi usare solo un set limitato di javascript, oltre a FBJS. Se provi ad includere JQuery, non funzionerà.
Per poter usare quello che vuoi, l’unico modo è sviluppare un’app iframe.
Grazie per la risposta tempestiva, veramente gentilissimo!
Sinceramente preferivo utilizzare fbml, per mantenere l’interfaccia dell’app il più possibile simile a facebook.
In alternativa ho visto che nella documentazione c’è un tag chiamato , usandolo non potrei includere la libreria jquery?
Volendo potrei anche evitare di usare jquery, mi serviva perchè ho dei div affiancati con float:left e float:right, e volevo usare un plugin per mantenere la stessa altezza tra i due div (equalheight.js)… ma so che tu mi consiglierai di usare i css, dico bene? Grazie ancora e un saluto!
Opsss, è scomparso il nome del tag… fb:iframe
Dunque: se crei un’app con iframe, puoi comunque utilizzare i tag FBML all’interno e anche usare FBJS.
Il tag <fb:iframe> serve ad inserire pagine dentro all’iframe e non librerie javascript ^^
Mi sa che ti tocca usare i css per risolvere il problema
bravo ghido qst è una bella cosa dare supporto io che sono web engineeer ti seguo perchè spesso mi rinfreschi la memoria ahah e pi ho scoperto cose su face interessanti,ma dimmi come caspita fai a creare pagine interamente colorate al posto del default di facebook azz grazie
Ciao, per creare pagine “colorate”, inserendo le immagini, leggi questo articolo: http://www.bigthink.it/web-20/facebook/facebook-landing-tab-pagina-fan/
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
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
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! come hai risolto? grazie
FBML Error (line 32): illegal tag “noscript” under “fb:canvas” -> questo errore a cosa è dovuto? Grazie in anticipo ragazzi!
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
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 Ghido, una mia amika su facebook sulla sua pagina ha creato un riuadro con delle scritte anche io voglio ma come posso fare??