Modificare la pagina Facebook con benvenuto e applicazioni FBML

Tutti i grandi marchi aziendali più grossi e famosi come Coca Cola, Nokia, Apple, gestiscono pagine fan su Facebook che "piacciono" a milioni di persone in tutto il mondo.
Queste pagine sono progettate professionalmente e hanno certe caratteristiche utili, che chiiunque può implementare da solo, senza coinvolgere professionisti del settore.
Per esempio, la pagina di Apple iTunes, permette di cercare applicazioni a destra all'interno di Facebook.
Un negozio online di magliette consente di commentare il design preferito, senza lasciare Facebook, mentre la CNN, cosi come la pagina Navigaweb su Facebook, ha tutte le storie ultime notizie elencate in ordine cronologico.

Come si fa a modificare pagine Facebook in modo che che sembrino siti internet veri e propri, completi di applicazioni interattive ed informazioni personalizzate?

AGGIORNAMENTO: FBML non esiste più, vedi la guida per creare la pagina Facebook.

Senza assumere progettisti o programmatori esperti, si può seguire questa guida per modificare la pagina.
Si può usare il linguaggio interno di Facebook e, installando l'editor FBML sulla propria pagina, si possono aggiungere: una pagina di benvenuto (che diventa la "Scheda di arrivo" personalizzata per invitare i visitatori a diventare sostenitori o fan), sondaggi, presentazioni, slideshow di foto, feed RSS di notizie aggiornate, video, player musicale, commenti e altro ancora.

1) Dopo aver creato la pagina Facebook relativa al proprio blog o al proprio business, l'editor FBML per usare questi codici è Static HTML iFrame che è anche uno dei migliori editor per modificare le pagine Facebook con gli iFrame HTML.

2) Tornando alla propria Fan Page di cui si è amministratori, fare clic sul link Modifica pagina nella barra laterale e cliccare su "Modifica" nella sezione FBML.

3) Questo è l'ambiente di sviluppo dove si può inserire sia codice FBML (con le API di Facebook), sia il normale HTML.
Chi conosce il linguaggio di programmazione dei siti internet, l'html, non avrà difficoltà a inserire immagini, tabelle, paragrafi e tutto quello che vuole.
Chi non ha alcuna esperienza con l'html, basta che continua a leggere la guida.

4) Dopo aver creato una pagina statica come quella di benvenuto, tornare alle impostazioni del modifica pagina, cliccare su "Modifica" sotto le "Impostazioni Bacheca" e selezionare, alla voce "Scheda di arrivo predefinita per tutti gli altri", la nuova pagina creata.

5) Per le altre nuove sezioni create, basta individuarle nella lista, cliccare su "Impostazioni applicazione" ed aggiungerle come schede.

Tornando ora al punto 3, vediamo qualche esempio di codice da usare per creare nuove applicazioni e sezioni personalizzate sulla pagina Facebook.

1) La prima cosa, obbligatoria per tutti, è creare una pagina di benvenuto che appaia quando qualcuno visita la pagina Facebook.
Si tratta di una copertina o di una homepage che può contenere una immagine di benvenuto, un commento di presentazione ed un invito a sostenere la pagina cliccando sul tasto "Mi Piace".
Si deve quindi inserire una immagine personale creata ad hoc per Facebook ed usare un codice di questo tipo.
<p><img src="http://esempio.com/mi-piace.jpg"></p>
<p><b>Iscriviti a ... su Facebook </b></p>
<p><b>Clicca sul bottone "Mi Piace" qui sopra</b></p>
L'unica condizione da rispettare è che l'immagine non sia più larga di 520px.

Per aggiungere una pagina di benvenuto, si può anche utilizzare l'applicazione automatica WelcomeTab.

2) Se si volessero aggiungere schede, notizie e regali (come un coupon, un buono omaggio, il download di un libro o di una guida), nascosti ai non fan e disponibili soltanto ai sostenitori che hanno cliccato il tasto "Mi Piace", si può creare una condizione di questo tipo:
<fb:visible-to-connection>
// inserire cosa deve essere visibile solo ai fan
<h2>Bentornato</h2>
<p>Puoi <a href="book.pdf">Scaricare</a> il tuo regalo</p>.
<fb:else>
// il benvenuto a chi non è ancora sotenitore
<img src="http://esempio.com/mi-piace.jpg">
</fb:else>
</fb:visible-to-connection>

2) Incorporare un video su YouTube in una scheda fissa della pagina Facebook è molto facile, basta fare copia-incolla del seguente codice nella casella di FBML e sostituire l'ID del video con quello di YouTube.

<fb:swf swfsrc="http://www.youtube.com/v/ID"
imgsrc="http://img.youtube.com/vi/ID/default.jpg"
width="480" height="360" />

3) Per aggiungere un feed RSS e pubblicare su Facebook le nuove notizie scritte sul proprio blog, si può utilizzare l'applicazione Networked Blogs per averli in un'altra scheda.

4) Per aggiungere una casella Commenti in modo che tutti i commenti dei lettori appaiano in una scheda separata, si può creare una nuova sezione con FBML, tramite questo codice:
<fb:comments xid="navigaweb" canpost="true" showform="true">
<fb:title>Lascia un commento</fb:title>
</fb:comments>
Bisogna cambiare xid con una parola a piacere e univoca.

5) Aggiungere moduli, finestre di dialogo, popup.
I popup semi-trasparenti si possono portare sulla pagina Facebook seguendo la guida degli sviluppatori per fb:dialog.
Ad esempio, il codice seguente, se aggiunto come nuova sezione FBML, va a creare un link "Chi siamo" sulla pagina Facebook.
<fb:dialog id="dialog" cancel_button=1>
<fb:dialog-title>Chi siamo</fb:dialog-title>
<fb:dialog-content>Navigaweb.net è un blog di informatica e tecnologia</fb:dialog-content>
<fb:dialog-button type="button" value="Yes" href="http://www.navigaweb.net" />
</fb:dialog>
<a href="#" clicktoshowdialog="dialog">Clicca qui</a> per accedere al sito

6) Incorporare una applicazione esterna in flash può servire, tra le altre cose, a:
- Inserire una presentazione Slideshare (Slideshare serve a pubblicare presentazioni Powerpoint online come fossero video YouTube).
<fb:swf swfsrc='http://slideshare.net/swf/ssplayer2.swf?doc=ID_HERE'
width='515' height='425' imgsrc="thumbnail.jpg" />
Sostituire l'indirizzo dell'immagine di anteprima pubblicata online e, nel caso, l'indirizzo con l'swf

- Aggiungere una Chat Room con cui l'amministratore della pagina può comunicare in chat con i sostenitori quando essi sono collegati alla pagina.
I fan non potranno usare questa chat per comunicare tra loro.
Per questo obiettivo, si può usare MeeboMe inglobandolo in una nuova sezione FBML con il seguente codice:
<fb:swf swfsrc='http://widget.meebo.com/mm.swf?ID'
width='515' height='425' imgsrc="chat-thumbnail.jpg" />.

- Creare sondaggi con PollDaddy
<fb:swf swfsrc='http://i.polldaddy.com/poll.swf?p=ID_HERE'
width='250' height='500' imgsrc="poll-thumbnail.jpg" />

7) Aggiungere podcast e altri lettori musicali per suonare MP3
Facebook rende estremamente facile incorporare file audio MP3 da ascoltare online sulle pagine di Facebook.
Bisogna soltanto caricare i file mp3 su internet (in Skydrive o in Google Docs) ed usare il seguente codice nel FBML.
<fb:mp3 src="http://example.com/podcast.mp3"
title="titolo" artist="nome_artista" />

8) Aggiungere un box per far suggerire la pagina agli amici
Il codice è di questo tipo
<fb:request-form
action="http://www.facebook.com/navigaweb?v=app_4949752878"
type='Navigaweb su Facebook'
content='Penso ti piacerà Navigaweb, te lo consiglio
<fb:req-choice url="http://www.facebook.com/navigaweb"
label="Manda" />'
<fb:multi-friend-selector actiontext="Consiglia Navigaweb ai tuoi amici" rows="3" cols="3" max="20" showborder="true"/>
</fb:request-form>
Si basa su due funzioni del linguaggio FBML di Facebook ossia: la fb:request-form e la fb:friend-selector.
Per vederlo in azione e provarlo potete andare sulla pagina Facebook di Navigaweb.net.

In un altro articolo, 10 migliori applicazioni per una pagina Facebook

In alternativa, può essere più semplice inglobare file swf come visto nel punto 6, usando applicazioni web che fanno ascoltare musica osu Facebook come Mixpod.