iframe facebook
Download as ODP, PDF7 likes3,200 views
Il documento descrive come installare e utilizzare le tab iframe su Facebook per visualizzare contenuti riservati ai fan, evidenziando i vantaggi come l'aumento dell'engagement e la creazione di database utenti. Viene fornita una guida su come integrare correttamente un'applicazione tramite Facebook Developers, tenendo conto della necessità di certificazione SSL. Infine, si sottolinea l'importanza di strategia e creatività nella progettazione delle tab per massimizzare i risultati.
iframe facebook
- 1. IFrame per Facebook: come installare una Tab iFrame e mostrare contenuti riservati ai fan
- 2. 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
- 3. I vantaggi d'uso delle Tab 38% in più di possibilità di aumentare i “mi piace” (*)
- 4. Possibilità di aumentare l'engagement.
- 5. Possibilità di creazione di database utente.
- 6. Anche se bisogna tenere a mente che, alla tab va affiancato un buon piano di community management per coinvolgere i fan.
- 7. 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
- 8. 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.
- 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. www.webinfermento.it
- 10. Cos'è un iFrame? Un iFrame è come finestra che permette di guardare da un sito (Facebook) un un altro sito..
- 11. Un contenitore in cui viene ospitata la pagina di un’applicazione che risiede su un server esterno.
- 12. Permette di importare qualsiasi contenuto all'interno di Facebook, e se fatto bene, non si noterà la differenza :D www.webinfermento.it
- 13. FBML VS iFrame www.webinfermento.it
- 14. I designer possono creare pagine web in linea con lo stile che l'azienda da promuovere propone, senza tutte le limitazioni dell'FBML
- 15. Puro e semplice codice HTML da creare utilizzando editor WYSIWYG come Aptana o Dreamweaver
- 16. Possibilità di importare interi siti web
- 17. SEO , Google Analytics
- 18. Video possono essere importati direttamente da YouTube, senza codice aggiuntivo
- 19. Integrazione totale di tutti i pulsanti “like”, “condividi” e “commenta”
- 20. Creare un' esperienza Web molto più ricca all'interno di Facebook I vantaggi dell'iFrame www.webinfermento.it
- 21. Svantaggi dell'iFrame E' necessario avere familiarità con le tecnologie di programmazione web
- 22. Avere disponibilità di un spazio Web Server in cui caricare i file per la pagina dell'applicazione.
- 23. Dal 1 Ottobre 2011, è necessario disporre di certificazione SSL per permettere alle Tab di funzionare correttamente. www.webinfermento.it
- 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 www.webinfermento.it
- 28. Tab con contenuto riservato www.webinfermento.it
- 30. Ingredienti per costruire una Tab iFrame perfetta Di cosa abbiamo bisogno: Una pagina Facebook
- 31. Un Web Server
- 32. 40 – 50 minuti di tempo
- 33. Abilità di programmazione (a meno che non si utilizzino software di creazione automatici)
- 34. Abilità nel design di pagine web e call-to-action www.webinfermento.it
- 35. Componenti basilari di una Tab iFrame: il template HTML Documento .html o .php
- 36. Settare la dimensione del DIV contenitore a width=”520px”
- 37. Impostare per il <body> la regola di stile, overflow ”hidden” per evitare la creazione delle barre di scorrimento
- 38. Utilizzare per gli stili del testo i CSS inline o sfruttando il tag <style> .. </style> www.webinfermento.it
- 39. Un esempio di codice HTML+CSS <style type="text/css"> body { width:520px; margin:0; padding:0; border:0; overflow:hidden;} </style> <body> <div id="container"> <p> ****Qui andrà il contenuto HTML o PHP*** </p> </div> </body> www.webinfermento.it
- 40. 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 .
- 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. 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
- 44. 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
- 45. Settare le impostazioni – passo 3 Url del sito di riferimento Sito web dove risiede l'App URL di destinazione dell'iFrame
- 46. 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
- 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. www.webinfermento.it
- 48. 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.
- 49. 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.
- 50. Lo scopo è verificare se un utente è fan della pagina o meno.
- 51. Se la verifica ha valore true , che corrisponde ad essere Fan, saranno visibili dei contenuti nascosti.
- 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. www.webinfermento.it
- 53. 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 <?php } else { ?> Inserire il codice che invogli l'utente a cliccare Mi piace < ?php } ?> www.webinfermento.it
- 54. 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.
- 55. Va detto comunque che creatività e strategia restano gli elementi principali che potranno differenziare una tab da un'altra. www.webinfermento.it
- 56. Maria Pia De Marzo Web Design & Web Developer Grazie per l'attenzione! :) CONTACT Website: http://www.webinfermento.it Mail: [email_address] Twitter: @WebInFermento