Tempo fa avevo scritto una guida su come personalizzare una pagina Fan Facebook inserendo contenuti HTML e filmati SWF grazie all’uso di FBML.

Facebook ha decretato la morte di FBML e anche le sue applicazioni native, che permettevano di aggiungere un Tab Personalizzato alle nostre Pagine Fan.

Con questa scelta di eliminare FBML, possiamo trovare un’alternativa, ovvero quella di creare tab personalizzati utilizzando iFrame.

Questa tecnica permette di inglobare una qualsiasi pagina web, come vedremo in questo esempio, all’interno di un Tab in Facebook.

Premessa

Questa guida permette di creare un tab iFrame associato a un’applicazione facebook creata da noi interna.

Spesso non si hanno le idee ben chiare su Tab Facebook interne ed esterne, ma per avere maggiore agilità io consiglio una esterna.

In questo modo avremo la possibilità di creare tab personalizzati dinamiche, con integrazioni di diversi linguaggi, oltre che con HTML, con PHP o ASP.

Qualora avessimo bisogno solo di una pagina statica HTML, possiamo utilizzare applicazioni FB chiamate Static HTML.

Creare una Pagina Esterna

Andiamo a creare la nostra pagina esterna con qualsisi contenuto, da inglobare nel Tab Personaizzato iFrame.

Capirete subito che le potenzialità di usare una qualsiasi pagina web con PHP, Asp, Integrazioni DB, JavaScript, Video, Swf e altri contenuti tipici, che usiamo per la progettazione di un qualsiasi sito web.

La mia pagina esterna sarà questa: BoxDesign.

Come vedete le dimensioni del contenuto in larghezza sono di 520px, larghezza massima da usare per non eccedere dall’iFrame.

Altre indicazioni da usare sono quelle di impostare un margin e padding zero al body, in questo modo si adatterà all’iFrame senza spazi aggiuntivi.

body {
margin: 0px;
padding: 0px;
}

Avevamo visto in passato come creare una Pagina Fan efficace e usare alcune tecniche per attirare nuovi fan.

Ora con la possibilità di inserire qualsiasi contenuto tramite iFrame, potremo potenziare le nostre strategie.

Creare l’Applicazione

Per associare la pagina web esterna precedentemente creata al nostro Tab dobbiamo creare un’applicazione.

Questa operazione noiosa, spaventa in molti e quindi non viene utilizzata quasi mai dai NON adetti ai lavori.

Vediamo come invece è semplice creare un’applicazione e associare la nostra pagina web come tab iFrame.

Andiamo nella pagina Sviluppatori Facebook e selezioniamo Applicazioni e subito dopo in alto a destra Crea un’Applicazione.

Non sei verificato come Sviluppatore?

In questo preciso istante ci potrebbe essere il primo problema, ovvero quello di riceve da Facebook un avviso di non essere verificati come sviluppatori.

Se vogliamo creare applicazioni Facebook dovremo per forza aggirare il problema registrando il nostro numero di cellulare su Facebook Mobile.

Facebook utilizza il numero di cellulare per verificare l’account e permettere di sviluppare applicazioni.

Una volta inserito il vostro numero di cellulare, vi sarà inviato un messaggio di verifica da inserire nuovamente nell’area di richiesta.

Vi consiglio, qualora non vogliato notifiche o costi aggiunti, di andare nella sezione di configurazione Mobile è disattivare in seguito la voce “Funzione di Invio SMS”

Una volta fatta questa verifica, ritornate nella pagina Sviluppatori Facebook + Crea Applicazione, il messaggio non sarà più presente in quanto saremo stati verificati in precedenza.

Configuriamo l’Applicazione

Assegnamo un nome alla nostra applicazione e accettiamo i termini di Facebook.

Il nome dell’applicazione potrà essere cambiato successivamente.

Infine selezioniamo la lingua con la quale vorremo configurare la nostra app.

Ci verrà chiesto di inserire un codice di sicurezza anti spam, inseriamolo e selezioniamo continua.

Informazioni

Una volta fatto questo ci troveremo nell’area Informazioni Base chiamata Basic.

In questa pagina avremo pieno controllo sulle maggiori impostazioni della nostra applicazione.

Avremo la possibilità di inserire una icona identificativa della pagina applicazione e tab applicazione selezionando Modifica Icona.

Inoltre potremo scegliere e confermare il nome della nostra applicazione, indirizzo email di contatto e categoria.

Web Site

Andiamo ora nell’etichetta Web Site e inseriamo il dominio ed eventuale cartella su cui è la nostra pagina web.

Nel mio caso è su juliusdesign.net quindi inserisco la URL completa di http://

Ricordo che a volte è necessario inserire anche il nome della pagina index o default con estensione.

App on Facebook

Nell’etichetta App on Facebook dovremo inserire la URL completa della pagina da inglobare.

Inoltre dovremo inserire la URL con protocollo sicuro HTTPS, dal 1° Ottobre 2011 obbligatoria per tutte le app fb.

L’attivazione di un certificato ha dei costi, ma ti spiego come puoi creare una Tab o Applicazione Facebook utilizzando Dropbox con conseguente certificato SSL gratuito.

Page Tab

Nell’etichetta Page Tab dovremo inserire il nome della tab che verrà visualizzato sulla nostra pagina fan.

Inoltre dovremo inserire anche la URL completa della pagina che verrà inglobata come iFrame e dal 1° Ottobre anche con protocollo HTTPS.

Roles

Questa pagian ci permette di visualizzare chi siano gli amministratori e sviluppatori dell’applicazione.

In ogni momento potremo eliminare o aggiungere amministratori o sviluppatori selezionando Aggiungi in alto a destra.

Inoltre vi segnalo la possibilità di aggiungere altri ruoli come Beta Tester, User per Statistiche e User Test.

Associamo l’Applicazione Tab alla Nostra Pagina Fan

Da alcune settimane Facebook ha cambiato di nuovo le sue belle regole, e la pagina profilo di un’applicazione non viene più generata in automatico.

Dovremo creare manualmente la pagina andando su Advanced > Crea una Pagina su Facebook.

Una volta fatto questo passaggio avremo creato la nostra pagina profilo per l’applicazione.

Dovremo ora associare la nostra pagina profilo applicazione alla nostra pagina fan.

Per farlo ecco un interessante e utile URL immediata consigliata dall’amico Daniele di Bigthink.

Basta inserire l’App ID della nostra applicazione appena creata in questa URL:

http://www.facebook.com/add.php?api_key=APPID&pages

Ecco un esempio con l’applicazione BoxDesign.

La tua APPID la trovi sempre nel pannello applicazioni, sotto al titolo della tua applicazione.

Pagina Applicazione Tab

Torna sulla Tua Pagina Fan

Se abbiamo fatto tutte queste azioni in modo corretto, nella nostra Pagina Fan, troveremo il Tab appena creato.

Puoi vedere la pagina fan JuliusDesign con il Tab personalizzato BoxDesign.

Questa guida è stata scritta grazie a BigThink.

Queste pagine personalizzate tramite l’inclusione di iFrame, ci permetterà di craere delle vere e proprie pagine con diverse funzionalità e utilità per i nostri clienti o brand.

Ti è piaciuta questa Guida?

Letture Consigliate per Facebook


Autore: Giuliano Ambrosio

Creative Strategist e Designer Freelance di Torino, fonda il blog JuliusDesign nel 2007, attualmente collabora con diverse agenzie su tutta Italia con le quali ha avuto modo di lavorare per diversi big brand.