Guida al linguaggio FBML di Facebook

Per velocizzare alcuni compiti in fase di visualizzazione o cambiare l’aspetto grafico, e importante conoscere l’ FBML ( Facebook Markup Lenguage ), che in parole povere non è altri che il “linguaggio HTML di Facebook“.
Gli elementi FBML possono essere divisi in gruppi e li riconosciamo dato che iniziano tutti con fb:
Con tali elementi possiamo:

Sostituire un tag:
<fb:name uid=”codiceutente” useyou=”false”>
che sostituirà il codice utente col nome dell’utente.

Programmazione condizionata:
<fb:if-can-see uid=”12345678″ what=”wall”>
<p>Vuoi scrivere sulla bacheca? Vuoi scriverci?</p>
<fb:else>
<p>Che vuoi fare?</p>
</fb:if-can-see>

In questo modo possiamo dunque visualizzare diversi messaggi in base alla possibilità di un utente di visualizzare la bacheca ( wall ).
Molto importanti sono inoltre i widget, quindi ad esempio volendo inserire una bacheca nell’applicazione potremmo usare il comando:

<fb:wall>
<fb:wallpost uid=”loggedinuser”>
Scrivi sulla bacheca di kinglion.it
</fb:wallpost>
</fb:wall>

Non tutti gli elementi HTML sono pero supportati da FBML, tra questi troviamo: “noscript, dir, menu, colgroup, col, buttom, applet, basefont, iframe, map, area, object, param, html, head, body, frameset, base, isindex, link, meta, style e title.
Tutti i tag che iniziano con fb:if si possono usare in una pagina canvas, e non in un box profilo, mentre quelli che iniziano con fb:visible, sono destinati solo alla visualizzazione del profilo.

<fb:if-is-friends-whit-viewer uid=”12345678″>
Ciao tu e <fb:name uid=”12345678″ useyou=”false”> vi conoscete!
<fb:else> Non vi conoscete.
</fb:else>
</fb:if-is-friends-whit-viewer>

Tale esempio, consente di verificare se l’utente loggato, e l’altro sono amici.
Di seguito vi lascio con le tabelle degli elementi FBML, e per maggiori info vi rimando alla wiki ufficiale di Facebook.

Visualizzazione dati utenti e gruppi
fb:name Visualizza il nome dell’utente
fb:grouplink visualizza il nome del gruppo
fb:user specifica se il contenuto e posseduto dall’utente
fb:pronoun visualizza il pronome dell’utente
fb:profile visualizza l’immagine del profilo

Visualizzazione dati del profilo
fb:wide Visualizza il contenuto del profilo in modalita wide
fb:narrow visualizza il contenuto del profilo in modalita narrow
fb:profile-action visualizza link sotto la foto
fb:user-table visualizza nome e foto dell’utente
fb:subtitle spacifica un sottotitolo
fb:action Visualizza un action link

Visualizzazione dei messagi di stato
fb:error visualizza messaggio di errore standard
fb:explanation visualizza messaggio di errore standard con spiegazione
fb:success messaggio di operazione andata a buon fine
fb:message visualizza intestazioni di messaggio

Dialog Box
fb:dialog visualizza una finestra di dialogo in pop up
fb:dialog-title visualizza il titolo di una finestra di dialogo
fb:dialog-content contenuto da mostrare nelle finestre di dialogo
fb:dialog-button aggiunge un pulsante

Creazione e gestione di form
fb:editor crea un form su due colonne
fb:editor-button inserisce un pulsante di accettazione
fb:editor-buttonset inserisce un contenitore attorno i pulsanti
fb:editor-cancel inserisce un pulsante di cancellazione
fb:editor-custom inserisce contenuti in FBML per opzioni
fb:editor-date inserisce un’area per la gestione delle date
fb:editor-divider inserisce una linea orizzontale di separazione
fb:editor-month inserisce un’area per la gestione di mesi
fb:editor-text inserisce un campo orizzontale per scrivere del testo
fb:editor-textarea inserisce un campo per scrivere testo
fb:editor-time inserisce un campo per la gestione degli orari

Creazione di un form di richiesta
fb:request-form per chiedere un’azione
fb:multi-friend-input sceglie amici da invitare
fb:request-form-submit crea un pulsante per confermare un invito
fb:req-choice inserisce un pulsante in basso

Visualizzazione di informazioni multimediali
fb:iframe aggiunge iframe alla pagina
fb:photo visualizza un foto facebook
fb:mp3 ascolto di flash audioplayer
fb:swf visualizza un ogetto flash
fb:fvl visualizza un file fvl
fb:silverlight visualizza file Microsoft SilverLight

Navigazione della pagina
fb:dashboard visualizza la testata della dashboard
fb:action crea un action link
fb:create-button aggiunge un pulsante di creazione
fb:help aggiunge link per fornire aiuto
fb:header visualizza la testata
fb:header-title visualizza il titolo della testa
fb:owner-action inserisce un action link
fb:tabs visualizza un gruppo di link per la navigazione
fb:tab-item visualizza link alla navigazione

Condizioni di controllo
fb:is-in-network visualizza il contenuto se l’user e in una specifica rete
fb:if-can-see visualizza il contenuto se l’user supera il controllo privacy
fb:if-can-see-photo visualizza la foto se l’user ha il permesso di vederla
fb:if-is-app-user visualizza il contenuto se l’user ha accettato le condizioni del servizio
fb:if-is-friends-whit-viewer visualizza il contenuto se l’user e amico
fb:if-is-group-member visualizza il contenuto se l’user e nel gruppo
fb:if-user-has-added-app visualizza il contenuto se l’user ha aggiunto l’applicazione al suo profilo
fb:if visualizza il contenuto se l’espressione e vera
fb:else visualizza il contenuto se l’espressione e falsa
fb:switch getta una serie di condizioni
fb:default per i tag che restituiscono una stringa vuota

Gestione allegati
fb:attachment-preview visualizza un link in bacheca con allegato

Creazione di facebook widget
fb:wall crea una bacheca
fb:wallpost visualizza messaggi in bacheca
fb:wallpost-action inserisce un action link
fb:board crea un form di discussione
fb:comments visualizza i commenti
fb:friend-selector visualizza box per la selezione di amici
fb:typeahead-input visualizza una casella type-ahead
fb:type-ahead-option visualizza preferenze type-ahead
fb:random sceglie un item a caso
fb:random-option sceglie a caso dei codici
fb:share-button visualizza un pulsante per condividere
fb:submit trasforma immagini o link in pulsanti per condividere

Varie ed eventuali
fb:fbml specifica la versione di FBML
fb:fbmlversion visualizza la versione di FBML in debug
fb:title visualizza il titolo pagina
fb:js-string visualizza un codice in un blocco JavaScript
fb:redirect redirect ad un nuovo URL
fb:ref Visualizza FBML proveniente da una sorgente ref o URL
fb:time visualizza ora e data
fb:user-agent adatta i diversi browser per la visualizzazione
fb:google-analytics inserisce codice per usare google analytics
fb:mobile adatta la visualizzazione a dispositivi mobili

Questo articolo è stato scritto da Pasquale Venditto di kinglion.it. Ne è vietata la riproduzione anche parziale del contenuto.