Spesso avendo una pagina fan su facebook si ha la necessità o il desiderio di creare una pagina personalizzata, in questa guida spiegherò come fare.
Prima di cominciare con la guida vorrei scrivere alcune informazioni base sull’html utili per capire bene quello che si andrà a fare.
Non andrò a spiegare nel dettaglio cos’è l’html o a fare una lezione di programmazione, e cercherò di essere il più sintetico possibile.
La cosa importante da sapere sull’html per capire bene questa guida è una, l’html per definire qualsiasi cosa (ad esempio un’immagine, o un testo) usa due codici, uno di apertura e uno di chiusura.
Praticamente ogni volta che vediamo una parola inserita tra <> dobbiamo sapere che quello è il codice di apertura html, ad esempio <strong>, se invece la parola è preceduta da / il codice è di chiusura, ad esempio </strong>.
Questo è molto importante per capire a cosa stiamo applicando questo codice.
Nell’esempio che ho scritto, quando scriviamo <strong>, andiamo ad indicare che da quel momento qualsiasi cosa scriviamo dovrà essere scritta in grassetto, e quando scriviamo </strong> indichiamo che da quel momento in poi non si deve più scrivere in grassetto.
Dopo questa breve introduzione passiamo alla pratica.
Scriverò tutti i codici in blu su sfondo grigio, la parte scritta in blu deve essere copiata così com’è per ottenere l’effetto desiderato, invece la parte viola può essere modificata per personalizzare l’effetto.
1. AGGIUNGERE FBML STATICO ALLA PAGINA
Per cominciare bisogna aggiungere l’applicazione FBML Statico alla propria pagina.
Per farlo:
- cliccate sul link FBML Statico
- nel menù a sinistra cliccate su Aggiungi alla mia Pagina
- Dal menù che si apre selezionate la pagina nella quale aggiungerlo
- Ora tornando nella vostra pagina, nel menù sotto l’immagine troverete Static FBML
2. MODIFICARE LA PAGINA
Dopo aver attivato FBML Statico, cliccate sul tasto Modifica Pagina
Cliccate sulla voce Applicazioni, del menù di sinistra.
Come ultima voce avrete la vostra nuova pagina FBML Statico.
Cliccate su Vai all’applicazione per iniziare le modifiche.
3. TITOLO DEL RIQUADRO
Nel titolo del riquadro potete impostare il titolo, che sarà anche il nome della pagina che verrà mostrato nel menù della vostra pagina fan.
4. CONTENUTO PAGINA
Ora passiamo al contenuto della vostra pagina.
Chi ha qualche conoscenza dell’HTML può usare questo linguaggio per impostare la pagina, inserendo immagini, testi o collegamenti.
Se non conoscete l’html non preoccupatevi, spiegherò i metodi per inserire immagini e testi.
4.1 INSERIRE UN’IMMAGINE
Per inserire un’immagine copiate questo codice:
<div align="center"><img src=”http://percorsoimmagine.jpg” alt="" /></div>
Le parti scritte in viola sono quelle che possono essere modificate:
center indica che l’immagine verrà posizionata al centro della pagina, può essere sostituita da left (per posizionare l’immagine a sinistra) e da right (per posizionarla a destra).
http://percorsoimmagine.jpg è il percorso dell’immagine che desiderate caricare.
L’immagine deve essere obbligatoriamente online, quindi non inserite percorsi relativi ad immagini sul vostro hard disk, perchè non verranno visualizzate.
Se disponete di un sito web personale potete caricare l’immagine li, altrimenti potete caricarla su siti web che offrono spazio gratuito per le immagini, come ImageShack o TinyPic.
Vi spiegherò come caricarle su TinyPic:
- Dopo aver aperto la pagina del sito web cliccare su Sfoglia, ricerca l’immagine presente sul proprio computer e selezionarla
- Come File Type, lasciate la selezione su Image
- Anche per quanto riguarda Resize lasciate Default, poi cliccate sul tasto UPLOAD NOW
- Si aprirà una schermata nella quale inserire un codice di verifica, inseritelo e cliccate su UPLOAD NOW
- Al termine si aprirà la pagina con l’immagine caricata, selezionate dall’elenco il collegamento presente sotto la scritta Direct Link for Layouts
Esempio:
Prendendo ad esempio l’immagine che ho caricato io il codice finale risulterebbe:
<div align="center"><img src=”http://i55.tinypic.com/16bk11e.png” alt="" /></div>
Se ad esempio invece volessi spostare l’immagine a sinistra il codice finale sarebbe:
<div align="left"><img src=”http://i55.tinypic.com/16bk11e.png” alt="" /></div>
Se l’immagine non dovesse essere visualizzata sostituite i doppi apici del collegamento con un singolo apice.
<div align="left"><img src=’http://i55.tinypic.com/16bk11e.png’ alt="" /></div>
E’ possibile anche inserire un’immagine cliccabile, che riporta al vostro sito.
Per farlo il codice da usare è:
<a href="http://winsoftblog.blogspot.com"><img src=’http://i55.tinypic.com/16bk11e.png’ /></a>
Il primo collegamento è relativo al sito web che volete far aprire, mentre il secondo è l’immagine da visualizzare, in questo modo l’immagine viene posizionata sulla sinistra, per metterla centrata oppure a destra si deve aggiungere div align, e il codice risulterebbe questo:
<div align=”center”><a href="http://winsoftblog.blogspot.com"><img src=’http://i55.tinypic.com/16bk11e.png’ /></a></div>
Per le immagini è tutto, passiamo ora al testo.
4.2 INSERIRE IL TESTO
Per quanto riguarda il testo è molto più semplice.
Se il testo che desiderare inserire è semplice e non richiede nessuna formattazione potete semplicemente inserire il testo che preferite senza aggiungere nessun codice.
Ma un testo scritto in questo modo non è accattivante e spesso risulta anche brutto esteticamente o poco comprensibile.
Altra cosa importante è che scrivendo senza inserire codici il testo rimane su una sola riga fino alla fine dello spazio, e non è possibile decidere quando andare a capo, per farlo dovremo inserire un’interruzione di riga.
Quindi andiamo a vedere come renderlo migliore esteticamente:
- Inserire il grassetto: <strong>Frase in grassetto</strong>
- Inserire il corsivo: <em>Frase in corsivo</em>
- Interruzione di riga: </br>
- Scegliere il colore del testo: <font color="blue">Testo color blu</font>
Per quanto riguarda la scelta del colore ci sono due possibilità, o inserire il nome del colore in inglese, oppure il codice, il nome del colore è limitato, perchè permette di inserire poche varianti di colore, per sapere il codice abbinato ad ogni colore potete consultare questo sito web.
Se invece del nome del colore usate il relativo codice, il testo risulterà simile a questo:<font color="#0000FF">Testo color blu</font>
- Inserire testo sottolineato: <u>Frase da sottolineare</u>
- Inserire testo barrato: <s>Frase da barrare</s>
- Dimensione testo: <font size="8">Testo</font>
E’ possibile anche combinare i vari codici per ottenere delle varianti dei testi, in questo esempio combinerò grassetto, colore e sottolinato:
- <strong><font color="#0000FF"><u>Testo combinato</u></font></strong>
Quando si combinano i codici è sempre consigliabile seguire l’ordine in cui sono stati inseriti all’inizio e invertirlo dopo il testo per chiudere il codice, ad esempio se ho iniziato con <strong>, poi <font color="#0000FF">, poi <u>, quando andrò a chiudere i codici dopo il testo dovrò andare nel senso contrario quindi prima </u>, poi </font> e per finire </strong>.
4.3 COLLEGAMENTI
I collegamenti sono molto simili alle immagini, per quanto riguarda il codice.
<a href="http://winsoftblog.blogspot.com" target="_blank">Collegamento a sito web</a>
Per i collegamenti come potete vedere ci sono 3 parametri modificabili:
- il 1 è il sito web al quale volete inviare il visitatore
- Il 2 è il modo in cui volete inviare il visitatore su quel sito, “_blank” è il modo che consiglio, che apre una nuova pagina senza chiudere la pagina di Facebook, se invece preferite fargli chiudere quella pagina invece di “_blank” dovrete scrivere “_self”.
- Il 3 invece è relativo alla frase che volete visualizzare nella pagina (ad esempio: “Clicca qui per visualizzare il mio sito”, ecc.)
5. IMPOSTARE LA PAGINA COME PRIMA PAGINA DA VISUALIZZARE
Dopo aver creato la pagina molti vorranno anche mostrarla a tutti i visitatori.
Per farlo:
- Accedete alla pagina fan
- Cliccate su Modifica Pagina
- Cliccate su Gestisci autorizzazioni
- Nel campo Prima scheda visualizzata selezionata la nuova pagina creata
- Salvate le modifiche
Da questo momento i visitatori vedranno questa pagina come prima pagina, ricordo che funziona solo con i visitatori, chi ha già cliccato su Mi Piace vedrà sempre la bacheca.
AGGIORNAMENTO: Aggiunte alcune precisazioni per il punto 4.1 ed aggiunto il punto 5.
![The Movie Master - Backup[2]](http://lh5.ggpht.com/-R7CxyeN_FcM/TqL-KGfykwI/AAAAAAAAA04/fWZTkMOBsV4/s1600-h/The%252520Movie%252520Master%252520-%252520Backup%25255B2%25255D%25255B2%25255D.jpg "The Movie Master - Backup[2]")
