iframe facebook
Upcoming SlideShare
Loading in...5
×
 

iframe facebook

on

  • 7,778 views

Dalle tab FBML alle tab iframe per pagine facebook.

Dalle tab FBML alle tab iframe per pagine facebook.

Statistics

Views

Total Views
7,778
Views on SlideShare
6,697
Embed Views
1,081

Actions

Likes
7
Downloads
133
Comments
1

6 Embeds 1,081

http://www.webinfermento.it 1048
http://feeds.feedburner.com 29
http://mannois.roberto 1
http://calcioinfoweb.altervista.org 1
http://mmrec.org 1
http://www.sitonline.it 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • ciao ero interessata alla tua guida per far vedere un contenuto solo ai fan ma non essendo una cima in php, volevo capire come si inserisce questo codice in una pagina php, perchè ovviamente inserendo il codice così com'è non funziona. grazie
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

iframe facebook iframe facebook Presentation Transcript

  • 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
      www.webinfermento.it
  • 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.
    • L’FBML, 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.
      www.webinfermento.it
  • 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 un’applicazione 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
      www.webinfermento.it
  • FBML VS iFrame
      www.webinfermento.it
    • 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
      www.webinfermento.it
  • 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.
      www.webinfermento.it
  • Tipologie di Tab iFrame che funzionano su Facebook Le tipologie di tab che più hanno successo a livello di conversione sono: Welcome Tab Promo Tab Sign-Up Tab Tab con contenuto riservato Contest tab
      www.webinfermento.it
  • Welcome tab
      www.webinfermento.it
  • Promo-Tab
      www.webinfermento.it
  • Sign-up Tab
      www.webinfermento.it
  • Tab con contenuto riservato
      www.webinfermento.it
  • Contest Tab
      www.webinfermento.it
  • 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
      www.webinfermento.it
  • 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 <body> 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 <style> .. </style>
      www.webinfermento.it
  • Un esempio di codice HTML+CSS <style type=&quot;text/css&quot;> body { width:520px; margin:0; padding:0; border:0; overflow:hidden;} </style> <body> <div id=&quot;container&quot;> <p> ****Qui andrà il contenuto HTML o PHP*** </p> </div> </body>
      www.webinfermento.it
  • 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..)
      www.webinfermento.it
    • www.webinfermento.it
  • 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
      www.webinfermento.it
  • 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.
      www.webinfermento.it
  • 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.
      www.webinfermento.it
  • Aggiungere il contenuto riservato ai soli fan
    • si verifica l'esistenza di una sessione di Facebook
    $request = $_REQUEST [ &quot;signed_request&quot; ]; 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[ &quot;page&quot; ][ &quot;liked&quot; ])){?> Inserire il codice a chi è iscritto alla pagina <?php } else { ?> Inserire il codice che invogli l'utente a cliccare Mi piace < ?php } ?>
      www.webinfermento.it
  • 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.
      www.webinfermento.it
  • Maria Pia De Marzo Web Design & Web Developer Grazie per l'attenzione! :) CONTACT Website: http://www.webinfermento.it Mail: [email_address] Twitter: @WebInFermento