IFrame Tab con Google Sites[come realizzare unminisito sulla pagina Facebook utilizzando ... Google]

PremessaLa pagina Facebook per una struttura ricettiva costituisce, sicuramente, un elementoimportante 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 propriominisito all'internodella propria pagina Facebook.Facebook ha da sempre consentito l'inclusione di elementi all'interno della pagina attraversol'utilizzo di un linguaggio "proprietario" denominato FBML che, in pratica, era una versioneadattata per Facebook del linguaggio HTML.Attraverso la creazione di un'applicazione si poteva realizzare, per esempio, una welcomepage, su cui spesso siamo atterrati visitando pagine Facebook più curate.

Nell'ultimo anno, Facebook, ha introdotto la possibilità di creare questi contenuti mediantel'utilizzo di un Iframe. Significa che la personalizzazione della pagina può essere realizzataincludendo un contenuto esternomediante l'utlizzo di un documento HTML presente in unospazio non ospitato da Facebook. L'Iframe consente, in pratica, la visualizzazione in unadeterminata 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 normaleCMSper editare i contenuti, ospitarli su unmio spazio ed includerli nellamiapaginaFacebook.Vero fino ad ottobre scorso, poi per ragioni di sicurezza Facebook ha imposto che i contenutiinclusi fossero ospitati su una piattaforma dotata di un certificato SSL e venissero gestiteattraverso il protocollo https.Questa necessità ha complicato la vita ai "selfmade page" perchè non tutti possono accollarsil'onere di comprare e gestire uno spaziocertificato. E allora? ... E allora inziamo unpercorso che, con un pizzico di creatività, puòcondurci alla realizzazione di una Iframe Tabgratuita utilizzando un servizio del nemicogiurato ... Google Sites :) [siamo su https !]

La RicettaIngredienti: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 comeGoogle Account. Di solito è l'indirizzo che usate per accedere alle statistiche di GoogleAnalytics oppure alla posta elettronica tramite Gmail.Non utilizzate questi servizi e non avete un account Google? Poco male, in meno di unminuto, potete crearne uno a questo indirizzo:

https://accounts.google.com/NewAccount?hl=itUna 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?

Pagina FacebookOvviamente per poter procedere abbiamo bisogno di uno degli ingredienti base. La paginaFacebook. 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 unapagina.

le trovate qui!

Tab = Voce di Menù in sostanza. Peraggiungere una voce almenù di base di unapagina Facebook dobbiamo utilizzareun'applicazione. Non sfugge alla regola lacreazione di una tab per il nostro Iframecheospiterà ilminisito che realizzeremoconGoogle Sites. Per poterla realizzare lestrade sono tre:1 - realizzi dasolo laappperospitare l'iframe[in rete e su Facebook ci sono guide cherendono facile il percorso]2 - Paghi qualcuno per fartela realizzare3 - Utilizzi un'apps fornita gratuitamente omeno da terze parti.Per il nostro piatto utilizzeremo la terzaopzione!

Applicazione per gestire IFrame TabCi sono moltissime applicazioni di terze parti disponibili per integrare una IFrame Tab sullanostra pagina. Ovviamente, facendo questa scelta sappiamo che stiamo utilizzando unarisorsa non nostra e che potrebbe essere non disponibile più in futuro [poco male in pochiminuti possiamo adottare una soluzione sostitutiva seguendo lo stesso percorso che ci hacondotto all'installazione dell'applicazione precedente].

Come procediamo?

1 - Cerchiamo nel box di ricerca: static iframe tab e selezioniamo l'applicazioneevidenziata nell'immagine.

2 - Vi trovate davanti alla pagina dell'applicazione che vi invita ad installarla su unadelle pagina [o la pagina se ne avete una sola da amministrare] ... cliccate su InstallPage Tab

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ù dellapagina una nuova tab denominata "Welcome"

Cliccate sulla voceWelcome e vi troverete nella pagina diamministrazione dell'applicazione. L'immagine sotto vianticipa lo scenario che troverete e che risulta abbastanzasemplice da gestire. Le sezioni che ci interessano sono:

5 - inseriamo il codice necessario a gestire il contenuto esterno nello spazio biancosotto 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>

6 -sepreferiteavereduecontenutidiversidaproporreai faneainon fanpoteteutilizzareil secondo spazio sotto la voce "Non - Fan Page Source" e selezionando il puntino sul'opzione gradita. Se volete inserire una immagine, selezionate "image", se,invece,volete creare una versione delminisito solo per in non fan selezionateHTML [consigliol'opzione di creare un'immagine che inviti l'utente a diventare fan per poter visualizzarecontenuti 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 GoogleSites avremo a disposizione l'url che dobbiamo sostituire a quello di test inserito nel codicedell'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è!

Google SitesLanostrapaginaFacebookèprontaperospitare il nostrobel sito che realizzeremoconGoogleSites. Ah dimenticavo di dirvi la cosa più importante :( Perchè utilizziamo Google Sites?Ricordate lo spazio certificato e la necessità di utilizzare contenuti gestiti su unindirizzo https ? Bene, tutti i siti realizzati su Google Sites sono gestiti su uno spazio conqueste caratteristiche!Gratuitamente avremo una piattaforma certificata su cui costruire ilnostro sito "sicuro" da ospitare sulla paginaFacebook. Altri vantaggi? I siti realizzati suGoogleSitessono"convertibili"per laversionemobile [nel settaggiodel sito seconfermatequestaopzione avrete l'adattamento ottimizzato del sito per il mobile ... come dire due piccioni conuna fava?] e hanno a disposizione un CMS [un sistema di gestione autonomo dei contenutipubblicati sul sito] che vi permetterà di modificare il sito quando e come volete. Ok bando alleciance , il caffè lo abbiamo preso ... procediamo!

Accesso a Google SitesRicordate il vostro bel Google Account? Bene tiratelo fuori ed utilizzatelo per accedere alservizio 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 sitoper una lingua diversa, create prima la versione nella lingua del maggiormercatodi riferimento.Poi concalmaduplicherete il sito [c'èunaopzionechepermette di farlo] e creiamo anche la versione per un'altra lingua linkando ilnuovo 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!]

I vari passaggi

Date un nome al vostro sito

selezionate il modello "semplice"

#1

#2

Appena creato il sito base vi trovate davanti un layout decisamente poco idoneo per essereincluso all'interno della pagina Facebook. Urge un adattamento di struttura ma soprattutto dilarghezza. Il sito da includere deve avere una larghezza massima di 520 px.Procediamo alle modifiche ...

#3

#4

qui possiamo adattare il nostro sito per i cellulari

interveniamo sul layout del sito per renderlo ideoneo

*per ogni operazione effettuata ricordate sempre di fare "SALVA"

#51 - eliminiamo la barra laterale2- clicchiamo su "Modifica l'aspetto del sito" e imposta i valori come immagine in cornice

#6Ok il sito è configurato nelle dimensioni e nel layout di base. Adesso procediamo all'inserimentodei contenuti [vedi ultima pagina di questo tutorial per un suggerimento]. Se siete sulla paginadi Gestione del sito cliccate in alto a sinistra sul nome del sito per accedere al sito e gestirecontenuti e pagine:

quandosietenella schermatadi sopra con i tre tasti potrete fare tutte le attività necessarie.Conla matita potretemodificare la pagina accedendo allo scenario rappresentato dall'immagine6.1.Per aggiungereunanuovapaginaal sito cliccate sullacartellinacon il +edalmenùAltropotrete gestire tutte le voci di gestione generali.

6.1

Tips per la fase di creazione contenuti1 - qualsiasi contenuto relativo ad immagini - video - mappe da includere nel layout di basedel sito deve essere di larghezza massima di 450 px.2 -Nella fase di editing utilizzate essenzialmente le tre voci di menù : Inserisci - Formatoe Layout [lasciate stare Tabella]3 - Inserisci: per contenuti testuali e multimediali tenendo in conto il vincolo dellalarghezza 450 px per il layout ad una colonna [vedi layout]4 - Formato: per la formattazione dei testi5 -Layout:per definre la struttura del contenuto centrale del sito.Dibaseviene impostatoil layout ad una colonna. Nulla impedisce di creare ogni pagina con un layout diversotenendo presente la misura delle immagini - video e mappe da inserire. Provate la misuramigliore per ogni layout selezionato6- Menù di navigazione: ogni volta che create una pagina essa non verràautomaticamente inclusa nel menù orizzontale di navigazione. Per poter gestire ilmenù di navigazione e aggiungere, modificare ed eliminare le pagine seguite questopercorso...

Altro -> Gestisci sito - Layout del sito ->

7 - Nella sezione principale "Gestisci sito"trovate una voce "Colori e caratteri" che vipermetterà di personalizzare il sito con icolori ed i caratteri più idonei alla vostraimmagine aziendale.

8 - ricordate lo script per includere l'iframe che abbiamo inserito nell'applicazioneFacebook?Una volta terminato il sito suGoogle Sites copiate l'url ed inseritela nello scriptal posto del sito di prova in neretto.9 - prendete queste note come una traccia e sperimentate tutte le opzioni che il sistema diGoogle Sites vi offre.Unpo' di pratica ed un pizzico di creatività vi aiuteranno a costruireuna welcome page o un un minisito impeccabile per la vostra pagina Facebook.

10 - nella pagina successiva viene proposto uno schema semplice per un'efficacedistribuzione dei contenuti. Consiglio di preparare tutti i contenuti da includere primadi iniziarea realizzare il sito. Preparate uno slideshow delle immagini migliori e realizzate un video [peres.]. Anche per le immagini caricate le immagini su Picasa ed utilizzate il widget perl'inserimento di una galleria fotografica ... etc.etc.

12

3

4

5

6

7 Indirizzo - Recapiti

Idee per una struttura semplice ed efficace1 - menù di navigazione max 4 voci + eventuale bandierina per altra lingua2 - immagine di testata 450 px di larghezza3 - script booking engine [chiedere al fornitore di booking script max 450 px larghezza]4- contenuto multimediale [ video - galleria immagini - mappa - webcam]5 - descrizione testuale6 - icone profili sociali + referenze [tripadvisor + trivago etc.]7- recapiti ed indirizzo - telefono in evidenza - link pagina contatti sito