Configurazione della pagina

Come personalizzare la grafica di una pagina FaceBook

Costruire una landing page in html per promuovere la tua attività su facebook.


immagine05 Come personalizzare la grafica di una pagina 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”.

immagine01 Come personalizzare la grafica di una pagina FaceBook

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.

immagine02 Come personalizzare la grafica di una pagina FaceBook

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.

immagine03 Come personalizzare la grafica di una pagina FaceBook

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.

immagine04 Come personalizzare la grafica di una pagina FaceBook

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.

insekta shop Come personalizzare la grafica di una pagina FaceBook

Esempio di applicazione: lo shop online di Insekta

Puoi vedere un esempio di pagina personalizzata FB qui: Insekta design.

share small Come personalizzare la grafica di una pagina FaceBook
Avatar of kreativehouse 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 Comments

  • Avatar of Lauryn

    Lauryn

    24 giugno 2010, 10:03

    sarà una delle prossime cose che farò :) grazie!!

  • visualkom

    24 giugno 2010, 10:10

    Ottimo! Ci stavo pensando qualche giorno fa ma non mi ero ancora messo a cercare una soluzione… :-)

  • Andrea Leti

    24 giugno 2010, 10:51

    Quoto al 100% Laura

  • Laura De Masi

    24 giugno 2010, 11:03

    questi sono quelli che definisco “articoli di qualità”, …complimenti!
    :-)

  • alfredo

    24 giugno 2010, 12:03

    Ottimo articolo…. solo che non capisco perchè dopo aver cliccato su aggiungi alla mia pagina mi appare una finestra dove sta scritto, (NESSUN RISULTATO) :o come mai…?

  • aljoscia

    24 giugno 2010, 12:49

    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?

  • laura

    25 giugno 2010, 10:09

    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

  • visualkom

    25 giugno 2010, 15:30

    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! ;-)

  • Iria

    29 giugno 2010, 14:28

    Ignoravo totalmente che si potesse fare, grazie! :D

  • Giulia

    30 giugno 2010, 10:12

    Grazie ma io non riesco a inserire nulla nel fbml…come faccio a metterci qualcosa?

  • aljoscia

    30 giugno 2010, 14:38

    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/

  • kreativehouse

    3 luglio 2010, 13:17

    Ciao Giulia, si tratta solo di inserire il testo html nell’apposito box. Cosa non riesci a fare in particolare?

  • enza

    11 luglio 2010, 12:50

    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.

  • Andrea Leti

    11 luglio 2010, 14:10

  • Claire

    12 luglio 2010, 18:56

    Vedo molte pagine di facebook usare testi colorati anche sei FMBL.. ma come si fa?

  • Andrea Leti

    13 luglio 2010, 11:15

    Definisci uno stile in linea e lo colori.
    Questa è la soluzione più veloce, anche se poco pratica.

  • Sara

    5 settembre 2010, 15:05

    Benissimo:)
    ho capito tutto!

  • Agata

    9 settembre 2010, 22:45

    ciao , è davvero un buon articolo , ma non ho capito una cosa … come faccio a inserire l’immagine nella finestra fbml ?

  • paola

    2 dicembre 2010, 13:18

    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!

  • Piero

    26 gennaio 2011, 14:47

    Un bel mi piace su questa GRANDIOSA pagina:
    http://www.facebook.com/pages/Oo_RAP-MUSIC_Oo/176530445694758

  • Giovanni

    29 gennaio 2011, 13:54

    ciao a tutti. scusate ma dov’è impostazioni bacheca?

  • aledesign.it

    2 marzo 2011, 12:21

    mi piace! proverò! wow!! Grazie Lauryn!

  • Emily

    20 aprile 2011, 08:53

    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?

    • Laura

      5 luglio 2011, 18:49

      Ciao Emily, se vai nelle discussioni trovi tutto quello che ti serve leggendo i commenti
      :D

  • John

    31 maggio 2011, 11:51

    Ottimo solo dovresti indicare il link delle appliazioni!

  • Marta

    15 settembre 2011, 17:42

    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

  • Giulio

    30 settembre 2011, 12:39

    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

  • Giulio

    30 settembre 2011, 12:51

  • justizziere

    26 ottobre 2011, 07:15

    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??

  • Andrea

    8 novembre 2012, 15:45

    In effetti credo ke FB l’abbia bocciata, sicuramente gli caricava i servers + del previsto. Cmq ci sará qualke alternativa valida, basterá cercarla. Ciao !

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>