Facebook: Creare una Pagina Personalizzata con Tab iFrame

- Letture: 15.598

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: JD Pack Premium

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?

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Managing Partner di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

171 Commenti

  1. Ciao Giuliano
    esiste un modo per visualizzare contenuti dopo aver messo il mi piace senza utilizzare php ma solo html??
    Sai qualcosa in merito?
    ho provato a cercare sul web ma è piuttosto difficile!
    Grazie in anticipo

  2. Luna ha scritto:

    Lo ho fatto solo che funziona “solo per me” mentre se un altro utente apre la pagina è bloccato e non si vede niente- perchè non ne dà il consenso di mettere la pagina sull’Iframe: cosa che per me non accade- per cui non capisco!
    @Julius Come posso risolvere il problema?
    Attendo al più presto la risposta perchè ci sto lavorando per capire!

    Ciao Luna, non capisco bene il problema…

    ad esempio questa pagina da NON LOGGATA IN FB la vedi?

    http://www.facebook.com/JuliusDesign/app_212081655469712

    Ricorda che tutto quello all’interno della tua TAB deve essere sotto protocollo HTTPS

    Simone ha scritto:

    Saranno 24 ore che cerco nel web come associare un applicazione da me creata alla nuova pagina di facebook, ho effettuato ricerche multiple per ore e non c’è un sito che spieghi il nuovo metodo per associarla. Nemmeno all’interno dei tutorial di facebook
    riesci a trovare la soluzione

    Su questo ancora non saprei indicarti le modalità tecniche =(

    Cristiano ha scritto:

    Ciao Giuliano,
    ti chiedo delle delucidazioni riguardo ai campi “web site” e “App on Facebook”: io inserisco nel primo l’indirizzo del sito web (www.miosito.it) e negli altri la cartella in cui è presente il file che gestisce l’applicazione (tipo: http://www.miosito.it/facebook/, dove ci sarà miaapp.php). Tutto ok quando dalla pagina in cui è installata l’applicazione clicco sull’icona dell’app (il link assume questo indirizzo: https://www.facebook.com/url_pagina_fan/app_APPID), mentre se faccio direttamente http://apps.facebook.com/APPID, la pagina non si carica e genera l’errore: “The requested URL /facebook/ was not found on this server”.
    Non capisco!
    Puoi aiutarmi? Grazie

    Hai impostato la URL canvas per la pagina APP FB?

    Roberta ha scritto:

    Ciao Giuliano
    esiste un modo per visualizzare contenuti dopo aver messo il mi piace senza utilizzare php ma solo html??
    Sai qualcosa in merito?
    ho provato a cercare sul web ma è piuttosto difficile!
    Grazie in anticipo

    Diciamo di si, per verificare se l’utente è fan o meno si utilizza SDK disponibile per PHP, linguaggio dinamico. Ma è disponibile anche l’SDK in JavaScript e quindi utilizzando solo HTML

    https://developers.facebook.com/docs/reference/javascript/

  3. Ragazzi io ho provato tutto ma mi da sempre
    ” La pagina web non è disponibile ” o non trovata ecc… non so piu che fare perfavore ho veramente bisogno di aiuto…

  4. @ Cristiano:
    Grazie mille cristiano per la risposta, ho trovato il modo era SSL che mi dava problemi ora uso Dropbox ma li devo utilizzare index.html

    ora volevo sapere se c’era un modo per far sì che la gente per usare l’applicazione debba mettere mi piace prima.

    Qualche idea?

  5. Francesca

    Ciao! Ho seguito tutta la guida, usando dropbox per la secure page ma se vado a vedere la pagina dell’applicazione continua a comparirmi il messaggio “Not Found. The requested URL /tabs_brendolan/?fb_source=appcenter&fb_appcenter=1 was not found on this server.”
    Help! Non so più cosa fare, ho provato ad inserire gli url in mille modi, ma non trova mai la pagina…

  6. Alessandro

    Ciao Julius,

    anche io ho seguito la tua guida passo passo. Tutto funziona a perfezione, ma solo quando sono connesso a facebook con il mio account (ovvero quello dell’amministratore della pagina su cui ho inserito le Tab). Se nn sono connesso, o accedo con un altro account, e anche se si clicca su ‘mi piace’, non si visualizzano le nuove tab sotto la copertina del diario. Come mai?….

  7. Ricordati che tutti gli altri utenti possono visualizzare solo 12 tabs@ Alessandro:

  8. Alessandro

    ne ho inserite solamente quattro, ma vedono soltanto le foto e i mi piace….come mai?@ marco:

  9. Emanuela De Vecchi ha scritto:

    @ Alexio: Ciao Alexio, cercavo anch’io una soluzione per ridimensionare le tab oltre gli 800 pixel e sono capitata su questo post. Ormai è passato parecchio tempo e forse avrai già risolto, ma io ho trovato la soluzione che ho spiegato qui http://www.nonconvenzionale.it/blog/tab-facebook-oltre-800-pixel/

    Ciao Manueka, sorry è passato molto tempo… Si avevo utilizzato la soluzione da te indicata e confermo che è corretta e funzionante. Grazie

  10. Ciao a tutti,
    questa procedura è valida anche per embeddare un qualsiasi modulo contatti fatto con Google Docs/Drive? Se vado sul documento posso ricavare un codice embed del genere “<iframe src="https://docs.google.com/…": come lo gestisco? Basta che copi solamente l'url del documento così come appare in questo codice (rimuovendo quindi "<iframe…") oppure c'è una procedura diversa?

  11. Ciao Julius, è ancora attuale questo metodo??? O ora se ne utilizza un’altro??? Tu nella tua pagina hai utilizzato questo metodo?
    è possibile fare in modo che poi altre persone non trovino l’applicazione quando fanno una ricerca?

    Grazi

  12. Ciao Julius,
    grazie dell’articolo.
    Ho seguito tutto alla lettera e tutto ha funzionato.. tranne per il fatto che fb mi ha dato un blocco di 30 giorni subito dopo aver terminato la procedura…
    Qualcuno ha avuto lo stesso problema?
    Non sono molto attiva su fb quindi escludo che il motivo sia il fatto di avere inviato troppe richieste d’amicizia…. -.-

  13. Progmaster

    ciao julius io vorrei fare una cosa che forse non è possibile..
    secondo me sarebbe molto utile cmq
    Si può fare in modo che il nome del tab di una pagina facebook a cui è associata un applicazione venga tradotto automaticamente
    nella lingua impostata dall’utente su fb oppure a scelta nella lingua del browser che usa (per esempio il nome del tab è dove siamo se
    la lingua è italiana, se invece la lingua è inglese il nome diventa where we are e cosi via)
    Grazie in anticipo per la risposta e complimenti per l’ottimo sito !

  14. Ciao Julious,
    in primis complimenti per la guida.
    Ho solo un problema, quando carico i miei file su dropbox per conseguire il certificato SSL gratuito, non trovo da nessuna parte il pulsante “copy public link” e di conseguenza visualizzo su facebook l’errore 404 relativo a dropbox.

    Grazie in anticipo

  15. Verifica di aver installato DROPBOX sul tuo computer, poi entra nella cartella PUBLIC e al suo interno devi avere i file. Click tasto destro e poi dovresti trovare la voce “copy public link”. Se non ci dovesse essere controlla la tua configurazione di privacy su DropBox versione web.

  16. angelika

    ciao..
    sono parecchi giorni che cerco di migrare il mio account a pagina ma appena inserisco il nome della pagina (che è uguale a quella dell’ account) e seguendo, ovviamente, tutte le norme fb mi viene fuori questo :

    Non è consentita la creazione di contenuti con questo nome. Prova un altro nome.

    come mai?!??!!?

  17. Ciao sto creando un tab esterno per la mia pagina fb,
    1 basta compilare solo i link nel “pag tab”??
    2 nel form secure url (https) cosa inserire?
    ho provato anche con dropbox)
    3 html esterno deve avere caratteristiche particolari??
    grazie

Commenti