Ricetta per creare schede personalizzate con Facebook iFrames

Dall’11 marzo Facebook manderà in pensione l’FBML statico, fino a ieri utilizzato per personalizzare le pagine di Facebook, in favore dell’iFrame.

Vediamo cosa cambia con questo nuovo linguaggio:

• L’uso dell’iFrame permette di utilizzare ogni tipo di tecnologia web (come html, JavaScript, CSS) avendo la possibilità di creare dei veri e propri siti

• Questo da la possibilità di inserire gli script di Google Analytics, con il vantaggio di un monitoraggio più dettagliato (gli accessi alla propria pagina, la provenienza) di quello offerto da gli inshgt di Facebook.
• Inoltre si avrà la possibilità di modificare le diverse schede di Facebook semplicemente modificando l’URL delle singole schede nelle impostazioni dell’applicazione.

Vediamo come costruire un iFrame




1. Creare la pagina che vogliamo inserire all’interno di Facebook.

Es. http://www.nomesito.it/facebook/scheda.php.

Questa pagina potrà contenere al suo interno form, gallerie immagini, script di google analytics, video e quant’altro. L’unica limitazione da tenere in considerazione è la larghezza della pagina che non dovrà superare i 520px.


2. Creare un’applicazione su Facebook.

Perché le schede in iFrame possano funzionare è necessario creare un’applicazione specifica su Facebook. Per farlo sarà necessario accedere alla pagina Sviluppatori (http://www.facebook.com/developers/) e selezionare Crea una nuova applicazione.
Per poter effettuare quest’operazione sarà necessario avere un account autenticato.
Per farlo ci sono due metodi:

• inserire il proprio numero di telefono dove verrà inviato un codice da inserire su FB
• inserire il numero di carta di credito, non è una truffa! Non verranno accreditati pagamenti, a meno che non si attivino delle campagne pubblicitarie.

Inserire il nome dell’applicazione che vogliamo creare, che non può contenere le parole “face”o la sigla “FB” per evitare fraintendimenti con il brand di Facebook.

A questo punto possiamo inserire tutte le informazioni sulla nostra applicazione come il logo o la lingua. Una volta terminato selezionare la voce Integrazioni Facebook dove andremo ad inserire in Canvas Page un url a piacere legata alla nostra pagina.

Alla voce Canvas Url inserire l’url della cartella del server che ospita la pagina relativa all’iframe.

Es. http://www.nomesito.it/facebook/
(ovvero la cartella del mio server che contiene scheda.php);

Come Canvas Type scegliere IFrame e come “Dimensione dell’iframe” selezionare Show scrollbars.

In Nome Tabs inserire il nome che vorremo visualizzare all’interno della nostra scheda.

In Scheda url inserire il nome del file che vorremo visualizzare

Es. scheda.php



3. Aggiungere l’iframe tab alla pagina Facebook

Una volta completata la creazione dell’applicazione, selezionare pagina del profilo dell’applicazione e cliccare su Aggiungi alla mia pagina .

A questo puto nella vostra pagina selezionando le schede in altro troverete la vostra nuova tab!

Enjoy!

Tweet