Social network visite 17

Come creare una tab iframe Facebook per le pagine fan

4 min

Le tab iframe Facebook sono un ottimo strumento per fare Social Media Marketing, sono gratuite al momento per cui bisogna sfruttarle al meglio per migliorare l’interazione delle persone con le pagine aziendali.

Tempo fa vi abbiamo già spiegato come creare una tab iframe per le vostre pagine Facebook. Da allora è passato del tempo e alcune cose sono cambiate. La sezione Facebook Developer si è aggiornata e probabilmente vi siete trovati un po’ spiazzati. È il momento di rinfrescarsi le idee e scoprire le ultime novità.

La procedura che vi mostro di seguito è quella più semplice, per chi non dispone di un hosting con connessione sicura https.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

Come creare l’applicazione Facebook

Tre semplici passaggi vi permetteranno di sviluppare tab iframe facebook per le pagine fan; vediamo quali sono attraverso questo semplice tutorial e poi analizziamoli singolarmente.

  • Creare una nuova app su Facebook Developers
  • Creare il codice della tab su Woobox
  • Definiamo alcuni dettagli su Facebook Developers

STEP 1. Creare una nuova app su Facebook Developers

Accedere con il proprio account a Facebook Developers e cliccare in alto la voce del menu: Apps > Add a New App.
Selezionare quindi il bottone Facebook Canvas e assegniamo un nome alla nostra app, quindi clicchiamo su Create New Facebook App ID.

tab-iframe-facebook

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

Scegliamo una categoria per la nostra app (lasciando invariato il resto) e clicchiamo su Create App ID.

Scorriamo la pagina verso il basso fin dove chiede su quale hosting si poggia la nostra app. Inseriamo quindi nel campo Canvas Page l’url della nostra app (a nostro piacere, io ad esempio ho usato “tutorial-rdg”) e nel campo Secure Host URL inseriamo iframehost.com/ (questo campo in seguito si modificherà automaticamente).

app-hosted

Questa prima fase è completata.
Non ci resta che cliccare su Avanti, quindi scorrere verso il basso, cliccare ancora su Avanti e scorrere ancora verso il basso finchè non ci appare la scritta Finished! come appare nella figura seguente. Chiudiamo la pagina di Facebook Developers.

finished-app

Apriamo nuovamente la pagina di Facebook Developers e clicchiamo sempre nel menu in alto su Apps, quindi selezioniamo l’app appena creata.

Copiamo l’App ID e l’App Secret. Ci serviranno nel prossimo passaggio.

cerchio-verde-vuoto

STEP 2. Creare il codice della tab iframe Facebook su Woobox

In questa seconda fase dobbiamo creare il codice dell’app, il contenuto. Per farlo andiamo su Woobox, il sito che ospiterà la nostra applicazione.

creare nuova app woobox

Inseriamo quindi la nostra App ID e App Secret. Clicchiamo quindi su Save App Setting e poi Install Page Tab.
Cerchiamo nel menu a tendina la nostra pagina e selezioniamola, in modo da collegare la tab alla pagina Facebook, clicchiamo quindi su Add Page Tab.

aggiungi-pagina-tab

Siamo adesso ridirezionati nella tab della nostra pagina Facebook. Clicchiamo su Configure Page Tab. In tal modo torniamo su Woobox, in EDIT TAB CONTENT, dove possiamo editare la nostra pagina a piacimento:

  • inserire codice html
  • inserire un’immagine
  • inserire il link di una pagina da caricare nella tab
  • creare un redirect

Impostati i nostri contenuti, clicchiamo su Save Setting.

Il lavoro è completo. O quasi. Vi spiego perchè.

Se andiamo nella nostra pagina Facebook possiamo già vedere la nostra tab iframe Facebook bella e pronta. Se non la troviamo, clicchiamo sotto la copertina su Altre e selezioniamo la nostra app.

Ovviamente la parte relativa alle Admin Options le vediamo solo noi che siamo amministratori della pagina e non gli utenti. Ci serviranno nel momento in cui vogliamo apportare delle modifiche alla tab.

Pare che tutto funzioni. E allora cosa c’è che non va? Lo scopriamo nell’ultimo passaggio.

STEP 3. Definiamo alcuni dettagli su Facebook Developers

La prova è pronta all’uso, ma dobbiamo attivarla. La scheda con la tab la vediamo solo noi perchè siamo amministratori della pagina.

Apriamo nuovamente la pagina di Facebook Developers e clicchiamo sempre nel menu in alto su Apps, quindi selezioniamo l’app appena creata.

Il cerchio verde vuoto alla destra del nome dell’applicazione ci mostra che l’app non è attiva per tutti. Nel menu a sinistra allora clicchiamo su Settings e a destra inseriamo la Contact Email, il nostro indirizzo e-mail. Come potete vedere Woobox ha settato tutti i valori correttamente. Nella parte bassa della pagina dobbiamo modificare la Page Tab Image, un file JPG, GIF o PNG di dimensioni 111 x 74 pixel e con un peso massimo di 1 MB.

Clicchiamo quindi su Save Changes.

Ultima operazione: nel menu a sinistra clicchiamo su Status & Review e rendiamo pubblica e fruibile da tutti l’app cliccando accanto al nome dell’app sul pulsante accanto a NO (dovrebbe essere un YES ma non appare scritto).

Il cerchio verde vuoto accanto al nome diventa pieno. La nostra tab iframe Facebook per le pagine fan è pronta e funzionante.

come-creare-tab

Potete cambiare le impostazioni in ogni momento, io ad esempio ho cambiato il nome dell’applicazione.

Alcune precisazioni

Su Facebook, sotto il menu, cliccate su Altre, quindi su Gestisci Tab, per ordinare le tab iframe Facebook e rendere subito visibile la vostra agli utenti della pagina.

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

social

Social network

Pinterest.com

2 min Ti sei mai chiesto cosa sia “Pinterest”? E’ arrivato il momento…

social

Social network

La rivoluzione del mobile passerà attraverso Mark Zuckerberg

1 minUn simpatico video di circa 10 minuti realizzato da Giorgio Taverniti che…

social

Social network

Come programmare un post su Facebook

2 minSpesso è difficile far conciliare il proprio lavoro con la gestione delle…