Crea un mini-sito gratuito all'interno di una pagina Facebook attraverso l'utilizzo di Google Sites [tutorial].

1. IFrame Tab con Google Sites
[come realizzare un minisito sulla pagina Facebook utilizzando ... Google]

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. 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. 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. 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. 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. 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. 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. I vari passaggi
#1
Date un nome al vostro sito
selezionate il modello "semplice"

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. #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. #5
1 - eliminiamo la barra laterale
2- clicchiamo su "Modifica l'aspetto del sito" e imposta i valori come immagine in cornice

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. 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 ->

16. 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.

17. 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