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.
171 Commenti
Ciao Julius, sai come invece si può creare una pagina html in facebook senza importarla dentro un iframe? Sai perché ti faccio questa domanda? Perché da un punto di vista seo non mi pare una buona cosa, innanzitutto perché i contenuti risultano duplicati in quanto richiamati da altro dominio, ma in questo caso si potrebbe anche risolvere evitando di far indicizzare la pagina di origine. In secondo luogo perché si avrebbe una pagina, quella di facebook, che ha dei contenuti che sono caricati da un altro dominio, e credo che Google non apprezzi molto i frami usati in questo modo, ossia una pagina di un dominio che richiama una pagina di un altro dominio.
Ciao, e grazie per i tuoi consigli sempre utili
Domanda: Voglio che la mia pagina fan su facebook sia accessibile a tutti anche se non logati,è possibile una cosa del genere?
Ho provato ad accerci da un’altro browser senza logarmi a questo indirizzo qui: http://www.facebook.com/toscanalighthouse
Ma non ho ottenuto il risultato tanto sperato, che posso fare?
@ Lapo: controlla di aver abilitato la possibilità che la tua pagina sia pubblica.. vai in impostazioni base
Salve,
sarebbe….consenti la ricerca pubblica?
a me accade la cosa inversa!!
cioe’…se vado nella mia fanPage logato e clicco sulla sezione iframe, dove dovrebbe caricarsi una index.html che richiama un swf, mi da connessione nn riuscita!
Se invece entro da nn logato tutto ok!!
any ideas?
Ciao ragazzi!
Ciao Julius, complimenti per la chiara guida!
io ho seguito tutte le istruzioni ma quando apro la tab sulla mia pagina fb (es.JuliusDesign) si visualizza l’errore riportato qui sotto: (se apro la pagina della tab(es. BoxDesign) mi visualizza il sito corettamente.
Sai cosa può essere? Perchè nella tua guida non specifichi quale “Secure Tab url” hai inserito.
Grazie in anticipo.
Dettagli errore pagina Web
Messaggio: Chiamata inattesa al metodo o alla proprietà di accesso.
Linea: 264
Carattere: 5
Codice: 0
URI: res://ieframe.dll/httpErrorPagesScripts.js
Ciao Julius, articolo davvero interessante.
Volevo chiederti una cosa, sai se c’e’ un modo per eliminare le barre che fanno lo scrol della pagina che richiamiamo nell’iframe?
Quando la pagina e’ parecchio lunga escono fuori, e volevo capire se era possibile eliminarle.
Grazie anticipatamente
Simo
@ federico: se la tua app ha un protocollo https devi inserire la URL
@simo ha scritto:
Leggi questo articolo Facebook iFrame Apps – Getting Rid of Those Scrollbars
Graaazie, Grazie, grazie…
;)))))))))))
Ciao julius.
Per la prima volta ho creato un tab Iframe, ho seguito alla lettera la tua guida e anche su Big Think , ma al momento della visualizzazione mi segnala :
405 – HTTP verb used to access this page is not allowed.
The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.
Cioè ? il protocollo Http non è valido ?
Grazie anche chi vorrà aiutarmi
Ciao
Cia Julius! E ciao a tutti!
Ho circa lo stesso problema di Barbara. Per creare un landing tab su una fb brand page adesso facebook pretende che html originale della pagina stia in https…non basta più http? bisogna quindi per forza avere un dominio con https e relativo certificato SSL??? Ditemi che non è vero!
Ciao Julius e complimenti per i tuo blog e per la tua attività^^
sono a cercare da un po nel tuo blog il tutorial per creare un app tipo il tuo, BoxDesign.
Vorrei anche io chiudere il mio app e inserire il pulsante Mi piace e permettere ai miei utenti di visualizzare la mia applicazione.
Ciao Julius… una domandina…ma questo procedimento vale solo per le Fan Page oppure anche per gli account normali?
Barbara ha scritto:
Controllate di non avere impostato come navigazione HTPPS
@ Stefano: BoxDesign è semplicemente una pagina statica con una lista di articoli inglobata in tab iFrame
@ Daniel: Per ora è solo possibile nelle Pagine Fan
K Julius!! adesso non ho capito come fare a togliere in automatico il div che oscura la pagina, quando un utente clicca su mi piace! ciao
Stefano ha scritto:
Ecco un articolo Facebook: come rendere disponibile un contenuto solo ai fan
Come si fa togliere la scrollbar?
@ Mirko:
OOPS! non avevo visto il link!
Ho risollto, Grazie.
Grazie Julius… ultima curiosità, ma esiste un modo per inserire una pagina di un sito su un account normale di FB???????
Grazie in anticipo!!!! ;)
CIAO,
OTTIMA GUIDA COMPLIMENTI!!! L’unica che trovo che mi spieghi passo passo come fare…
unica domanda: COME FACCIO A CREARE PIù TAB???
ad esempio guarda questo:
http://www.facebook.com/pages/Love-Beat-Boat/160608987293049
ci sono sulla sinistra le varie voci che dovrebbero corrispondere a vari tab, come fossero delle voci di menù che ti linkano ovviamente ad altre pagine da url esterno…
altra cosa…. come faccio a dire alla pagina di aprire subito il mio primo tab anzichè la bacheca???
cioè gli utenti fb devono vedere subito il tab e nn devono finire sulla bacheca..come si fa?
grazie ancora
Daniel ha scritto:
Cosa intendi per account normale? Nel profilo non è possibile… Mentre nella pagina fan se segui il tutorial puoi integrare qualsiasi sito web tramite iframe.
ALESSANDRO ha scritto:
Per craere altre TAB basta eseguire nuovamente l’operazione di creazione e configurazione tab più volte, ogni tab ha una applicazione fb.
Attualmente Facebook permette ai NON fan di essere dirottati su una determinata pagina tab. Mentre tutti i FAN vengono dirottati sempre e solo sulla Bacheca.
Grazie delle risposte qua sopra.. Ultima cosa:
come si fa a mettere quella schermata introduttiva x accedere ai contenuti?!!?
Per intenderci, sono andato su quello della redbull e prima di aprirti il conenuto del tab, ti apre un jpeg con una lattina e tutte frecce che indicano il tasto “mi piace”… solo cliccando su mi piace, si accede al contenuto del tab.
Stessa cosa hai fatto tu con quel fondino nero e la scritta di far click su mi piace x accedere ai contenuti…
Come si imposta e dove si imposta questa cosa? nella pagina html?!?
Grazie
ah proposito questa è la paginetta che ho fatto! che vene pare?
http://www.facebook.com/pages/CRAZYTRIP-OFFICIAL-FANPAGE/220270548012315?sk=app_229434830411094
ALESSANDRO ha scritto:
Qui trovi un tutorial di Daniele > http://goo.gl/PPw8Q
Bella la tab, mi piacciono le composizioni di elementi grafici!
@ Julius:
Grazie ;)
Ora provo a vedere se riesco a seguire la guida di Daniele.
Grandeeeeeee
Ciao Julius e grazie per questa guida. Ho riscontrato però questo:
ho creato il tab iframe come descritto e ci sono riuscita, poi l’ho collegata ad una pagina demo (fatta per prova) ed ok, poi ho settatola prima pagina di arrivo sull’applicazione “demo” da me creata ed è andato tutto ok.
Cancello la pagina demo, modifico la pagina di destinazione facendo l’applicazione vera, la collego alla pagina reale di destinazione, inserisco pure l’immagine dell’applicazione, seguo tutto passo passo e succede che l’applicazione si associa alla pagina ma non visualizza l’immagine (al suo posto si vedono le rotelline) ed anche se setto la pagina di destinazione sulla mia applicazione si va sempre in bacheca. E’ un problema mio o di FB che magari tarda ad applicare le modifiche? grazie
Ciao Julius, sapresti dirmi come devo salvare le mie img da mettere su FB senza perdere di qualità.
Ho provato con salva per web in photoshop ma quando le carico su FB la qualità è pessima.
Grazie!
@sole: penso sia un bug di FB, l’immagine ICONA nel pannello di modifica applicazione la vedi? Prova a crearne una da zero…
@Luca: capitato anche a me… prova in PNG
Ciao Julius, bellissimo articolo!
Ho creato una tab seguendo la tua guida, eccola qui: http://www.eminemitalianblog.it/video/Others/Eminem%20Entourage%20Cameo%20Full/Facebook%20Tabs/Bad%20Meets%20Evil/Bad%20Meets%20Evil.html
Ho inserito il tab in una mia pagina per provare il reale funzionamento, ecco il tab nella fanpage: https://www.facebook.com/pages/Dennis-Sculacchione-Phillips/103486879735187?sk=app_173707666040411
Come vedi non funziona, è un problema di https?
Uso Aruba come hosting, uso il primo servizio partendo da sinistra: https://hosting.aruba.it/caratteristiche_servizi.asp
Non sai se c’è qualche limitazione tipo same origin policy che mi impedisce di UTILIZZARE AJAX verso il sito su cui ospito la pagina esterna? Riesco a usare jQuery, ma le chiamate ajax non partono. -.-
Problema: per rendere la mia pagina fan pubblica, cioè che lo vedo senza logarsi su facebook devo promuovere la pagina e quindi…pagare?
Ciao julius…Complimenti per il sito, ho cercato di creare una pagina, come descrivi qui nell’articolo ma mi dice che i dati non sono reali… si infatti è vero ho provato a creare una pagina azienda, quindi ho dovuto aggiungerli fittizzi tranne il numero di cell.
non so ho seguito la procedura di registrazione del numero ma non mi fa passare!…
non so come fare! help please!
:-D
Ciao a tutti e complimenti…
Ho seguito tutte le impostazioni di configurazione ma quando cerco di salvare le modifiche mi restituisce questo errore:
Error
URL canvas must point to a directory (i.e., end with a ‘/’ or a dynamic page (i.e., have a ‘?’ somewhere).
Ho impostato come Url Canvas:
http://www.nomedominio.it/landf/index.html
Come indirizzo del sito il dominio principale
http://www.nomedominio.it
Ho il dominio su aruba con hosting windows…
potreste aiutarmi???
Ho provato a smanettare e scambiare le impostazioni o dando a tutti e due le url richieste l’indirizzo completo di dove si trova la pagina ma niente…
Vi ringrazio anticipatamente…
Ciao, Complimenti per l’ottima guida.
Vorrei chiederti come posso fare in modo che all’apertura della mia pagina si visualizzi direttamente il mio iframe.!
Attualmente all’apertura della pagina visualizzo la bacheca…
Grazie…
Ciao,
Complimenti per l’ottima guida.
Vorrei chiederti come posso fare in modo che all’apertura della mia pagina si visualizzi direttamente il mio iframe.!
Attualmente all’apertura della pagina visualizzo la bacheca…
Grazie…
Io ho lo stesso problema/domanda di Munick3000:
come posso fare in modo che all’apertura della mia pagina si visualizzi direttamente il mio iframe? Per ora vedo la bacheca e l’iframe solo dopo aver cliccato l’applicazione creata!
Grazie e complimenti!
Ciao
ho creato l’app l’ho collegata alla fan page, ma quando ci clicco sopra appare questo messaggio di errore: Impossibile visualizzare questi contenuti in un frame – Apri questi contenuti in una nuova finestra.
Cosa ho sbagliato?
Grazie per l’aiuto
ciao…parecchi problemi in mertio.
1. secure page tab url? (credo che molti dei problemi dipendano da questo…)
2. quando aggiungo l’app alla pagina e poi vado sulla pagina….non c’è nelle schede a sx, sotto foto, video, eventi ecc
3. quando dal punto che spieghi al paragrafo “Seleziona la Pagina Fan in cui Includere il Tab”, vado all’applicazione per visualizzare la tab, anzichè vedere questa, vedo l’home page del sito (non ilmiosito.it/nometab.html, bensì ilmiosito.it)
mi aiuti?
grazieeee
Ciao Julius, complimenti per la guida, ho una perplessità, Venerdì scorso ho fatto quanto mi hai illustrato e andava una meraviglia… Oggi ripeto la procedura e non mi fa visualizzare “Vai alla pagina del profilo dell’applicazione” quindi non posso associare alla mia pagina la nuova APP…
Nuovo aggiornamento di Facebook?
Ciao Julius… ma è possibile che alla seconda applicazione che creo per richiamare l’iframe non ci sia proprio la voce: Vai alla pagina del profilo dell’applicazione.
Ho creato tre app… per richiamare le pagine Iframe per 3 diverse aziende…. la prima è andata liscia come l’olio… le altre no! Dove sbaglio?
@ Giulio.wr: Hanno cambiato alcune cose, ho appena AGGIORNATO LA GUIDA!
Articolo interessante, bravo Giuliano.
L’unica cosa che ho notato, provando a visualizzare l’esempio https://www.facebook.com/JuliusDesign?sk=app_212081655469712, è che la navigazione protetta non è supportata, per chi come me ha impostato HTTPS.
Così, giusto per segnalare :)
Julius ha scritto:
Intendevo in un Profilo personale! non in una Fan Page! Ma penso che tu abbia già risposto :)
@ Fabio Malamocco: Si è normale in quanto la mia tab non è configurata in https
@ Daniel: Nella pagina profilo attualmente non è possibile.
Buongiorno Giuliano,
trovo sempre interessanti i tuoi contenuti :)
Nell’aggiornamento della pagina ti sarà sfuggito che l’esempio citato nel testo “vedremo in questo esempio” https://www.facebook.com/JuliusDesign?sk=app_212081655469712
non è visualizzabile con una navigazione protetta. Presumo che l’url del sito presente nell’applicazione non sia hostato su un https.
Complimenti ancora per la tua attività ed i tuoi progetti :)
Antonello
@ Antonio Maresca: Si esatto Antonio, non ho configurato la mia pagina iframe in https
Ciao Giuliano, ho attivato la tab personalizzata e mi chiedevo come poterla vederla all’apertura della pagina. Nelle impostazioni (Gestisci autorizzazioni) è settata correttamente come “Prima scheda visualizzata”, ma non funziona. Ho cercato nelle impostazioni anche dell’applicazione appena creata, ma non riesco a trovare nulla. Hai suggerimenti? Grazie!
@ francesco:
Sì, ok, hai ragione, sono l’amministratore. Immagino che non si possa attivare come landing page per tutti, con questo tipo di app basilare.
Salve, ho appena creato un’applicazione facebook seguendo la guida e funziona tutto perfettamente. Ora vorrei sapere come è possibile far visualizzare il contenuto di un div solo a chi clicca mi piace… Grazie a tutti spero in una vostra risposta