SlideShare a Scribd company logo
1 of 18
Download to read offline
IFrame Tab con Google Sites
[come realizzare un minisito sulla pagina Facebook utilizzando ... Google]
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 !]
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?
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?
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
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>
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è!
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!]
I vari passaggi

                                                       #1




                         Date un nome al vostro sito




              selezionate il modello "semplice"
#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
#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"
#5
1 - eliminiamo la barra laterale
2- clicchiamo su "Modifica l'aspetto del sito" e imposta i valori come immagine in cornice
#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
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 ->
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.
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
Pagina Facebook: utilizzo di un iframe tab e di google sites per costruire un welcome site [tutorial]

More Related Content

What's hot

Guida completa 1 Minute Site: come creare un sito web
Guida completa 1 Minute Site: come creare un sito webGuida completa 1 Minute Site: come creare un sito web
Guida completa 1 Minute Site: come creare un sito web1minutesite
 
Facebook tab-design
Facebook tab-designFacebook tab-design
Facebook tab-designDML Srl
 
Come strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPressCome strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPressSiteGround.com
 
Aruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarlo
Aruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarloAruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarlo
Aruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarloAruba S.p.A.
 
E-commerce: GUIDA PRATICA E VELOCE
E-commerce: GUIDA PRATICA E VELOCEE-commerce: GUIDA PRATICA E VELOCE
E-commerce: GUIDA PRATICA E VELOCEAruba S.p.A.
 
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo? parsimoniousmad9
 
WordPress 101 – Freelance Day - 24 ottobre 2015
WordPress 101 – Freelance Day - 24 ottobre 2015WordPress 101 – Freelance Day - 24 ottobre 2015
WordPress 101 – Freelance Day - 24 ottobre 2015Toolbox Coworking
 
Aruba SuperSite - FOCUS: Crea il tuo sito, sarà fenomenale!
Aruba SuperSite - FOCUS: Crea il tuo sito, sarà fenomenale!Aruba SuperSite - FOCUS: Crea il tuo sito, sarà fenomenale!
Aruba SuperSite - FOCUS: Crea il tuo sito, sarà fenomenale!Aruba S.p.A.
 
Creare un sito con WordPress
Creare un sito con WordPressCreare un sito con WordPress
Creare un sito con WordPressEugenio Molinario
 
Piani builderall web presence digital marketing - builderall -_business
Piani builderall web presence   digital marketing - builderall -_business Piani builderall web presence   digital marketing - builderall -_business
Piani builderall web presence digital marketing - builderall -_business Luca Marzotto
 
Creare un sito web con Wordpress
Creare un sito web con WordpressCreare un sito web con Wordpress
Creare un sito web con WordpressAndrea Giavara
 
Crea fantastiche landing page con il nuovo editor WordPress
Crea fantastiche landing page con il nuovo editor WordPressCrea fantastiche landing page con il nuovo editor WordPress
Crea fantastiche landing page con il nuovo editor WordPressSiteGround.com
 
I 1000 utilizzi di WordPress
I 1000 utilizzi di WordPressI 1000 utilizzi di WordPress
I 1000 utilizzi di WordPressMarco De Sangro
 
Corso Web 2.0: Diario di viaggio
Corso Web 2.0: Diario di viaggioCorso Web 2.0: Diario di viaggio
Corso Web 2.0: Diario di viaggioRoberto Polillo
 

What's hot (20)

Guida completa 1 Minute Site: come creare un sito web
Guida completa 1 Minute Site: come creare un sito webGuida completa 1 Minute Site: come creare un sito web
Guida completa 1 Minute Site: come creare un sito web
 
Facebook tab-design
Facebook tab-designFacebook tab-design
Facebook tab-design
 
iframe facebook
iframe facebookiframe facebook
iframe facebook
 
Come strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPressCome strutturare un design semplice ed efficace per WordPress
Come strutturare un design semplice ed efficace per WordPress
 
WordPress Facilissimo: guida base
WordPress Facilissimo: guida base WordPress Facilissimo: guida base
WordPress Facilissimo: guida base
 
Aruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarlo
Aruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarloAruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarlo
Aruba SuperSite - GUIDA: Semplici passi per imparare ad utilizzarlo
 
E-commerce: GUIDA PRATICA E VELOCE
E-commerce: GUIDA PRATICA E VELOCEE-commerce: GUIDA PRATICA E VELOCE
E-commerce: GUIDA PRATICA E VELOCE
 
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
Vuoi Creare El Blog Di Successo?
 
WordPress 101 – Freelance Day - 24 ottobre 2015
WordPress 101 – Freelance Day - 24 ottobre 2015WordPress 101 – Freelance Day - 24 ottobre 2015
WordPress 101 – Freelance Day - 24 ottobre 2015
 
Aruba SuperSite - FOCUS: Crea il tuo sito, sarà fenomenale!
Aruba SuperSite - FOCUS: Crea il tuo sito, sarà fenomenale!Aruba SuperSite - FOCUS: Crea il tuo sito, sarà fenomenale!
Aruba SuperSite - FOCUS: Crea il tuo sito, sarà fenomenale!
 
Creare un sito con WordPress
Creare un sito con WordPressCreare un sito con WordPress
Creare un sito con WordPress
 
Usare Gli Strumenti Di Fb
Usare Gli Strumenti Di FbUsare Gli Strumenti Di Fb
Usare Gli Strumenti Di Fb
 
Piani builderall web presence digital marketing - builderall -_business
Piani builderall web presence   digital marketing - builderall -_business Piani builderall web presence   digital marketing - builderall -_business
Piani builderall web presence digital marketing - builderall -_business
 
Creare un sito web con Wordpress
Creare un sito web con WordpressCreare un sito web con Wordpress
Creare un sito web con Wordpress
 
Crea fantastiche landing page con il nuovo editor WordPress
Crea fantastiche landing page con il nuovo editor WordPressCrea fantastiche landing page con il nuovo editor WordPress
Crea fantastiche landing page con il nuovo editor WordPress
 
I 1000 utilizzi di WordPress
I 1000 utilizzi di WordPressI 1000 utilizzi di WordPress
I 1000 utilizzi di WordPress
 
Corso base wordpress
Corso base wordpressCorso base wordpress
Corso base wordpress
 
Corso Web 2.0: Diario di viaggio
Corso Web 2.0: Diario di viaggioCorso Web 2.0: Diario di viaggio
Corso Web 2.0: Diario di viaggio
 
I Love WordPress
I Love WordPressI Love WordPress
I Love WordPress
 
Web marketing for cfp
Web marketing for cfpWeb marketing for cfp
Web marketing for cfp
 

Viewers also liked

Consigli pratici di web marketing turistico per b&b e agriturismo
Consigli pratici di web marketing turistico per b&b e agriturismoConsigli pratici di web marketing turistico per b&b e agriturismo
Consigli pratici di web marketing turistico per b&b e agriturismoArturo Salerno
 
Come fare Marketing Turistico online e sui social media?
Come fare Marketing Turistico online e sui social media? Come fare Marketing Turistico online e sui social media?
Come fare Marketing Turistico online e sui social media? Ninja Academy
 
Web Marketing Turistico: opportunità e criticità
Web Marketing Turistico: opportunità e criticitàWeb Marketing Turistico: opportunità e criticità
Web Marketing Turistico: opportunità e criticitàUmberto Mezzacapo
 
Gestione della reputazione online: come superare le aspettative dei clienti -...
Gestione della reputazione online: come superare le aspettative dei clienti -...Gestione della reputazione online: come superare le aspettative dei clienti -...
Gestione della reputazione online: come superare le aspettative dei clienti -...Digital Marketing Turistico
 
Digital Budgeting e Web Marketing ROI nel turismo
Digital Budgeting e Web Marketing ROI nel turismoDigital Budgeting e Web Marketing ROI nel turismo
Digital Budgeting e Web Marketing ROI nel turismoGiorgio Soffiato
 
Social Media Marketing per hotel: strategie, strumenti e contenuti
Social Media Marketing per hotel: strategie, strumenti e contenutiSocial Media Marketing per hotel: strategie, strumenti e contenuti
Social Media Marketing per hotel: strategie, strumenti e contenutiDigital Marketing Turistico
 
Marketing turistico e territoriale
Marketing turistico e territorialeMarketing turistico e territoriale
Marketing turistico e territorialeCarmine D'Arconte
 

Viewers also liked (7)

Consigli pratici di web marketing turistico per b&b e agriturismo
Consigli pratici di web marketing turistico per b&b e agriturismoConsigli pratici di web marketing turistico per b&b e agriturismo
Consigli pratici di web marketing turistico per b&b e agriturismo
 
Come fare Marketing Turistico online e sui social media?
Come fare Marketing Turistico online e sui social media? Come fare Marketing Turistico online e sui social media?
Come fare Marketing Turistico online e sui social media?
 
Web Marketing Turistico: opportunità e criticità
Web Marketing Turistico: opportunità e criticitàWeb Marketing Turistico: opportunità e criticità
Web Marketing Turistico: opportunità e criticità
 
Gestione della reputazione online: come superare le aspettative dei clienti -...
Gestione della reputazione online: come superare le aspettative dei clienti -...Gestione della reputazione online: come superare le aspettative dei clienti -...
Gestione della reputazione online: come superare le aspettative dei clienti -...
 
Digital Budgeting e Web Marketing ROI nel turismo
Digital Budgeting e Web Marketing ROI nel turismoDigital Budgeting e Web Marketing ROI nel turismo
Digital Budgeting e Web Marketing ROI nel turismo
 
Social Media Marketing per hotel: strategie, strumenti e contenuti
Social Media Marketing per hotel: strategie, strumenti e contenutiSocial Media Marketing per hotel: strategie, strumenti e contenuti
Social Media Marketing per hotel: strategie, strumenti e contenuti
 
Marketing turistico e territoriale
Marketing turistico e territorialeMarketing turistico e territoriale
Marketing turistico e territoriale
 

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

5 cose da sapere per fare un sito responsive su WordPress
5 cose da sapere per fare un sito responsive su WordPress5 cose da sapere per fare un sito responsive su WordPress
5 cose da sapere per fare un sito responsive su WordPressSiteGround.com
 
IL MIO SITO in 5 passi
IL MIO SITO in 5 passiIL MIO SITO in 5 passi
IL MIO SITO in 5 passiDaniloArpino
 
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG sampsonrhapfvuvdf
 
IL MIO SITO in cinque passi
IL MIO SITO in cinque passiIL MIO SITO in cinque passi
IL MIO SITO in cinque passiImpresa Semplice
 
Facebook Fanpage Design & Optimization
Facebook Fanpage Design & OptimizationFacebook Fanpage Design & Optimization
Facebook Fanpage Design & OptimizationDML Srl
 
Come realizzare siti mobile - Buginar 29 Maggio 2011
Come realizzare siti mobile - Buginar 29 Maggio 2011Come realizzare siti mobile - Buginar 29 Maggio 2011
Come realizzare siti mobile - Buginar 29 Maggio 2011Rocco Passaro
 
Creare web design seo friendly
Creare web design seo friendlyCreare web design seo friendly
Creare web design seo friendlyxalman55415
 
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giustoGioacchino Cipriano
 
I testi la parte più importante di un sito web
I testi  la parte più importante di un sito webI testi  la parte più importante di un sito web
I testi la parte più importante di un sito webseopuglia
 
Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)armandocarcaterra
 
Interfacce web – giocarci per conoscerle, conoscerle per usarle meglio - Olja...
Interfacce web – giocarci per conoscerle, conoscerle per usarle meglio - Olja...Interfacce web – giocarci per conoscerle, conoscerle per usarle meglio - Olja...
Interfacce web – giocarci per conoscerle, conoscerle per usarle meglio - Olja...Girl Geek Dinners Milano
 
Come creare un sito web gratis con Google Sites in 10 step
Come creare un sito web gratis con Google Sites in 10 stepCome creare un sito web gratis con Google Sites in 10 step
Come creare un sito web gratis con Google Sites in 10 stepBTF Traduzioni SEO Sviluppo Web
 
Genera Blog Gratis Que incluye Wordpress
Genera Blog Gratis Que incluye Wordpress
Genera Blog Gratis Que incluye Wordpress
Genera Blog Gratis Que incluye Wordpress sordidthrill6405
 
Wordpress Tuning SEO
Wordpress Tuning SEOWordpress Tuning SEO
Wordpress Tuning SEODavide Pozzi
 

Similar to Pagina Facebook: utilizzo di un iframe tab e di google sites per costruire un welcome site [tutorial] (20)

5 cose da sapere per fare un sito responsive su WordPress
5 cose da sapere per fare un sito responsive su WordPress5 cose da sapere per fare un sito responsive su WordPress
5 cose da sapere per fare un sito responsive su WordPress
 
IL MIO SITO in 5 passi
IL MIO SITO in 5 passiIL MIO SITO in 5 passi
IL MIO SITO in 5 passi
 
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
a hundred Argomenti Per Creare El BLOG
 
IL MIO SITO in cinque passi
IL MIO SITO in cinque passiIL MIO SITO in cinque passi
IL MIO SITO in cinque passi
 
Facebook Fanpage Design & Optimization
Facebook Fanpage Design & OptimizationFacebook Fanpage Design & Optimization
Facebook Fanpage Design & Optimization
 
Wordpress
WordpressWordpress
Wordpress
 
Come realizzare siti mobile - Buginar 29 Maggio 2011
Come realizzare siti mobile - Buginar 29 Maggio 2011Come realizzare siti mobile - Buginar 29 Maggio 2011
Come realizzare siti mobile - Buginar 29 Maggio 2011
 
Creare web design seo friendly
Creare web design seo friendlyCreare web design seo friendly
Creare web design seo friendly
 
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
 
I testi la parte più importante di un sito web
I testi  la parte più importante di un sito webI testi  la parte più importante di un sito web
I testi la parte più importante di un sito web
 
WordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWAWordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWA
 
Come progettare un sito web: 8 passi un sito che vende
Come progettare un sito web: 8 passi un sito che vendeCome progettare un sito web: 8 passi un sito che vende
Come progettare un sito web: 8 passi un sito che vende
 
Siti web vincenti
Siti web vincentiSiti web vincenti
Siti web vincenti
 
Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)
 
Interfacce web – giocarci per conoscerle, conoscerle per usarle meglio - Olja...
Interfacce web – giocarci per conoscerle, conoscerle per usarle meglio - Olja...Interfacce web – giocarci per conoscerle, conoscerle per usarle meglio - Olja...
Interfacce web – giocarci per conoscerle, conoscerle per usarle meglio - Olja...
 
Come creare un sito web gratis con Google Sites in 10 step
Come creare un sito web gratis con Google Sites in 10 stepCome creare un sito web gratis con Google Sites in 10 step
Come creare un sito web gratis con Google Sites in 10 step
 
Genera Blog Gratis Que incluye Wordpress
Genera Blog Gratis Que incluye Wordpress
Genera Blog Gratis Que incluye Wordpress
Genera Blog Gratis Que incluye Wordpress
 
Wordpress Tuning SEO
Wordpress Tuning SEOWordpress Tuning SEO
Wordpress Tuning SEO
 
Costruire un sito_web
Costruire un sito_webCostruire un sito_web
Costruire un sito_web
 
Plone.4.ita
Plone.4.itaPlone.4.ita
Plone.4.ita
 

Recently uploaded

Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Associazione Digital Days
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Associazione Digital Days
 
ScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIinfogdgmi
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Associazione Digital Days
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Associazione Digital Days
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Associazione Digital Days
 

Recently uploaded (6)

Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
 
ScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AIScrapeGraphAI: a new way to scrape context with AI
ScrapeGraphAI: a new way to scrape context with AI
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
 

Pagina Facebook: utilizzo di un iframe tab e di google sites per costruire un welcome site [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 ->
  • 15.
  • 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