Come personalizzare la grafica di una pagina FaceBook
Costruire una landing page in html per promuovere la tua attività su facebook.
Facebook è pervaso da una noiosa uniformità grafica: possiamo pubblicare praticamente ogni sorta di contenuto ma il layout è piuttosto rigido ed uguale per tutti gli utenti.
E’ possibile personalizzare la struttura html di una pagina di FaceBook, per meglio coordinarlo con il nostro sito o il nostro ecommerce? Fortunatamente si. Facebook mette a disposizione per i designer ed i programmatori un’apposita applicazione, FBML App, che ci consente di inserire intere porzioni di codice html nelle pagine FaceBook. Sarà quindi possibile realizzare veri e propri minisiti nelle nostre fan page, comprensivi di form interattive, immagini e animazioni flash.
Scopriamo come:
1.Aggiungiamo la Static FBML App, cercando FBML Statico su FB e selezionando “Aggiungi alla mia pagina”.
Applicazione FBML di FaceBook
2. Configuriamo la Static FBML App. Dopo aver aggiunto l’applicazione FBML alla nostra pagina FB, clicchiamo su Modifica la Pagina.
Vedremo apparire l’elenco di tutti i moduli che FB mette a disposizione della nostra pagina, dalla bacheca fino ai link.
Cliccando su Impostazioni applicazioni potremo scegliere dove far comparire il nostro modulo html: in particolare la dicitura Riquadro specifica la posizione in un box basso a sinistra, e la dicitura Scheda specifica che il codice html sarà mostrato in una vera e propria scheda, simile in tutto e per tutto alla scheda della bacheca.
3. Settiamo la FBML App come pagina di avvio.
Anziché mostrare la solita bacheca, è possibile persino settare la pagina appena creata come pagina di avvio di default. Basta andare su Impostazioni Bacheca e scegliere la nostra FBML page come scheda di arrivo predefinita. Questo significa che da ora, la nostra applicazione html sarà la mostrata immediatamente ai fan della nostra pagina.
4. Personalizziamo il codice html di facebook.
Cosa possiamo fare? Praticamente di tutto. Oltre a poter inserire il codice html (e quindi integrare la nostra pagina FaceBook con form, immagini, newsletter, link ai social, ecc. ), FB ci mette a disposizione una pratica API di tags preconfezionati per le più consuete operazioni di progettazione siti: fare query sugli utenti, inserire flash (swf e flv), generare date e numeri casuali, ecc.
Per farlo si usano dei tag proprietari intuitivi ed immediati. Un esempio?
per inserire lo script di Google-analytics basta usare il tag:<fb:google-analytics uacct=”UA-9999999-99″ />
L’elenco esaustivo di tutti gli fb-tag è nel wiki ufficiale degli sviluppatori FB.
Esempio di applicazione: lo shop online di Insekta
Puoi vedere un esempio di pagina personalizzata FB qui: Insekta design.
L'Autore
KreativeHouse è un laboratorio di immagini, idee, progetti. Usiamo grafica, stampa e web per fondere creatività e comunicazione. Studiamo strategie di promozione a basso impatto ambientale e ad alto impatto emotivo. I nostri prodotti sono interamente realizzato da noi "made in Italy". Le soluzioni KH sono sostenibili ed ecocompatibili. KreativeHouse strada della Lodesana 649 sx 43036 Fidenza, (PR) Italy
33 Commenti
sarà una delle prossime cose che farò
grazie!!
Ottimo! Ci stavo pensando qualche giorno fa ma non mi ero ancora messo a cercare una soluzione…
Quoto al 100% Laura
questi sono quelli che definisco “articoli di qualità”, …complimenti!
Ottimo articolo…. solo che non capisco perchè dopo aver cliccato su aggiungi alla mia pagina mi appare una finestra dove sta scritto, (NESSUN RISULTATO)
come mai…?
Ottimo tutorial, una cosa però, io ho un problema con la landing tab che ho creato per la pagina facebook del mio sito, infatti viene visualizzata correttamente bene con tutti i broswer ad eccezione del solito internet explorer, se clicchi sul mio nome dovresti riuscire a vederla, ma non riesco a capire il motivo?
[...] Come personalizzare la grafica di una pagina FaceBook | Italian webdesign (tags: facebook landingpage) [...]
ecco una domanda io nella scheda AXA (creata con FBML), vorrei inserire una immagine ma forse sbaglio codice. mi aiutate? e’ importante.
vi scrivo codice che inserisco
Dando un’occhiata all’FBML, mi sto rendendo conto di quante cose sia possibile fare su FB, in maniera abbastanza semplice ed intuitiva.
@kreativehouse grazie ancora per il tuo articolo!
Ignoravo totalmente che si potesse fare, grazie!
Grazie ma io non riesco a inserire nulla nel fbml…come faccio a metterci qualcosa?
x giulia: è semplice per inserire il codice nell’fbml
quest’articolo potrebbe esserti utile(il link non è attivo, devi copiarlo nel broswer):
bigthink.it/facebook-landing-tab-pagina-fan/
Ciao Giulia, si tratta solo di inserire il testo html nell’apposito box. Cosa non riesci a fare in particolare?
ciao,ho seguito passo passo quello ke te hai scritto ma quando vado su stitic fbml e clicco su aggiungi pagina beh nn succede nulla mi9 dice nesun rislutato perchè? spero ke mi puoi dare una mano grazie in anticipo.
Che ve ne pare di questa pagina?
http://www.facebook.com/pages/AndreaLetiit/188935970936
Vedo molte pagine di facebook usare testi colorati anche sei FMBL.. ma come si fa?
Definisci uno stile in linea e lo colori.
Questa è la soluzione più veloce, anche se poco pratica.
Benissimo:)
ho capito tutto!
ciao , è davvero un buon articolo , ma non ho capito una cosa … come faccio a inserire l’immagine nella finestra fbml ?
Ciao a tutti!
Sto impazzendo aiuto!
Allora, una volta che aggiungo alla mia pagina FBML Statico, poi vado nella mia pagina e faccio “modifica pagina” poi però non mi fa visualizzare le schede di cui sopra, ma tutt’altro.
Come posso fare?
Grazie mille!
Infatti, anche a me appare la stessa cosa e non cambau nulla
dovrebbe visualizzarti quell’avviso nel caso in cui tu non abbia creato nessuna pagina…
N.B. non puoi utilizzare il FBML statico nel profilo di facebook, ma solo nelle pagine
per creare un pagina vai qua:
http://www.facebook.com/photo.php?fbid=161373993909546&set=a.160608063986139.30784.100001108408418&ref=nf#!/pages/create.php
spero che il problema sia questo
ciao!
Un bel mi piace su questa GRANDIOSA pagina:
http://www.facebook.com/pages/Oo_RAP-MUSIC_Oo/176530445694758
ciao a tutti. scusate ma dov’è impostazioni bacheca?
mi piace! proverò! wow!! Grazie Lauryn!
Ciao a tutti, io ho provato a fare questo ma dopo che vado nella pagina di “Static FBML” non c’è scritto aggiungi alla tua pagina ho provato a cliccare “vai all’ applicazione” ma subito dopo torna alla home, come posso fare?
Ottimo solo dovresti indicare il link delle appliazioni!
Ciao Emily, se vai nelle discussioni trovi tutto quello che ti serve leggendo i commenti
Ciao a tutti, ho avuto problemi si da subito. nel senso che il link “Aggiungi alla mia pagina” non mi compare. Vedo solo aggiungi ai preferiti delle mia pagina. L’ha pagina l’ho creata una settimana fa. Solo che è brutto vedere la pagina con una grafica così triste.
Quindi mi chiedo dove sbaglio?
Citazioni Telefilm Criminologi
Vedo che non sono il solo ad avere lo stesso problema; ovvero quello di non trovare il pulsante “aggiungi alla mia pagina” o “mi piace”. Qualcuno ha risolto?
N.B. Io non ho una pagina personale ma soltanto quella aziendale.
Saluti
Giulio
RISOLTO!!!
bisogna accedere su:
https://www.facebook.com/add.php?api_key=fdfd01c9df7d644a68a4e989ae861e44&pages=1&page=1029388631232
che tutorial FUTILE…. ho aggiunto l’applicazione ma non mi compare nella mia fanpage la scritta ‘modifica la pagina’,,,,,,,,
ma perche’ non funziona mai cio’ che scrivete??
In effetti credo ke FB l’abbia bocciata, sicuramente gli caricava i servers + del previsto. Cmq ci sará qualke alternativa valida, basterá cercarla. Ciao !