iframe facebook

IFrame per Facebook: come installare una Tab iFrame e mostrare contenuti riservati ai fan

Cosa sono le Tab Facebook?

Le tab Facebook sono uno degli strumenti principali che il social network offre, per visualizzare contenuti di terze parti su Facebook sotto forma di landing page.

Le tab permettono di creare un'esperienza unica per gli utenti di Facebook e permette loro di capire servizi e promozioni offerte sfruttando l'ambiente confortevole di Facebook.

www.webinfermento.it

I vantaggi d'uso delle Tab

38% in pi di possibilit di aumentare i mi piace (*)

Possibilit di aumentare l'engagement.

Possibilit di creazione di database utente.

Anche se bisogna tenere a mente che, alla tab va affiancato un buon piano di community management per coinvolgere i fan.

Il 90% dei fan verranno, sono attratti dalle notizie provenienti dal news feed, e non ritorneranno MAI spontaneamente su una pagina.

(*)Fonte: Socialbakers


All'inizio c'era l'FBML

FBML, o Facebook Markup Language, stato progettato per consentire agli utenti di creare applicazioni che si integrino profondamente nell'esperienza di Facebook.

LFBML, permetteva di creare applicazioni dedicate per Facebook, che per girare correttamente, avevano la necessit di essere programmate utilizzando il linguaggio proprietario e cos applicazioni realizzate con Javascript, ad esempio, non potevano funzionare.


Cos' un iFrame?

Un iFrame come finestra che permette di guardare da un sito (Facebook) un un altro sito..

Un contenitore in cui viene ospitata la pagina di unapplicazione che risiede su un server esterno.

Permette di importare qualsiasi contenuto all'interno di Facebook, e se fatto bene, non si noter la differenza :D


FBML VS iFrame


I designer possono creare pagine web in linea con lo stile che l'azienda da promuovere propone, senza tutte le limitazioni dell'FBML

Puro e semplice codice HTML da creare utilizzando editor WYSIWYG come Aptana o Dreamweaver

Possibilit di importare interi siti web

SEO, Google Analytics

Video possono essere importati direttamente da YouTube, senza codice aggiuntivo

Integrazione totale di tutti i pulsanti like, condividi e commenta

Creare un'esperienza Web molto pi ricca all'interno di Facebook

I vantaggi dell'iFrame


Svantaggi dell'iFrame

E' necessario avere familiarit con le tecnologie di programmazione web

Avere disponibilit di un spazio Web Server in cui caricare i file per la pagina dell'applicazione.

Dal 1 Ottobre 2011, necessario disporre di certificazione SSL per permettere alle Tab di funzionare correttamente.


Tipologie di Tab iFrame che funzionano su Facebook

Le tipologie di tab che pi hanno successo a livello di conversione sono:

Welcome TabPromo TabSign-Up TabTab con contenuto riservatoContest tab


Welcome tab


Promo-Tab


Sign-up Tab


Tab con contenuto riservato


Contest Tab


Ingredienti per costruire una Tab iFrame perfetta

Di cosa abbiamo bisogno:Una pagina Facebook

Un Web Server

40 50 minuti di tempo

Abilit di programmazione (a meno che non si utilizzino software di creazione automatici)

Abilit nel design di pagine web e call-to-action


Componenti basilari di una Tab iFrame: il template HTML

Documento .html o .php

Settare la dimensione del DIV contenitore a width=520px

Impostare per il la regola di stile, overflow hidden per evitare la creazione delle barre di scorrimento

Utilizzare per gli stili del testo i CSS inline o sfruttando il tag ..


Un esempio di codice HTML+CSS

body {width:520px;margin:0; padding:0; border:0;overflow:hidden;}

****Qui andr il contenuto HTML o PHP***


Installazione dell'applicazione su Facebook Developer passo 1

Il primo passo per la creazione di un'applicazione Facebook accedere e installare sul proprio profilo Facebook Developers.

Facebook Developers una piattaforma di sviluppo propria di Facebook che permette ai developer di creare applicazioni esterne, ma integrabili all'interno di Facebbok (http://facebook.com/developers)

Alla prima installazione dell'applicazione di sviluppo, necessario l'autorizzazione dei permessi per l'accesso alle informazioni di profilo (amici, user ID, network, amici ecc..)



Creare la vostra applicazione iFrame passo 2

Ora che avete la App Developer installata, possibile creare l'applicazione cliccando sul pulsante Crea applicazione.

Assegnare all'applicazione un nome, e un App Namespace. Accettare la normativa e proseguire con la creazione.

Nome dell'App e della Tab iFrame


Settare le impostazioni passo 3

Url del sito di riferimento

Sito web dove risiede l'App

URL di destinazione dell'iFrame

Attenzione all'SSL!!

Dal 1 Ottobre, Facebook ha reso necessario che i contenuti che finiscono sulla piattaforma per mezzo di App iFrame, siano certificati per mezzo di Secure Socket Layer

Fondamentalmente, si tratta di un certificato di sicurezza che permette di crittografare le informazioni digitali. Avere un certificato SSL significa che il sito su cui hostato l'iframe protegge le informazioni private dell'utente.


Installare la Tab
sulla pagina Facebook

Una volta salvata la nostra app, cliccando sul pulsante Vai alla pagina profilo dell'applicazione, sar possibile collegare l'App alla pagina destinata.

Come creare del contenuto
visibile ai soli fan?

Creare una pagina PHP perch abbiamo intenzione di utilizzare delle istruzioni condizionali per rilevare se un visitatore 'Fan' di una pagina di Facebook o no.

Lo scopo verificare se un utente fan della pagina o meno.

Se la verifica ha valore true, che corrisponde ad essere Fan, saranno visibili dei contenuti nascosti.

Alimenti, sar visualizzato un messaggio che di solito un invito a cliccare Mi piace con promessa di scaricare uno sconto o un incentivo all'iscrizione.


Aggiungere il contenuto
riservato ai soli fan

si verifica l'esistenza di una sessione di Facebook

$request = $_REQUEST["signed_request"];list($encoded_sig, $load) = explode('.', $request, 2);$fbData = json_decode(base64_decode(strtr($load, '-_', '+/')), true);e una variabile 'liked' all'interno di quella sessione. L'istruzione condizionale permette di effettuare delle azioni solo se sono verificate le operazioni sulle variabili.

if (!empty($fbData["page"]["liked"])){?>Inserire il codice a chi iscritto alla pagina

Inserire il codice che invogli l'utente a cliccare Mi piace


Conclusioni

Ovviamente queste applicazioni di tab sono soltanto degli esempi che possono essere adattate a determinate attivit a seconda degli obiettivi che ci si prefigge di raggiungere.

Va detto comunque che creativit e strategia restano gli elementi principali che potranno differenziare una tab da un'altra.


Maria Pia De MarzoWeb Design & Web Developer

Grazie per l'attenzione! :)

CONTACTWebsite: http://www.webinfermento.itMail: [email protected]: @WebInFermento

iframe facebook

Business

Transcript of iframe facebook