Uno degli aspetti positivi nello sviluppare Applicazioni Facebook FBML è che puoi usare FBJS, che mette a disposizione alcuni oggetti molto comodi come le Dialog. Grazie ad esse possiamo far comparire i classici popup in stile Facebook, con una riga di codice.
Passando, però, a sviluppare Applicazioni IFRAME — e pare che Facebook stia spingendo gli sviluppatori in questa direzione — FBJS non è più utilizzabile e risulta così più difficile creare dei messaggi popup.
Vediamo insieme quali sono le alternative.
1. Usa jQuery
La prima soluzione è semplice: visto che nelle App IFRAME possiamo utilizzare javascript esterni, importiamo una libreria che risolva il problema.
Esistono diversi plugin per jQuery che simulano i popup modali, in stile Facebook. Ecco alcune raccolte:
- 15+ jQuery Popup Modal Dialog Plugins and Tutorials
- 20+ ways to create javascript modal windows and dialog boxes
Un’ottima soluzione è anche quella di utilizzare le Dialog ufficiali della jQuery UI.
2. Usa le API ufficiali
Andando a spulciare la documentazione della nuova Javascript SDK, scopriamo che effettivamente esiste un modo di creare una Dialog ed è il metodo FB.ui. Studiamo l’esempio:
method: 'fbml.dialog',
display: 'dialog',
fbml: '<fb:header icon="false" decoration="add_border">Hello World!</fb:header><fb:profile-pic uid="5526183"></fb:profile-pic>',
width: 800,
height: 100
};
FB.ui(dialog);
- Con questo codice possiamo così aprire un popup che avrà il contenuto specificato nell’attributo
fbml. Attenzione però: da vari test che ho fatto, sembrerebbe che siano molti i tag FBML che non vengono letti. Uno su tutti: il Like Box. - Per un qualche strano bug, inoltre, pare che prenda un po’ le dimensioni che gli pare, ignorando quelle settate.
- Infine, modificando l’attributo
displayin'popup', forzerai la Dialog ad aprirsi in una nuova finestra.
3. Usa le API non ufficiali
Studiando il codice sorgente della nuova Javascript SDK, ho però trovato un oggetto che non è presente nella documentazione ufficiale. Si tratta di FB.Dialog e permette una maggior flessibilità nella creazione delle finestre, bypassando la FB.ui.
Ecco come utilizzarla:
content: 'prova',
closeIcon: true,
onClose: function() {
FB.Dialog.remove(dialog);
},
visible: true
});
dialog.style.width='100px';
dialog.style.height='100px';
- Il metodo
create, restituisce il riferimento al div che contiene il popup. - L’attributo
contentpermette di settare il testo per la Dialog. CloseIconeonClosepermettono di settare rispettivamente se far comparire la X di chiusura del popup e quale evento assegnargli. In questo caso, cliccando sulla X si chiude il popup.- L’attributo
visible, invece, rende visibile la Dialog. - Le misure possiamo settarle semplicemente prendendo l’oggetto
dialoge impostando gli stili.
La differenza principale tra questo script ed il precedente è che nell’altro viene aperta una Dialog con al suo interno un IFRAME che renderizza il codice FBML (e neanche tutto). In questo caso, invece, il contenuto viene inserito direttamente nel div, senza usare alcun IFRAME.
Questo comporta due cose:
- Possiamo inserire il Like Box in versione IFRAME (mentre nel primo caso questo tag non era accettato).
- Possiamo stilare gli oggetti all’interno della dialog, con i CSS della pagina (cosa non possibile nel primo caso).
Quale metodo usare dipende dalle vostre esigenze. Personalmente preferisco quest ultimo, molto più flessibile.
Ciao! Ho un problema con queste tue dialog.
Se apro la mia applicazione in IE l’ombra che appare sotto la dialog è rotta. C’è solo in alto e in basso, ma ai lati no. Ne sai qualcosa? A te funziona?
Un’altra cosa. Vorrei che l’intestazione della Dialog fosse sempre azzurrina come tutte l Dialog di FB. E’ possibile? Come?
Grazie mille!
Hi Ghido
i dont mean to bother you but i tried fb:comments and it does not work the same way as in the page (http://www.facebook.com/?ref=home#!/Fnac?ref=ts) please i need help regarding this
mayukh
HI Ghid i just saw the comment you put for the dialog with like button,it works perfectly for application but i cant seem to get it to work in static FBML(fan page) like in the following page(http://www.facebook.com/?ref=home#!/Fnac?ref=ts) could you help me out please im a noob
Hi Mayukh, the code does not work on Static FBML, because it does not support iframes. The only way to put a Like Button in Static FBML is using
fb:commentscould u give me an example to get started please
non mi lascia scrivere il codice… ho provato con … comunque te puoi cancellarli qui commenti…io no.. se ti interessa fammi sapere
P.S. Ti stimo! ho imparato molto da te
Ciao Stefano, ti ringrazio. Ti invito però a scrivere sul Forum per gli argomenti non collegati al post, per non andare Off Topic. Grazie
ok =D ma comunque ti interessa? potresti farne un articolo =D
Grazie Stefano, ma sinceramente non ne vedo molto l’utilità ^^
ho postato nel forum =D
Allora… Intanto dimmi tu di cos’hai bisogno? Perchè devi far apparire la Dialog? In che contesto? Dove? Nel tab di una pagina fan o in un’applicazione Facebook da te sviluppata?
Allora…devo far apparire la Dialog nel tab della mia pagina!! La scheda deve essere la prima ad essere visualizzata quando un utente, non iscritto, visita la pagina! Non so se sono stato chiaro!!
Allora, quello che vuoi fare è impossibile perchè:
1) In un tab non puoi far eseguire javascript al caricamento. Possono essere eseguiti solo a seguito del click di un utente. Quindi puoi far aprire una dialog dopo che l’utente ha cliccato su un pulsante o un link che la fa aprire.
2) Come ho detto, il pulsante “mi piace” non puoi inserirlo in alcun modo all’interno del tab.
Ok…grazie!!
Ah ok, sei interessato nello specifico alla Dialog con il “mi piace”. Ecco il codice, che funziona solo sulle app FBML:
var dialog = new Dialog().showChoice('Diventa Fan!', content);
</script>
<fb:js-string var="content">
<p><strong>Clicca su "Mi piace" e poi su "OK":</strong></p>
<fb:iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=ID_DELLA_PAGINA&connections=0&stream=0" style="border: none; width: 300px; height: 80px;" />
</fb:js-string>
Una volta applicato nel riquadro FBML e salvate le modifiche…apro la scheda e non mi da nessun risultato!! Come mai?
Non devi inserirlo nel riquadro FBML infatti….
Come ho spiegato, questo codice funziona sulle Applicazioni FBML.
“Applicazione FBML” non vuol dire “riquadro FBML” o applicazione “Static FBML”.
Nel riquadro FBML che dici tu puoi in effetti inserire la Dialog, ma non l’iframe. Quindi quel codice non funziona nel riquadro.
Quindi potrei usare XFBML o FBJS se ho capito bene?
Cioè….non ho capito dove lo devo inserire quel codice che mi hai dato?? E come?? Scusa le troppe domande ma non ho capito cosa fare!!
Ciao!! Vorrei un’informazione in riguardo a questo argomento!! Ma per ottenere il risultato che è mostrato in questa immagine http://www.bigthink.it/wp-content/uploads/2010/06/fb-dialog-box.jpg , in testa al vostro articolo, cosa bisogna fare?? Grazie in anticipo!
In realtà l’immagine di questo articolo mostra delle Dialog box create in un’Applicazione FBML, tramite l’oggetto Dialog.
Vedi tutti gli esempi qui.
Si l’avevo intuito!! Quello che intendevo è un suggerimento per quanto riguarda il sorgente di quell’esempio!!
Cioè? Qual è il problema? Copi e incolli
Si…ma qual’è il collegamento per mettere “mi piace”…cioè per farlo iscrivere alla pagina?