Qualche tempo fa ti ho spiegato come creare un Landing Tab personalizzato, utilizzando l’applicazione Static FBML. Tramite essa è possibile creare un Tab con contenuti base come semplici immagini e testi.
Ma se volessi creare un Tab con contenuti avanzati, dinamici, magari recuperati da database? La soluzione è presto detta: devi creare un’Applicazione Facebook ad hoc che renderizzi un Tab da inserire sulle tue Pagine.
Vediamo come fare.
1. Crea l’Applicazione Facebook
Per prima cosa devi creare la tua Applicazione. Ho già spiegato in questo articolo come fare, ma riporto qui le operazioni base:
- Crea una nuova Applicazione, inserendo il nome e accettando le condizioni.
- Alla sezione “Autenticazione”, seleziona “Pagine Facebook”.
- Alla sezione “Profili”, inserisci il titolo che avrà il tuo tab nel campo “Nome Tab”.
- Inserisci nel campo “Scheda URL” il nome della pagina dove svilupperai il tab (ad esempio
tab.php). - Alla sezione “Modelli”, imposta la “Canvas Page URL” con un nome a scelta.
- Nel campo “Canvas Callback URL” inserisci invece l’URL della cartella dove inserirai i file della tua Applicazione (ad esempio
http://www.miosito.it/facebook/). Non scordarti lo slash finale. - Clicca su “Salva le modifiche”.
2. Sviluppa il Tab
Ora che hai impostato tutto, devi sviluppare la tua Applicazione Facebook.
In realtà per i nostri scopi è sufficiente che crei il file http://www.miosito.it/facebook/tab.php. In questo file potrai inserire codice HTML, FBML e FBJS. Tale codice potrà ovviamente essere generato dinamicamente da PHP.
Se sei uno sviluppatore esperto, puoi sbizzarrirti e creare addirittura un minisito all’interno del tab, magari prendendo i dati dal database del tuo blog, integrando i tuoi prodotti o le tue news.
Tieni presente che non avrai bisogno di includere la libreria di Facebook, nè di instanziare l’oggetto Facebook() o tantomeno di chiamare il metodo require_login(), perchè l’utente che visualizza il tuo Tab non dovrà per forza aver aggiunto la tua Applicazione.
3. Installa uno script
Se invece non sai sviluppare un’applicazione da zero, ricordati che poco tempo fa ho stilato una raccolta di script FBJS, alcuni dei quali sono ideali per essere utilizzati all’interno di un Tab. Basta che copi e incolli lo script scelto all’interno del file tab.php e lo vedrai funzionare senza problemi.
4. Come si comporta un Tab
Fai attenzione che i Tab FBML hanno le loro regole e non sono uguali alle Canvas Page:
- La larghezza massima è di 760px, ma tra poco verrà abbassata a 520px.
- Un Tab non riconosce l’utente che la sta visualizzando.
- Un Tab non può far partire automaticamente un Flash.
- Un Tab non può caricare automaticamente un Javascript (che può invece partire al click dell’utente).
- In un Tab non si può inserire un iframe.
- Un Tab non può contenere pubblicità di alcun tipo.
- Gli URL assoluti portano l’utente sulla canvas page dell’applicazione.
- Gli URL relativi, invece, vengono caricati all’interno del Tab tramite AJAX.
5. Utilizza le variabili
Quando un Tab viene caricato, gli vengono passate diverse variabili tramite POST, che possono tornarti utili:
$_POST['fb_sig_profile_user']restituisce l’UID del Profilo o Pagina su cui è installato il Tab.$_POST['fb_sig_in_profile_tab']verifica che la pagina sia effettivamente caricata all’interno del tab e non sia stata richiamata esternamente.$_POST['fb_sig_logged_out_facebook']verifica se l’utente che visualizza il Tab è loggato a Facebook o meno.
Per mostrare un contenuto solo a chi diventa fan, vale il solito codice FBML.
6. Aggiungi il Tab alla tua Pagina
Per aggiungere il Tab alla tua Pagina, fai così:
- Vai al Profilo dell’Applicazione che hai creato.
- Nella colonna di sinistra clicca su “Aggiungi alla mia pagina”.
- Clicca su “Aggiungi alla pagina”, accanto alla Pagina su cui vuoi aggiungere il tab.
- Clicca su “Chiudi”.
- Vai alla Pagina in questione e clicca sul “+” accanto ai tab già esistenti.
- Seleziona il Tab che hai creato.
7. Alcuni esempi
Ecco qualche esempio creato da me:
Aò ma x creare sta cosa…………..ke ci vuole? a me esce scritto:Il tuo account deve essere verificato prima di poter fare questa azione. Per favore, verifica il tuo account inserendo il tuo telefono cellulare o la credit card.
Effettivamente devono aver modificato alcune cose.
io ho creato l’applicazione poi sono andato in applicazioni dopo aver cliccato modifica pagina e mi sono ritrovato la mia applicazione che avevo aggiunto precedentemente alla pagina.
però è l’unica a non avere il link “collega a questa scheda”
Qualcuno di voi sa il motivo? c’è da fare qualche altro passaggio?
Ciao ho seguito la guida qui riportata e quella linkata dagli altri utenti ma evidentemente ho perso per strada qualche passaggio: anche se creo una semplice pagina html con solo testo quando la aggiungo alla mia pagina (seguendo i passaggi che tu hai indicato) non visualizzo nulla. Nessuno ha il codice di una pagina d’esempio per verificare se ho sbagliato qualcosa?
scusa ma non lo visualizza!!! richiamo la variabile $invitecontent
P.S: nel content manca questo codice php:
Ciao, ottime le tue guide su facebook, ma ho un problema che non riesco a risolvere: ho creato due landing tab, una tramite static FBML ed una seguendo la tua guida. Le pagine sono identiche, con lo stesso codice, ed all’interno è presente il riquadro per invitare gli amici a diventare fun tramite il tag fb:request-form e fb:multi-friend-selector.
A questo punto se sono nello static FBML e scelgo un amico e poi faccio invia, mi carica tutto ma mi esce poi questa pagina di errore :”http://www.facebook.com/common/invalid_request.php#”.
Se sono nell tab della mia applicazione, facendo le stesse operazioni si apre solamente la pop up con scritto caricamento e poi non fa più nulla.
(se invece entro nella pagina dell’applicazione funziona tutto regolarmente)
metto il codice presente nell’applicazione:
[code]
<?php
$inviteContent = htmlentities('Vieni a visitare la pagina Facebook di nome pagina!');
$inviteContent .= htmlentities('');
?>
<fb:request-form
action="#"
method="POST"
invite="TRUE"
type="nome pagine"
content=" ">
[/code]
Nel tab static FBML ovviamente non ho messo alcun codice php.
Riesci a vedere un qualche motivo di errore??? ti ringrazio
Un modo per inserire un iframe c’è…
http://www.hyperarts.com/blog/adding-iframes-to-facebook-application-2010-static-fbml/ Anche questo come flash non parte automaticamente ma dopo un click
La guida spiega come inserire l’IFRAME su un’app Facebook, ma non dentro un tab. Infatti inizia così: “Although they are no longer supported in Static FBML tabs, iFrames can still be implemented on application Canvas Pages.”
Se utilizzi quel codice nel file php che imposti come tab di un applicazione, poi installi l’ applicazione in una fan page e attivi il tab vedrai che ancora funziona.
Uhm.. dici? Proverò, grazie
Cacchio, hai ragione!!! Grande!
Ciao scusa ma purtroppo nn ho capito bene alcune cose e spero che puoi aiutarmi:
1) ho inserito il tuo codice presente nella raccolta degli scripts per facebook quello relativo al forms AJAX Contact Form nel riquadro static fbml della mia pagina su facebook e funziona perfettamente l’ho anche copiato sul file tab.php e caricando il file tab.php sul mio server funziona anche li’ perfettamente
2)Quello che invece nn ho capito bene è perchè se inserisco del codice html o php sulla mia pagina di facebook nel riquadro static fbml nn funziona invece un bel niente? Per esempio ho inserito del codice html di una pagina mia che avevo creato e uplodata sul mio server es.www.miosito.com/download.html dove funziona perfettamente,inserisco lo stesso codice nel riquadro static fbml e invece nn succede un bel niente perchè? forse il riquadro fbml nn accetta codice html o php? puoi aiutarmi per favore sto impazzendo grazie anticipatamente.
Grazie all’applicazione Static FBML, è possibile inserire codice HTML e FBML. Per creare invece un tab più avanzato con codice PHP devi seguire i passi spiegati in questo articolo stesso.
Tieni poi conto che nei Tab Facebook filtra alcuni tag sia HTML che FBML. Inoltre molti Javascript e FBJS non funzionano.