Ti ricordi come era facile creare una landing page per Facebook? Purtroppo le cose sono cambiate e da metà marzo non è più possibile utilizzare l’applicazione FBML.

Ci Arrendiamo? No perché ci viene in aiuto il tab iFrame, una scheda che visualizza dei contenuti provenienti da una pagina esterna (una pagina del nostro sito ad esempio) sulla Fan Page di Facebook.

Pagina HTML

Crea una pagina in HTML con tutto quello che ti serve (immagini, testo, video, javascript, form), copia e incolla il codice su un file di testo e salvalo facendo attenzione a cambiare l’estensione del file in .html, rinominandolo index.html.

Carica il file index.html e i file necessari (immagini, video, etc.) sul tuo spazio hostin per ottenere un indirizzo come https://www.miosito.com/facebook/index.html. Il limite di larghezza della pagina è 520px ma ti consiglio di non superare i 500 px per evitare una pagina troppo larga da scorrere manualmente.

Applicazione Facebook

Adesso è necessario creare un applicazione per visualizzare il tab sulla Facebook Fan Page. Vai sulla pagina sviluppatori Facebook e cliccare su crea nuova applicazione (se è la prima volta vi verrà richiesto di autenticarvi tramitetelefono).

Nella schermata che ti appare inserisci il titolo che vuoi dare alla tab (non usate parole come Facebook, FB) e selezionare la lingua. Clicca su “sono d’accordo con i Termini di Facebook” e arrivi alla pagina informazioni:

facebook

Qui puoi aggiungere logo, email e una breve descrizione. Fatto ciò spostati alla sezione sito Web e inserisci l’url che indirizza al tuo file index.html, scrivendo solo la cartella di destinazione (senza index.html) come nella figura.

facebook iframe landing page

Ora vai su Facebook integration. In Canvas page inserisci il nome della pagina, Canvas URL con la cartella di destinazione ovvero https://www.miosito.com/facebook/. Infine selezionare iFrame e Auto-resize.

facebook iframe

In Page tabs selezionare iFrame e in nome Tab scrivere di nuovo il nome della pagina. In Scheda URL inserire l’ url completo (https://www.miosito.com/facebook/index.html).

Passiamo alle prossime schermate: nella prima devi cliccare su “pagina profilo dell’applicazione” e nella seconda “aggiungi alla tua pagina” per inserire nella Fan Page il tab che hai creato. Ecco un esempio di pagina Facebook creata con il tab iFrame.

facebook landin page

Vuoi fare della tab appena nata la tua home page? Basta andare sulla Facebook Fan Page, cliccare su “modifica Pagina” a destra in alto, clicca ancora su “gestisci autorizzazioni” e alla voce “prima scheda visualizzata” selezionare il tab creato. Infine salvare le modifiche.

Questo articolo è stato scritto da Andrea Lupi, guest blogger per My Social Web.

17 COMMENTI

  1. Ho già creato dei tab per alcune welcome page. Ciò che mi piacerebbe sapere è se c’è un modo per aggirare la questione “ssl” a partire da ottobre. Voglio dire: siete al corrente se c’è un modo per dotare il mio sito di certificato di sicurezza senza spendere le centinaia di euro che ho visto proposte sul web? Complimenti per gli articoli interessanti e per il valido aiuto quotidiano!

    • Ciao Sarah,

      Ammetto la mia personale carenza su questo argomento e spero che qualche lettore possa aiutarti (forza ragazzi)!

      Ti ringrazio per i complimenti e continua a seguirmi.

  2. Che io sappia purtroppo no… comunque resta da vedere se realemnte in tutte le applicazioni sarà obbligatorio utilizzare il certificato.

    …forse nasceranno servizi appostiti a bassso costo, ma per il momento è presto dirlo, dipende sempre dalla richiesta di mercato.

  3. Concordo sulla richiesta di Sarah… e poi l’SSL sarà retroattivo o le pagine vecchie funzioneranno com’è successo per le FBML?

    Ah approfitto per un’altra questione… creando una pagina html si può riuscire nel meccanismo per cui solo i fan possono vedere solo certi contenuti? Al momento mi pare fattibile solo per pagine realizzate in php ma magari mi sbaglio 😉

  4. Ciao Riccardo,
    grazie per il link verso il mio post.

    Volevo intanto confermare che l’applicazione che suggerisco nel mio articolo è davvero “notevole”. Supera il problema dell’SSL per quegli utenti che navigano su Facebook in https ed oltre a questo consente di fare tante altre cose molto rapidamente. Presto credo che la utilizzerò anche sulla mia pagina, per ora mi sono limitato a testarla in maniera grezza.

    🙂

  5. Scusate ma la mia ignoranza, ho fatto tutti i passaggi come esposto nel tutorial, ma quando clicco su aggiungi alla mia pagina la finestra che mi si apre è vuota, facilmente ho qualche grossa lacuna; qualcuno mi vuole illuminare,
    Grazie a tutti

  6. Innanzitutto grazie mille per il post davvero utile e spiegato molto bene!
    Posso poi esporvi un mio problema?
    Le pagine di benvenuto che andiamo a creare, devono avere un’altezza massima?
    Superati i 785px di height a me compare la barra di scorrimento!
    C’è soluzione a ciò?? 🙂
    Grazieeee e ancora complimenti

  7. Ciao,

    Innanzitutto complimenti per il post, davvero chiarissimo!
    Ho seguito passo per passo la vostra guida e ho riscontrato solo un problema nell’ultimo passaggio.

    Dopo il salvataggio delle modifiche, dovrei poter visualizzare, a sinistra sotto”link correlati”, la voce” Pagina profilo dell’applicazione”. Le opzioni che visualizzo invece sono:

    Use Debug Tool
    Use Graph API Explorer
    See App Timeline View
    Promuovi con la pubblicità
    Traduci la tua applicazione
    Elimina l’applicazione

    Cliccando, quindi, sull’opzione “See App Timeline Views” (che suppongo sia la voce equivalente) mi riporta alla mia pagina profilo Facebook, ma non visualizzo l’opzione “Aggiungi alla mia pagina”.

    Sapete spiegarmi perchè?

    Grazie mille,

    Ambra

  8. CIao MrKid, scusami il ritardo nel rispondere. Come risoluzione ottimale della pagina ti consiglio 507 x 727pixel così non hai problemi nello scorrimento della pagina

  9. Ciao Ambra, questo procedimento l’ho sviluppato prima dell’avvento della TimeLine di facebook. Ora è da un pò che non controllo più la creazione delle pagine.
    In questi giorni mi informo e se scopro qualcosa di nuovo ti faccio sapere.

  10. Ciao Ambra, ho trovato un metodo per ovviare al tuo problema.
    E’ un pò rudimentale e non molto professionale ma risulta efficace al 100%. Allora prima di tutto crei il testo HTML della tua futura pagina, come desideri (immagini,link,testo).
    Adesso digita su facebook “Static HTML: iframe tabs” (un’applicazione molto usata per la creazione di pagine fb) e aggiungila al tuo profilo. Ora cliccha su “Welcome” e copi l’intero testo HTML sul primo riquadro che ti compare (sarebbe la pagina che i non fans vedono), mentre il riquadro sotto serve per inserire una pagina che vedranno solamente i tuoi fans (aspetto da non sottovalutare).
    Poi ovviamenti imposti Welcome come pagina di reindirizzamento.
    Ora hai la tua pagina facebook in bella vista.
    Spero di esserti stato di aiuto
    Saluti
    Andrea

  11. Ciao Chiara scusa il ritardo nel risponderti, comunque é ancora valido il procedimento.

    Se hai bisogno sono a disposizione 🙂

  12. Ciao Riccardo,
    però se apro il link descritto da te
    “sviluppatori Facebook” riesco a trovare solo “crea nuova applicazione” il resto dell’interfaccia è completamente diversa e non so come proseguire per inserire il sito web. C’è un altro procedimento?
    Grazie

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here