O slideshow foi denunciado.

Pagina Facebook: utilizzo di un iframe tab e di google sites per costruire un welcome site [tutorial]

9

Compartilhar

1 de 18
1 de 18

Mais Conteúdo rRelacionado

Audiolivros relacionados

Gratuito durante 14 dias do Scribd

Ver tudo

Pagina Facebook: utilizzo di un iframe tab e di google sites per costruire un welcome site [tutorial]

  1. 1. IFrame Tab con Google Sites [come realizzare un minisito sulla pagina Facebook utilizzando ... Google]
  2. 2. Premessa La pagina Facebook per una struttura ricettiva costituisce, sicuramente, un elemento importante dell'intero ecosistema digitale che ne costituisce la presenza on line. Non mi soffermerò sui criteri generali di personalizzazione ed ottimizzazione della pagina, proponendo, invece, un suggerimento su come realizzare un vero e proprio minisito all'interno della propria pagina Facebook. Facebook ha da sempre consentito l'inclusione di elementi all'interno della pagina attraverso l'utilizzo di un linguaggio "proprietario" denominato FBML che, in pratica, era una versione adattata per Facebook del linguaggio HTML. Attraverso la creazione di un'applicazione si poteva realizzare, per esempio, una welcome page, su cui spesso siamo atterrati visitando pagine Facebook più curate. Nell'ultimo anno, Facebook, ha introdotto la possibilità di creare questi contenuti mediante l'utilizzo di un Iframe. Significa che la personalizzazione della pagina può essere realizzata includendo un contenuto esternomediante l'utlizzo di un documento HTML presente in uno spazio non ospitato da Facebook. L'Iframe consente, in pratica, la visualizzazione in una determinata pagina del contenuto presente su un'altra pagina web [pagina nella pagina]. Bello, bellissimo direte voi. La situazione è più accessibile rispetto alla situazione precedente [FBML] perchè si può realizzare una welcome page o un minisito utilizzando un normale CMS per editare i contenuti, ospitarli su un mio spazio ed includerli nella mia pagina Facebook. Vero fino ad ottobre scorso, poi per ragioni di sicurezza Facebook ha imposto che i contenuti inclusi fossero ospitati su una piattaforma dotata di un certificato SSL e venissero gestite attraverso il protocollo https. Questa necessità ha complicato la vita ai "self made page" perchè non tutti possono accollarsi l'onere di comprare e gestire uno spazio certificato. E allora? ... E allora inziamo un percorso che, con un pizzico di creatività, può condurci alla realizzazione di una Iframe Tab gratuita utilizzando un servizio del nemico giurato ... Google Sites :) [siamo su https !]
  3. 3. La Ricetta Ingredienti: Google Account Pagina Facebook Applicazione per gestire Iframe Tab Google Sites Creatività [quanto basta] Google Account Per poter accedere ai servizi di Google bisogna avere un indirizzo mail accreditato come Google Account. Di solito è l'indirizzo che usate per accedere alle statistiche di Google Analytics oppure alla posta elettronica tramite Gmail. Non utilizzate questi servizi e non avete un account Google? Poco male, in meno di un minuto, potete crearne uno a questo indirizzo: https://accounts.google.com/NewAccount?hl=it Una volta creato e confermato l'account potrete accedere a tutti i servizi di Google compreso quello che ci interessa per la nostra "ricetta": Google Sites Fatto?
  4. 4. Pagina Facebook Ovviamente per poter procedere abbiamo bisogno di uno degli ingredienti base. La pagina Facebook. Mi raccomando non confondete il profilo personale a cui avete dato, erroneamente, l'identità del vostro albergo. Parlo del profilo pubblico, pagina aziendale ... insomma quella che ha dei fans, dei likers e non degli amici! Dato per scontato questo passaggio ci concentriamo sulla definizione delle Tab di una pagina. le trovate qui! Tab = Voce di Menù in sostanza. Per aggiungere una voce al menù di base di una pagina Facebook dobbiamo utilizzare un'applicazione. Non sfugge alla regola la creazione di una tab per il nostro Iframe che ospiterà il minisito che realizzeremo con Google Sites. Per poterla realizzare le strade sono tre: 1 - realizzi da solo la app per ospitare l'iframe [in rete e su Facebook ci sono guide che rendono facile il percorso] 2 - Paghi qualcuno per fartela realizzare 3 - Utilizzi un'apps fornita gratuitamente o meno da terze parti. Per il nostro piatto utilizzeremo la terza opzione! Applicazione per gestire IFrame Tab Ci sono moltissime applicazioni di terze parti disponibili per integrare una IFrame Tab sulla nostra pagina. Ovviamente, facendo questa scelta sappiamo che stiamo utilizzando una risorsa non nostra e che potrebbe essere non disponibile più in futuro [poco male in pochi minuti possiamo adottare una soluzione sostitutiva seguendo lo stesso percorso che ci ha condotto all'installazione dell'applicazione precedente]. Come procediamo?
  5. 5. 1 - Cerchiamo nel box di ricerca: static iframe tab e selezioniamo l'applicazione evidenziata nell'immagine. 2 - Vi trovate davanti alla pagina dell'applicazione che vi invita ad installarla su una delle pagina [o la pagina se ne avete una sola da amministrare] ... cliccate su Install Page Tab
  6. 6. 3 - scegliete e confermate la pagina da menù a tendina - step 1 e 2 4 - dopo aver aggiunto l'applicazione alla vostra pagina vi troverete nel menù della pagina una nuova tab denominata "Welcome" Cliccate sulla voce Welcome e vi troverete nella pagina di amministrazione dell'applicazione. L'immagine sotto vi anticipa lo scenario che troverete e che risulta abbastanza semplice da gestire. Le sezioni che ci interessano sono: 5 - inseriamo il codice necessario a gestire il contenuto esterno nello spazio bianco sotto la sezione "Page Source" con il puntino su HTML [l'indirizzo è da sostituire - neretto] <iframe src="https://sites.google.com/site/nomevostrosito"name="frame1" scrolling="no" frameborder="no" align="center"height = "1700px" width = "520px"> </iframe>
  7. 7. 6 - se preferite avere due contenuti diversi da proporre ai fan e ai non fan potete utilizzare il secondo spazio sotto la voce "Non - Fan Page Source" e selezionando il puntino su l'opzione gradita. Se volete inserire una immagine, selezionate "image", se,invece, volete creare una versione del minisito solo per in non fan selezionate HTML [consiglio l'opzione di creare un'immagine che inviti l'utente a diventare fan per poter visualizzare contenuti ed offerte esclusive dedicate ai soli fans] L'applicazione è adesso installata sulla vostra pagina in attesa del vostro contenuto esterno, il minisito che andremo a realizzare con Google Sites. Una volta realizzato il sito con Google Sites avremo a disposizione l'url che dobbiamo sostituire a quello di test inserito nel codice dell'iframe: <iframe src="https://sites.google.com/site/hoteltestwhr/"name="frame1" scrolling="no" frameborder="no" align="center"height = "1700px" width = "520px"> </iframe> * sostituire l'url del vostro sito a quello evidenziato in grassetto Ok?... Pausa caffè!
  8. 8. Google Sites La nostra pagina Facebook è pronta per ospitare il nostro bel sito che realizzeremo con Google Sites. Ah dimenticavo di dirvi la cosa più importante :( Perchè utilizziamo Google Sites? Ricordate lo spazio certificato e la necessità di utilizzare contenuti gestiti su un indirizzo https ? Bene, tutti i siti realizzati su Google Sites sono gestiti su uno spazio con queste caratteristiche! Gratuitamente avremo una piattaforma certificata su cui costruire il nostro sito "sicuro" da ospitare sulla pagina Facebook. Altri vantaggi? I siti realizzati su Google Sites sono "convertibili" per la versione mobile [nel settaggio del sito se confermate questa opzione avrete l'adattamento ottimizzato del sito per il mobile ... come dire due piccioni con una fava?] e hanno a disposizione un CMS [un sistema di gestione autonomo dei contenuti pubblicati sul sito] che vi permetterà di modificare il sito quando e come volete. Ok bando alle ciance , il caffè lo abbiamo preso ... procediamo! Accesso a Google Sites Ricordate il vostro bel Google Account? Bene tiratelo fuori ed utilizzatelo per accedere al servizio Google Sites http://sites.google.com/?hl=it Una volta entrati con successo sulla sinistra trovate il tasto "CREA" ... il tutto inizia da li! [Breve premessa se avete necessità di creare una doppia versione del sito per una lingua diversa, create prima la versione nella lingua del maggior mercato di riferimento. Poi con calma duplicherete il sito [c'è una opzione che permette di farlo] e creiamo anche la versione per un'altra lingua linkando il nuovo sito dalla home page del sito precedente. Lo schema è: creo il sito in inglese [o italiano] duplico il sito metto un link sul primo sito al secondo e viceversa ... il gioco è fatto!]
  9. 9. I vari passaggi #1 Date un nome al vostro sito selezionate il modello "semplice"
  10. 10. #2 Appena creato il sito base vi trovate davanti un layout decisamente poco idoneo per essere incluso all'interno della pagina Facebook. Urge un adattamento di struttura ma soprattutto di larghezza. Il sito da includere deve avere una larghezza massima di 520 px. Procediamo alle modifiche ... #3
  11. 11. #4 interveniamo sul layout del sito per renderlo ideoneo qui possiamo adattare il nostro sito per i cellulari *per ogni operazione effettuata ricordate sempre di fare "SALVA"
  12. 12. #5 1 - eliminiamo la barra laterale 2- clicchiamo su "Modifica l'aspetto del sito" e imposta i valori come immagine in cornice
  13. 13. #6 Ok il sito è configurato nelle dimensioni e nel layout di base. Adesso procediamo all'inserimento dei contenuti [vedi ultima pagina di questo tutorial per un suggerimento]. Se siete sulla pagina di Gestione del sito cliccate in alto a sinistra sul nome del sito per accedere al sito e gestire contenuti e pagine: quando siete nella schermata di sopra con i tre tasti potrete fare tutte le attività necessarie. Con la matita potrete modificare la pagina accedendo allo scenario rappresentato dall'immagine 6.1. Per aggiungere una nuova pagina al sito cliccate sulla cartellina con il + e dal menù Altro potrete gestire tutte le voci di gestione generali. 6.1
  14. 14. Tips per la fase di creazione contenuti 1 - qualsiasi contenuto relativo ad immagini - video - mappe da includere nel layout di base del sito deve essere di larghezza massima di 450 px. 2 -Nella fase di editing utilizzate essenzialmente le tre voci di menù : Inserisci - Formato e Layout [lasciate stare Tabella] 3 - Inserisci: per contenuti testuali e multimediali tenendo in conto il vincolo della larghezza 450 px per il layout ad una colonna [vedi layout] 4 - Formato: per la formattazione dei testi 5 - Layout: per definre la struttura del contenuto centrale del sito. Di base viene impostato il layout ad una colonna. Nulla impedisce di creare ogni pagina con un layout diverso tenendo presente la misura delle immagini - video e mappe da inserire. Provate la misura migliore per ogni layout selezionato 6- Menù di navigazione: ogni volta che create una pagina essa non verrà automaticamente inclusa nel menù orizzontale di navigazione. Per poter gestire il menù di navigazione e aggiungere, modificare ed eliminare le pagine seguite questo percorso... Altro -> Gestisci sito - Layout del sito ->
  15. 15. 7 - Nella sezione principale "Gestisci sito" trovate una voce "Colori e caratteri" che vi permetterà di personalizzare il sito con i colori ed i caratteri più idonei alla vostra immagine aziendale. 8 - ricordate lo script per includere l'iframe che abbiamo inserito nell'applicazione Facebook? Una volta terminato il sito su Google Sites copiate l'url ed inseritela nello script al posto del sito di prova in neretto. 9 - prendete queste note come una traccia e sperimentate tutte le opzioni che il sistema di Google Sites vi offre. Un po' di pratica ed un pizzico di creatività vi aiuteranno a costruire una welcome page o un un minisito impeccabile per la vostra pagina Facebook. 10 - nella pagina successiva viene proposto uno schema semplice per un'efficace distribuzione dei contenuti. Consiglio di preparare tutti i contenuti da includere prima di iniziare a realizzare il sito. Preparate uno slideshow delle immagini migliori e realizzate un video [per es.]. Anche per le immagini caricate le immagini su Picasa ed utilizzate il widget per l'inserimento di una galleria fotografica ... etc.etc.
  16. 16. 1 2 3 4 5 6 7 Indirizzo - Recapiti Idee per una struttura semplice ed efficace 1 - menù di navigazione max 4 voci + eventuale bandierina per altra lingua 2 - immagine di testata 450 px di larghezza 3 - script booking engine [chiedere al fornitore di booking script max 450 px larghezza] 4- contenuto multimediale [ video - galleria immagini - mappa - webcam] 5 - descrizione testuale 6 - icone profili sociali + referenze [tripadvisor + trivago etc.] 7- recapiti ed indirizzo - telefono in evidenza - link pagina contatti sito

×