Pagina Facebook: utilizzo di un iframe tab e di google sites per costruire un welcome site [tutorial]Document Transcript
IFrame Tab con Google Sites[come realizzare un minisito sulla pagina Facebook utilizzando ... Google]
PremessaLa pagina Facebook per una struttura ricettiva costituisce, sicuramente, un elementoimportante dellintero 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 allinternodella propria pagina Facebook.Facebook ha da sempre consentito linclusione di elementi allinterno della pagina attraversolutilizzo di un linguaggio "proprietario" denominato FBML che, in pratica, era una versioneadattata per Facebook del linguaggio HTML.Attraverso la creazione di unapplicazione si poteva realizzare, per esempio, una welcomepage, su cui spesso siamo atterrati visitando pagine Facebook più curate.Nellultimo anno, Facebook, ha introdotto la possibilità di creare questi contenuti mediantelutilizzo di un Iframe. Significa che la personalizzazione della pagina può essere realizzataincludendo un contenuto esternomediante lutlizzo di un documento HTML presente in unospazio non ospitato da Facebook. LIframe consente, in pratica, la visualizzazione in unadeterminata pagina del contenuto presente su unaltra 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 normaleCMS 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 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 accollarsilonere 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 AccountPagina FacebookApplicazione per gestire Iframe TabGoogle SitesCreatività [quanto basta]Google AccountPer poter accedere ai servizi di Google bisogna avere un indirizzo mail accreditato comeGoogle Account. Di solito è lindirizzo 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 laccount potrete accedere a tutti i servizi di Google compresoquello 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, lidentità 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 al menù di base di unapagina Facebook dobbiamo utilizzareunapplicazione. Non sfugge alla regola lacreazione di una tab per il nostro Iframeche ospiterà il minisito che realizzeremo conGoogle Sites. Per poterla realizzare lestrade sono tre:1 - realizzi da solo la app per ospitare liframe[in rete e su Facebook ci sono guide cherendono facile il percorso]2 - Paghi qualcuno per fartela realizzare3 - Utilizzi unapps 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 allinstallazione dellapplicazione precedente].Come procediamo?
1 - Cerchiamo nel box di ricerca: static iframe tab e selezioniamo lapplicazioneevidenziata nellimmagine.2 - Vi trovate davanti alla pagina dellapplicazione 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 24 - dopo aver aggiunto lapplicazione alla vostra pagina vi troverete nel menù dellapagina una nuova tab denominata "Welcome" Cliccate sulla voce Welcome e vi troverete nella pagina di amministrazione dellapplicazione. Limmagine 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 biancosotto la sezione "Page Source" con il puntino su HTML [lindirizzo è 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 - se preferite avere due contenuti diversi da proporre ai fan e ai non fan potete utilizzareil secondo spazio sotto la voce "Non - Fan Page Source" e selezionando il puntino sulopzione gradita. Se volete inserire una immagine, selezionate "image", se,invece,volete creare una versione del minisito solo per in non fan selezionate HTML [consigliolopzione di creare unimmagine che inviti lutente a diventare fan per poter visualizzarecontenuti ed offerte esclusive dedicate ai soli fans]Lapplicazione è 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 lurl che dobbiamo sostituire a quello di test inserito nel codicedelliframe:<iframe src="https://sites.google.com/site/hoteltestwhr/"name="frame1" scrolling="no"frameborder="no" align="center"height = "1700px" width = "520px"></iframe>* sostituire lurl del vostro sito a quello evidenziato in grassetto Ok?... Pausa caffè!
Google SitesLa nostra pagina Facebook è pronta per ospitare il nostro bel sito che realizzeremo con GoogleSites. 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 pagina Facebook. Altri vantaggi? I siti realizzati su GoogleSites sono "convertibili" per la versione mobile [nel settaggio del sito se confermate questaopzione avrete ladattamento 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 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 unaltra 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!]
I vari passaggi #1 Date un nome al vostro sito selezionate il modello "semplice"
#2Appena creato il sito base vi trovate davanti un layout decisamente poco idoneo per essereincluso allinterno 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 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"
#51 - eliminiamo la barra laterale2- clicchiamo su "Modifica laspetto del sito" e imposta i valori come immagine in cornice
#6Ok il sito è configurato nelle dimensioni e nel layout di base. Adesso procediamo allinserimentodei 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: 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 dallimmagine 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
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. Di base viene 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 vi permetterà di personalizzare il sito con i colori ed i caratteri più idonei alla vostra immagine aziendale.8 - ricordate lo script per includere liframe che abbiamo inserito nellapplicazioneFacebook? Una volta terminato il sito su Google Sites copiate lurl 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. Un po 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 unefficacedistribuzione dei contenuti. Consiglio di preparare tutti i contenuti da includere prima di 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 perlinserimento di una galleria fotografica ... etc.etc.
1 2 3 4 5 6 7 Indirizzo - RecapitiIdee 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
Cristina Baruta![Pagina Facebook: utilizzo di un iframe tab e di google sites per costruire un welcome site [tutorial]](http://cdn.slidesharecdn.com/ss_thumbnails/tutorial-iframe-tab-site-whr-111130030133-phpapp02-thumbnail-2.jpg?1322645288){kind=small}