BigThink

Come creare Dialog Box nelle tue Applicazioni Facebook IFrame

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:

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:

var dialog = {
    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 display in '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:

var dialog = FB.Dialog.create({
    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 content permette di settare il testo per la Dialog.
  • CloseIcon e onClose permettono 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 dialog e 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.

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

Come creare un Tab IFRAME per la tua Pagina Facebook

Come creare un Tab IFRAME per la tua Pagina Facebook

FBML è morto e così anche l'applicazione Static FBML che permetteva di aggiungere un Tab personalizzato alle tue Pagine. Visto che in molti continuano a chiedermi come fare ora a creare un Tab con il nuovo metodo IFRAME, in questo articolo te lo spiegherò. 1. Crea la pagina HTML I nuovi Tab sono delle vere e ...
Una Classe PHP per Applicazioni Facebook IFrame con Graph API

Una Classe PHP per Applicazioni Facebook IFrame con Graph API

Oggi voglio farti un regalo che spero apprezzerai: ho deciso di condividere la Classe PHP che uso per sviluppare le mie Applicazioni Facebook. Grazie ad essa potrai creare un'App in pochissimo tempo, perchè contiene già tutta la struttura necessaria per il login e le chiamate API. La Classe utilizza le nuove Graph API ed è ...
Like Battle: una sfida all'ultimo Like!

Like Battle: una sfida all’ultimo Like!

Forse ricorderai la campagna Facebook di Terranova lanciata alcuni mesi fa: ogni giorno veniva pubblicata la foto di un prodotto sulla Bacheca e gli utenti potevano cliccare su "Mi piace". Per ogni Like il prezzo scendeva di 0,05 euro e il giorno dopo lo si poteva trovare a prezzo scontato sul sito. Il video ...
10 Applicazioni Facebook Open Source in PHP

10 Applicazioni Facebook Open Source in PHP

Imparare a sviluppare un'Applicazione Facebook può non essere molto facile, nonostante le numerose guide che ho scritto o che trovate in rete. Poter partire da un codice già scritto, modificarlo e capire come funziona è sempre la cosa migliore per imparare. Provare direttamente sul campo! Per questo ho deciso di raccogliere in questo post tutti ...
Il mio blog WordPress è stato hackerato!

Il mio blog WordPress è stato hackerato!

Ebbene sì, ieri ho scoperto che BigThink è stato oggetto di un attacco hacker andato a buon fine. Qualche settimana fa un amico mi ha avvisato che sulle pagine del mio blog vedeva un bannerone che pubblicizzava un sito di spam. Subito sono corso a controllare, ma sembrava tutto normale. Ho chiesto in giro ...

28 Commenti

  1. fraymas

    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!

    19 novembre 2010, 13:04
  2. Mayukh

    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

    6 ottobre 2010, 10:28
  3. 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

    1 ottobre 2010, 11:25
    • 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:comments

      1 ottobre 2010, 11:53
      • mayukh

        could u give me an example to get started please

        1 ottobre 2010, 14:10
  4. 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

    23 giugno 2010, 15:38
    • Ciao Stefano, ti ringrazio. Ti invito però a scrivere sul Forum per gli argomenti non collegati al post, per non andare Off Topic. Grazie ;)

      23 giugno 2010, 15:52
      • ok =D ma comunque ti interessa? potresti farne un articolo =D

        23 giugno 2010, 15:55
        • Grazie Stefano, ma sinceramente non ne vedo molto l’utilità ^^

          23 giugno 2010, 19:05
      • ho postato nel forum =D

        23 giugno 2010, 16:28
  5. 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?

    22 giugno 2010, 13:58
    • Giulio

      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!!

      22 giugno 2010, 15:54
      • 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.

        22 giugno 2010, 16:40
        • Giulio

          Ok…grazie!!

          22 giugno 2010, 19:24
  6. Ah ok, sei interessato nello specifico alla Dialog con il “mi piace”. Ecco il codice, che funziona solo sulle app FBML:

    <script>
    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>
    21 giugno 2010, 20:33
    • Giulio

      Una volta applicato nel riquadro FBML e salvate le modifiche…apro la scheda e non mi da nessun risultato!! Come mai?

      22 giugno 2010, 10:50
      • 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.

        22 giugno 2010, 12:27
        • Giulio

          Quindi potrei usare XFBML o FBJS se ho capito bene?

          22 giugno 2010, 12:52
          • Giulio

            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!!

            22 giugno 2010, 13:15
  7. Giulio

    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!

    21 giugno 2010, 16:36
    • 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.

      21 giugno 2010, 17:39
      • Giulio

        Si l’avevo intuito!! Quello che intendevo è un suggerimento per quanto riguarda il sorgente di quell’esempio!!

        21 giugno 2010, 18:40
        • Cioè? Qual è il problema? Copi e incolli :P

          21 giugno 2010, 18:55
          • Giulio

            Si…ma qual’è il collegamento per mettere “mi piace”…cioè per farlo iscrivere alla pagina?

            21 giugno 2010, 19:57

4 Citazioni