15 APPLICAZIONI FBML - PAGINA DI BENVENUTO

Aggiornamento post

Ragazzi, si avvisa che l'applicazione FBML su Facebook non è più utilizzabile da parecchio tempo.

Chi aveva un FBML installato precedentemente lo puo continuare ad utilizzare, ma NON E' POSSIBILE AGGIUNGERE SCHEDE NUOVE.

Per risolvere il problema vi rimando a QUESTA guida.

E' molto di moda di questi tempi la pagina di benvenuto o landing page che dir si voglia.




Si tratta di una scheda FBML da applicare nella propria pagina Facebook
FBML è una applicazione del social network che utilizza il linguaggio web HTML, consentendo di inserire così contenuti personali e personalizzabili per dare un pò di colore alla pagina.

Ho preparato un "template" ossia una paginetta gia pronta da inserire, per chi non conosce l'HTML e si trova in difficoltà ad inserire le proprie foto e testi.
Il codice che ho elaborato è preso da un ottimo sito di web design in lingua inglese: WEB DESIGN TUTORIALS



Prima di passare al codice da inserire facciamo un passo indietro e vediamo come si aggiunge l'applicazione FBML alla vostra pagina :
Portatevi su questa pagina
Sotto alla foto (il punto di domanda in questo caso) cliccate su "aggiungi alla mia pagina", si aprirà un menu con il vostro spazio personale, cliccateci sopra.
Portatevi ora sulla vostra pagina personale, cliccate modifica pagina (sotto all'immagine avatar) vi troverete di fronte a questa schermata.

Cliccate come da foto su "applicazioni", l'ultima della lista è la fbml appena creata

Cliccate la terza opzione "collega a questa scheda", vi troverete la voce fbml accanto alle solite voci di pagina (bacheca, info, foto, discussioni)

Ora che abbiamo l'applicazione installata dobbiamo modificarla

Portatevi su "modifica pagina" e poi su "applicazioni" come prima

selezionate per FBML 1 la voce "vai all'applicazione"

Qui modificate il titolo che di default è FBML (metteteci ciò che volete, tipo welcome o benvenuti etc etc)

Il secondo riquadro è quello che ospiterà il codice html.

copiate ed incollate il codice da voi creato o se preferite potete utilizzare il mio, personalizzandolo con le vostre foto, loghi e testi.

Ecco come si presenta la landing page finita

E' una paginetta molto semplice, con una immagine di sfondo, qualche logo e uno spazio scorrevole per inserire quattro immagini con la possibilità di collegarle a pagine web (tipo il vostro sito o blog o pagine che a voi interessano)

Veniamo al codice

<<INIZIO CODICE>>

inizia a copiare da qui sotto :

<div style="width:520px; padding:0px; margin:0px auto; background:url(http://www.graphicmania.net/wp-content/uploads/Lifestream_Wallpaper_Black_by_Assassin00.jpg) no-repeat left top; font-family:Tahoma; font-size:11px; color:#000000; text-align:left">

<div style="padding:10px 5px 10px 10px; color: #FC0;">

<table cellpadding="0" cellspacing="0" border="0">

        <tr>

            <td width="68">&nbsp;</td>

            

            <td width="326"  style="font-family:Tahoma; font-size:10px;"><div style="font-size:20px; font-weight:bold; color: #3C3;"><span style="padding:10px 5px 10px 10px; font-size: 10px;"><span style="font-size:18px; text-decoration:blink padding:26px 0 28px 0; color: #06F;"><span style="padding:10px 5px 10px 10px; color: #FC0; font-size: medium;"><span style="font-size:15px; padding:22px 0 24px 0; color: #06f;"><img src="http://img84.imageshack.us/img84/8779/logoface.jpg" width="200" height="88" align="left" /></span></span></span></span></div></td>

            

      <td width="28">&nbsp;</td>

            <td width="29">&nbsp;</td>

            <td width="29">&nbsp;</td>

            <td>&nbsp;</td>

        </tr>

  </table>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

</div>

<div style="font-size:15px; padding-left:13px; color: #06F;">

  <p style="padding:10px 5px 10px 10px; font-size: 10px;"><span style="font-size:18px; text-decoration:blink padding:26px 0 28px 0; color: #06F;"><span style="padding:10px 5px 10px 10px; color: #FC0; font-size: medium;"><span style="font-size:15px; padding:22px 0 24px 0; color: #06f;"><MARQUEE>non scordare di cliccare mi piace!!!</MARQUEE></span></span></span></p>

</div>

<div style="font-size:16px; padding:0px 0 0px 0; color: #903">

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p><img src="http://img827.imageshack.us/img827/6154/fotobqc.jpg" width="200" height="84" />qui sotto puoi inserire quattro immagini a scelta ed aggiungerci dei collegamenti ad altre pagine web</p>

</div>

<div style="width:500px; overflow: auto">

<div style="padding:0px 0 14px 0">

<table cellpadding="10" cellspacing="" border="0">

<tr>

<td width="210"><a href="http://odioilmiopc.blogspot.com/"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcReNBMNWgqfZz4K-vJ8qZNt0sDNnCSeN6jb7-Q8QRNCdT3fEJY9" width="210" height="115" alt="" /></a></td>

<td width="10"><img src="images/spacer.gif" width="10" height="10" alt="" /></td>

<td width="210"><a href="http://odioilmiopc.blogspot.com/"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcROQs1Ik_TSOKon2vaPs6wBQZi-J3z5XqHdORqRGIaUclK0KCuV" width="210" height="115" alt="" /></a></td>

<td width="10"><img src="images/spacer.gif" width="10" height="10" alt="" /></td>

<td width="210"><a href="http://odioilmiopc.blogspot.com/"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcT1JEkf_P5RBqNX0hDnSKdZ401e5DW4gD4YhO90XEKk-xKKOKIwO0meNAh4" width="210" height="115" alt="" /></a></td>

<td width="10"><img src="images/spacer.gif" width="10" height="10" alt="" /></td>

<td width="210"><a href="http://odioilmiopc.blogspot.com/"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcS9JZjeo8afZRavd9ENZxrKhyYzl2892As8I-Fk6JyFiZsRY1LQoT0llDkB" width="210" height="115" alt="" /></a></td>

 </tr>

</table>

        

</div>

</div>

<div style="padding:30px 20px 30px 18px;">

Spazio per inserire testo Spazio per inserire testoSpazio per inserire testo Spazio per inserire testo Spazio per inserire testo Spazio per inserire testoSpazio per inserire testo Spazio per inserire testo Spazio per inserire testo</div>    

<div style="padding:8px 0; font-size:10px" align="center">OdioilmioPc - 2010<a href="#" style="font-family:Tahoma; font-size:10px; color:#000000; text-decoration:underline"></a></div>

finisci di copiare qui sopra

<<FINE CODICE>>

Ho evidenziato con colori le parti che dovrete personalizzare rispettivamente :

IN ROSSO : le immagini e i loghi

IN BLU : le parti di testo

IN ARANCIO : i link ai siti web

Vi ricordo che le immagini che inserirete dovranno essere caricate su un sito host (io uso IMAGESHACK è gratis e molto facile)

In due parole caricate la vostra immagine su imageshack, una volta terminata la procedura (pochi secondi) copiate l'indirizzo web ottenuto ed incollatelo sul codice qui sopra, al posto degli indirizzi evidenziati in rosso.

Cambiate i testi negli spazi evidenziati blu con le vostre frasi.

Sostituite i collegamenti in arancio con i vostri preferiti.

A lavoro ultimato copiate ed incollate l'intero codice nel riquadro grande FBML, salvate l'applicazione.

andate sulla vostra pagina facebook, cliccate la scheda FBML e controllate il risultato.

Spero che sia abbastanza chiaro, se vi piace e volete utilizzare il mio template che è assolutamente gratuito, mettete un mi piace passate dalla fan page del blog e parlatene ai vostri amici!!

Grazie

Luca

Pin It