8 FBML NON FUNZIONA PIU'??...ecco come sostituirlo

Dall'undici Marzo 2011 l'applicazione static fbml ha cessato di esistere, non sarà più possibile aggiungere schede fbml alla vostra pagina ma quelle precedentemente create continueranno a funzionare.
Le sostituiscono i nuovi TAB iFRAME
In questo articolo vedremo di cosa si tratta ma soprattutto come possiamo creare una facile pagina di benvenuto con questo nuovo metodo, prendendo come esempio una landing page semplice che ho creato.

PASSO 1 - CREARE LA PAGINA DI BENVENUTO -

Ecco la pagina che ho creato e che inserirò nella applicazione iFrame di Facebook

E' una semplice pagina di benvenuto, con un menù tipico dei siti web, i due famosi tasti "condividi" e "mi piace" ed una immagine con collegamento ipertestuale al centro.

Posto qui sotto il codice dell'intera pagina per chi fosse interessato ad utilizzarla, personalizzandola con sfondo, link e foto proprie.

E' una pagina davvero basilare, con iframe però potrete davvero sbizzarrirvi con video, oggetti flash, animazioni e quant'altro.

<style type="text/css">

a:link {

color: #000;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #000;

}

a:hover {

text-decoration: none;

color: #939;

}

a:active {

text-decoration: none;

}

</style>

<div style="width:520px; padding:0px; margin:0px auto; background:url(http://img822.imageshack.us/img822/5779/welcomeiframe.jpg) no-repeat left top; font-family:Tahoma; font-size:11px; color:#FFF; text-align:left">

<table width="520" height="171" border="0" id="100">

  <tr>

    <td width="100" height="65">&nbsp;</td>

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

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

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

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

  </tr>

  <tr>

    <td width="100" height="100" align="center"><a href="http://www.facebook.com/pages/ODIO-IL-MIO-PC/156951767696237?sk=app_178082205576385"target="_new">home</a></td>

    <td align="center"><a href="http://www.facebook.com/luca.lipartiti"target="_new">l'autore</a></td>

    <td width="100" align="center"><a href="http://www.facebook.com/media/set/fbx/?set=pu.156951767696237""target="_new">foto</a></td>

    <td align="center"><a href="http://www.facebook.com/pages/ODIO-IL-MIO-PC/156951767696237?sk=notes""target="_new">note</a></td>

    <td align="center"><a href="http://www.facebook.com/pages/ODIO-IL-MIO-PC/156951767696237?sk=wall""target="_new">bacheca</a></td>

  </tr>

  

  </table>

  <p><div style= "text-align: center;width:520px; padding:0px"><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Condividi</a>

    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>

  </p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <div style= "text-align: center;width:520px; height:400px; padding:0px"><a href="http://odioilmiopc.blogspot.com/"><img src="http://img839.imageshack.us/img839/476/odioviola.png" width="520" height="400"></a></div>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp;</p>

  <p>&nbsp; </p>

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

    <p><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fodioilmiopc.blogspot.com%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>&nbsp;</p>

</div>

</div>

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

<div align="center" class="odio" style="padding:8px 0; font-size:13px"> <a href="http://odioilmiopc.blogspot.com/">OdioilmioPc - 2010</a></div>

E' sufficiente il blocco note oppure un editor qualunque HTML per generare la pagina o se volete utilizzare il mio codice lo dovete solo prelevare ed incollare per poi salvarlo.

Nel codice sono evidenziati in rosso i collegamenti da personalizzare che sono dall'alto verso il basso :

- L'immagine di sfondo della pagina

- I cinque collegamenti del menu:  "home", "l'autore" (il vs profilo face personale), "foto" (le foto della vs pagina face), "note" e "bacheca".

- L'immagine al centro con il suo collegamento ipertestuale

- il "like button" di facebook, sostituite il mio codice col vostro che potete creare qui

Una volta creata la pagina salvatela (io l'ho chiamata benvenuti) con estensione php e piazzatela  su un sito host, nel mio caso Altervista.

La pagina caricata avrà un indirizzo del genere :

http://iltuositohost.it/benvenuti.php

PASSO 2 - CREARE L'IFRAME -

Passiamo ora a Facebook, andate sulla pagina degli sviluppatori

Cliccate su "set up new app" in alto a destra

Digitate il nome della vostra applicazione, "benvenuti" nel mio caso", accettate i termini di utilizzo e proseguite.

Compilate i campi segnalati in rosso nella immagine sopra e portatevi sulla seconda scheda in alto a sinistra "website"

Qui dovete solo inserire l'indirizzo web del sito che ospita la vostra pagina con lo slash finale.NON dimenticate lo slash, è importante

Andate sulla scheda "Facebook integration"

Compilate i due campi segnalati sopra :

Canvas url = l'indirizzo del vostro sito host con lo slash finale (come prima)

Scheda url = l'indirizzo completo della vostra pagina (nel mio caso benvenuti)

Salvate le modifiche e siete a posto.

PASSO 3 - AGGIUNGERE LA SCHEDA IFRAME ALLA VOSTRA FANPAGE

Dopo che avrete salvato le impostazioni precedenti arriverete su questa scheda

Cliccate su "application profile page", cercate sulla sinistra (sotto l'immagine della applicazione) la voce "aggiungi alla mia pagina.

Si aprirà l'elenco di tutte le pagine di cui siete admin, scegliete la pagina cliccate aggiungi e chiudete.

Andate sulla vostra pagina Facebook e troverete tra le schede, quella appena creata e, se tutto è andato liscio cliccandoci vedrete la pagina di benvenuto che avete creato.

Per far si che chi visita la vostra pagina veda per prima il benvenuto cliccate su "modifica pagina" - "gestisci autorizzazioni" - "prima scheda visualizzata" e selezionate la vostra nuova scheda iframe.Salvate e chiudete.

Precisazione finale

Di default Facebook vi lascerà creare una sola applicazione (quindi una sola pagina di benvenuto).Per poterne creare di più dovrete verificare il vostro account tramite sms (ma almeno a me non ha funzionato) o tramite n° di carta di credito, questo funziona sicuro.

Se vi accontentate di una sola applicazione non dovrete verificare l'account.

Se dovete fare la verifica recatevi qui

E' tutto ragazzi....buon lavoro!!!

Luca

Pin It