Creare un layout grafico, particolarmente interessante e bello per i profili fan su Facebook è sicuramente uno degli obiettivi di chi si occupa di gestire e creare fan page. Voglio illustrarvi come creare una pagina per Facebook che si distingue dalle altre. Partendo da un articolo di BigThink che presentava una galleria di particolari pagine fan su facebook, si può notare come queste hanno un impatto differente dal solito, si distinguono perché sembrano rompere la struttura a due colonne di facebook.
Questo metodo è detto la tecnica del puzzle: ovvero un modo per collegare visivamente l’immagine del profilo (colonna sinistra) con l’aspetto della landing tab (colonna di destra, con il contenuto della pagina/tab principale del profilo); in pratica si tratta di modificare l’aspetto della pagina in modo che l’aspetto grafico sembri unico e non suddiviso in 2 colonne.
Prima valutiamo il terreno in cui ci muoveremo.
Caratteristiche
Le principali, gli ingombri e i vincoli:
per l’immagine del profilo, la larghezza massima è di 180 pixel (immagine 1);
immagine 1 - larghezza dell'immagine del proflio (180px)
per l’immagine/contenuti della pagina (tab), la larghezza massima è di 520 pixel (immagine 2);
immagine 2 - larghezza landing tab
Le altezze di questi due invece sono variabili a vostra scelta.
C’è da considerare un gap visivo, è il gradino verticale tra la parte superiore dell’immagine del profilo e il margine superiore della pagina (tab), infatti la colonna di sinistra con l’immagine del profilo è più alta di 57 pixel rispetto ai contenuti sulla destra (immagine 3).
immagine 3 - differenza (57 px)
La colonna bianca che separa l’immagine del profilo dal tab è di 20 pixel.
Obiettivo grafico di questo tipo di layout per FB è di far sparire questo stacco, creare una continuità tra le due parti in modo da farle sembrare un pezzo unico.
I 2 pezzi del puzzle
Immagine del profilo
È la parte dove inserire la vostra comunicazione istituzionale, dove mettere il vostro logo; bisogna valutare che questa immagine rimane costante in tutto il profilo FaceBook; deve contenere tutti gli elementi che ricordino ai visitatori chi siete e come gli parlate.
Bisogna ben considerare questo spazio, con attenzione, perché sono presenti elementi che restano costanti in tutte le altre sezioni del profilo, quindi deve essere comprensibile e deve essere comprensibile/presentabile anche da solo. Questo spazio supporta l’effetto grafico che vogliamo ottenere insieme alla landing tab di destra, il suo agganciarsi ad essa renderà l’aspetto di questa “pagina” unico e uniforme; ma l’immagine del profilo non deve essere schiava di questo effetto. Una volta vista senza il suo compagno (tab), deve essere comunque gradevole e non dare l’idea di sembrare un pezzo mancate di un puzzle. Le informazioni che date in questa immagine del profilo devono essere il più pulite possibile.
Landing Tab
È la parte di destra, quella dei contenuti, questa Tab viene definita così perchè è dove atterrano i vostri visitatori. L’effetto della tecnica del puzzle, oltre a presentarvi con stile e in modo coordinato con il vostro tipo di comunicazione, è di accogliere i nuovi utenti, quindi di farvi conoscere, e di farli diventare nuovi fan, di informarli. Oltre all’aspetto puzzle con l’immagine del profilo deve contenere gli elementi che devono portare l’utente a compiere una azione ad esempio:
- informarlo di una promozione
- farlo diventare vostro fan
- fargli compilare un form per contattarvi
La struttura del tab
L’iframe per Facebook
Per completare questa parte dei contenuti, non si tratta di creare solo la grafica della pagina ma anche il suo contenitore in html (o php). Può sembrare banale per chi ha dimestichezza con un minimo di codice html, trattandosi nella pratica di una pagina web.
Una vera rivoluzione è che fino a qualche mese fa per creare un tab bisognava scrivere il codice in fbml, il linguaggio proprietario di FB, mentre ora è possibile inserire contenuti creando una semplice pagina html.
Questo contenitore verrà inserito in un iframe direttamente da facebook. È quindi una pagina web esterna a FB, deve essere su uno spazio di hosting vostro; una volta pronta, per agganciarla, dovete passare dalla sezione sviluppatori di facebook e registrare questo tab come una applicazione, maggiori informazioni e dettagli (spiegati passo a passo) per questa operazione li trovate a questi link di JuliusDesign e BigThink, vi consiglio di leggerli.
Se non avete dimestichezza con il codice potete anche cercare un editor on-line per generare l’html per la pagina, mi raccomando che non sia più larga di 520pixel!
È utile, nel css della pagina, settare così il body della pagina, visto l’obbligo della larghezza:
body { margin:0; padding:0; border:none; max-width:520px;}
Certo non è il Reset CSS di Eric Meyer, ma è un modo per evitiare debug per colpa della pagina html che caricherete.
L’aspetto grafico
L’operazione più semplice (a volte un po’ troppo), una volta preparata la pagina contenitore, è quella di inserire al suo interno una immagine, che riempie lo spazio che deciderete di occupare. È un metodo pratico e che visivamente consente un aspetto coordinato con la vostra comunicazione e vi consente di essere il più creativi possibile.
Trovate una idea che coinvolga le due parti, può essere uno sfondo unico, oppure una foto che parte dal profilo e prosegue sul landing tab, nella galleria citata a inzio post ci sono esempi molto validi da cui prendere spunto.
Utilizzate contenuti normali per una pagina html, e intendo: testo, filmati, flash… non solo delle immagini sia per questioni di interattività (ad esempio su un rollover di un link), sia per questioni di peso, conoscete la differenza tra il caricare un testo piuttosto che caricare una immagine, vero? Con il passaggio da fbml a html si può utilizzare questo spazio come una pagina web, quindi:
- si possono embeddare video
- inserire slideshow con jquery
- caricare animazioni in flash
- mettere form da compilare
La “Call to action”
Questo lavoro di immagine sul profilo ha, come detto prima delle finalità, oltre all’aspetto estetico, ed è quella di portare l’utente non fan a “conoscervi“.
Una di queste azioni, ad esempio è indirizzare il visitatore a fare clic sul bottone “Mi piace“.
I metodi visivi principali sono questi:
- indicando realmente la posizione del tasto nella pagina
- inserendo una copia del bottone “Mi piace” nella grafica del vostro tab
- embeddare il tasto like di facebook
Nel primo caso: è utile sapere esattamente dove sarà il bottone; è posto sempre a destra, subito dopo il titolo della pagina/tab, quindi la lunghezza del nome e del tab possono variarne la posizione.
Per capire dove è esattamente il bottone per un non-fan, basta togliere momentaneamente la preferenza alla pagina che volte modificare, attraverso il link “non mi piace più” (nel menù sotto l’immagine del profilo), in modo da poter misurare la posizione e creare un elemento che lo indichi nel modo più preciso possibile (vedi immagine 4), per un utente che non è ancora fan.
immagine 4 - indicare il bottone "mi piace"
Nel secondo caso: basta ripetere il bottone e chiedere esplicitamente di cliccare; a mio parere, bisogna far capire bene che quello non è il vero bottone “Mi piace”, a volte gli utenti vengono ingannati e tentano di usarlo anche se è solo una immagine nella vostra grafica.
Nel terzo caso: inserite nel codice della pagina html il bottone direttamente all’interno della landing tab, in questa pagina della sezione sviluppatori su facebook, potete modificare il codice (e copiarlo) che vi serve per inserire il bottone “Mi piace“. Questo, per chi è un po’ pratico di codice html.
Oppure come ho scritto sopra potete chiedere altro, come inserire un form e chiedere di compilarlo.
Per chi mastica php: è possibile mostrare contenuti differenti tra chi è già fan a chi non lo è, ci sono variabili che distinguono il tipo di utente, che ad esempio non mostrano più la richiesta di diventare fan a chi lo è già.
Oltre a questa spinta ad agire, non dimenticate di inserite il link al vostro sito, o al vostro profilo su altri social network (twitter, youtube, friendfeed, tumblr, …).
Un file per iniziare
Se non volete partire da zero, l’immagine qui sotto è un .png con con gli ingombri principali per questo tipo di layout.
file base per tecnica del puzzle su Facebook
L’altezza delle due parti è puramente indicativa, valutate anche il below the fold, secondo la risoluzione media dei monitor.
Riepilogo e consigli:
- inserite gli elementi istituzionali nell’immagine del profilo, a sinistra, questa rimane costante anche per tutti gli altri tab del vostro profilo su facebook, è quella più importante, quindi il logo e gli elementi grafici istituzionali come: immagini, date… vanno inseriti qui
- collegate le due parti visivamente, ma considerate anche il loro aspetto singolo, potrebbe capitare di dover inserire una nuova immagine del profilo non collegata, o di modificare la landing tab, le informazioni delle due parti sono diverse e non devono essere dipendenti l’una dall’altra
- nella parte della landing page inserite una frase che faccia compiere al visitatore una azione, cliaccare sul mi piace, o compilare un form… sono gli obiettivi di tutto questo lavoro sull’aspetto della pagina
- se avete delle promozioni legate al profilo su facebook, la parte destra della landing page è il suo ambiente, indicate eventuali altre azioni da compiere, oltre al “mi piace“, si può customizzare il contenuto per chi è fan diversamente da chi non lo è.
- sempre nella landing page utilizzate la possibilità costruire contenuti che non siano composti di sole immagini, usate tutte le possibilità e l’interattività via codice (dai roll-over sui link in poi), utilizzare video, animazioni in flash, slideshow…
- inserite i link ad altri profili su altri social network, come twitter, youtube, friendfeed, … e link al vostro sito/blog
- considerate che i testi inseriti nel codice possono sembrare graficamente più rigidi, ma sono molto più comodi da gestire e modificare e sono molto più leggeri da caricare
Un esempio
È da osservare attentamente, molto bello e interessante, è anche presente nella galleria di BigThink, ed è: 3 Lions Media
Analizzandolo si notano questi elementi:
- nel tab a destra, la parte alta è un flash con una semplice animazione inizale (che prosegue in un loop sul logo)
- sotto a questo flash c’è una galleria, dove in uno slideshow in automatico scorrono alcune immagini
- più in basso altri testi (html) e immagini
In questo profilo hanno sfruttato tutte le “tecnologie” utili per una paginetta larga 520 pixel, hanno sfruttato anche il bianco di fondo della pagina, per rompere ulteriormente l’aspetto verticale delle colonne inserendolo nelle immagini con degli inserti bianchi.
Spero di essere stato esaustivo, e comprensibile, anche se ho parlato di obiettivi diversi dalla grafica e call to action il mio scopo è stato quello di spiegare come creare un layout per facebook diverso dal solito, la sua originalità potrà fare un po’ di lavoro per voi e incerementare i vostri fan/visitatori.
Se avete domande commentate pure!
Paolo Valzania Blog 