iframe facebook

7,492 views

Published on

Dalle tab FBML alle tab iframe per pagine facebook.

Published in: Business
1 Comment
8 Likes
Statistics
Notes
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,644
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
138
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

iframe facebook

  1. 1. IFrame per Facebook: come installare una Tab iFrame e mostrare contenuti riservati ai fan
  2. 2. Cosa sono le Tab Facebook? <ul><li>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 . </li></ul><ul><li>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. </li></ul><ul>www.webinfermento.it </ul>
  3. 3. I vantaggi d'uso delle Tab <ul><li>38% in più di possibilità di aumentare i “mi piace” (*)
  4. 4. Possibilità di aumentare l'engagement.
  5. 5. Possibilità di creazione di database utente.
  6. 6. Anche se bisogna tenere a mente che, alla tab va affiancato un buon piano di community management per coinvolgere i fan.
  7. 7. Il 90% dei fan verranno, sono attratti dalle notizie provenienti dal news feed, e non ritorneranno MAI spontaneamente su una pagina. </li></ul>(*) Fonte: Socialbakers <ul>www.webinfermento.it </ul>
  8. 8. All'inizio c'era l'FBML <ul><li>FBML, o Facebook Markup Language , è stato progettato per consentire agli utenti di creare applicazioni che si integrino profondamente nell'esperienza di Facebook.
  9. 9. 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. </li></ul><ul>www.webinfermento.it </ul>
  10. 10. Cos'è un iFrame? <ul><li>Un iFrame è come finestra che permette di guardare da un sito (Facebook) un un altro sito..
  11. 11. Un contenitore in cui viene ospitata la pagina di un’applicazione che risiede su un server esterno.
  12. 12. Permette di importare qualsiasi contenuto all'interno di Facebook, e se fatto bene, non si noterà la differenza :D </li></ul><ul>www.webinfermento.it </ul>
  13. 13. FBML VS iFrame <ul>www.webinfermento.it </ul>
  14. 14. <ul><li>I designer possono creare pagine web in linea con lo stile che l'azienda da promuovere propone, senza tutte le limitazioni dell'FBML
  15. 15. Puro e semplice codice HTML da creare utilizzando editor WYSIWYG come Aptana o Dreamweaver
  16. 16. Possibilità di importare interi siti web
  17. 17. SEO , Google Analytics
  18. 18. Video possono essere importati direttamente da YouTube, senza codice aggiuntivo
  19. 19. Integrazione totale di tutti i pulsanti “like”, “condividi” e “commenta”
  20. 20. Creare un' esperienza Web molto più ricca all'interno di Facebook </li></ul>I vantaggi dell'iFrame <ul>www.webinfermento.it </ul>
  21. 21. Svantaggi dell'iFrame <ul><li>E' necessario avere familiarità con le tecnologie di programmazione web
  22. 22. Avere disponibilità di un spazio Web Server in cui caricare i file per la pagina dell'applicazione.
  23. 23. Dal 1 Ottobre 2011, è necessario disporre di certificazione SSL per permettere alle Tab di funzionare correttamente. </li></ul><ul>www.webinfermento.it </ul>
  24. 24. 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 <ul>www.webinfermento.it </ul>
  25. 25. Welcome tab <ul>www.webinfermento.it </ul>
  26. 26. Promo-Tab <ul>www.webinfermento.it </ul>
  27. 27. Sign-up Tab <ul>www.webinfermento.it </ul>
  28. 28. Tab con contenuto riservato <ul>www.webinfermento.it </ul>
  29. 29. Contest Tab <ul>www.webinfermento.it </ul>
  30. 30. Ingredienti per costruire una Tab iFrame perfetta Di cosa abbiamo bisogno: <ul><li>Una pagina Facebook
  31. 31. Un Web Server
  32. 32. 40 – 50 minuti di tempo
  33. 33. Abilità di programmazione (a meno che non si utilizzino software di creazione automatici)
  34. 34. Abilità nel design di pagine web e call-to-action </li></ul><ul>www.webinfermento.it </ul>
  35. 35. Componenti basilari di una Tab iFrame: il template HTML <ul><li>Documento .html o .php
  36. 36. Settare la dimensione del DIV contenitore a width=”520px”
  37. 37. Impostare per il <body> la regola di stile, overflow ”hidden” per evitare la creazione delle barre di scorrimento
  38. 38. Utilizzare per gli stili del testo i CSS inline o sfruttando il tag <style> .. </style> </li></ul><ul>www.webinfermento.it </ul>
  39. 39. 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> <ul>www.webinfermento.it </ul>
  40. 40. Installazione dell'applicazione su Facebook Developer – passo 1 <ul><li>Il primo passo per la creazione di un'applicazione Facebook è accedere e installare sul proprio profilo Facebook Developers .
  41. 41. 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 )
  42. 42. 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..) </li></ul><ul>www.webinfermento.it </ul>
  43. 43. <ul>www.webinfermento.it </ul>
  44. 44. Creare la vostra applicazione iFrame – passo 2 <ul><li>Ora che avete la App Developer installata, è possibile creare l'applicazione cliccando sul pulsante “Crea applicazione”. </li></ul><ul><li>Assegnare all'applicazione un nome, e un App Namespace. Accettare la normativa e proseguire con la creazione. </li></ul>Nome dell'App e della Tab iFrame <ul>www.webinfermento.it </ul>
  45. 45. Settare le impostazioni – passo 3 Url del sito di riferimento Sito web dove risiede l'App URL di destinazione dell'iFrame
  46. 46. Attenzione all'SSL!! <ul><li>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
  47. 47. 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. </li></ul><ul>www.webinfermento.it </ul>
  48. 48. Installare la Tab sulla pagina Facebook <ul><li>Una volta salvata la nostra app, cliccando sul pulsante “Vai alla pagina profilo dell'applicazione”, sarà possibile collegare l'App alla pagina destinata. </li></ul>
  49. 49. Come creare del contenuto visibile ai soli fan? <ul><li>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.
  50. 50. Lo scopo è verificare se un utente è fan della pagina o meno.
  51. 51. Se la verifica ha valore true , che corrisponde ad essere Fan, saranno visibili dei contenuti nascosti.
  52. 52. 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. </li></ul><ul>www.webinfermento.it </ul>
  53. 53. Aggiungere il contenuto riservato ai soli fan <ul><li>si verifica l'esistenza di una sessione di Facebook </li></ul>$request = $_REQUEST [ &quot;signed_request&quot; ]; list( $encoded_sig, $load ) = explode('.', $request , 2); $fbData = json_decode ( base64_decode ( strtr ( $load , '-_' , '+/' )), true); <ul><li>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. </li></ul>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 } ?> <ul>www.webinfermento.it </ul>
  54. 54. Conclusioni <ul><li>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.
  55. 55. Va detto comunque che creatività e strategia restano gli elementi principali che potranno differenziare una tab da un'altra. </li></ul><ul>www.webinfermento.it </ul>
  56. 56. Maria Pia De Marzo Web Design & Web Developer Grazie per l'attenzione! :) CONTACT Website: http://www.webinfermento.it Mail: [email_address] Twitter: @WebInFermento

×