Dialog is not defined

Question

I'm building my first Facebook Connect application, and am running into an odd problem. This example code:

<script type="text/javascript" charset="utf-8">
  FB.init("{{ FACEBOOK_API_KEY }}", "{% url xd_receiver %}");
  FB.ensureInit(function() {
    var invite_dialog;
    function showInviteDialog() {
      invite_dialog = new Dialog(Dialog.DIALOG_POP).showMessage('Share with Friends', invite_friends_selector, null, null);
    }
    function hideInviteDialog() {
      invite_dialog.hide();
    }
    showInviteDialog();
  });
</script>

keeps throwing the error:

Dialog is not defined

Is Dialog available in Facebook connect/XFBML applications? Do I need to do anything special in order to use it?

Thanks in advance!

Answer 1

The Dialog you're trying to use is a construct of Facebook Javascript. Unfortunately, FBJS is only available within the Facebook domain inside an FBML page.

The plus side (and it's a big plus) is that if you're using Facebook Connect, you're either inside an iframe or on your own site. You can use real Javascript instead of the limited, watered-down FBJS, including things like MooTools/Jquery/Prototype, or any external JS you desire. You can make your own dialogs!

(Note: If you want dialog boxes that look exactly like the FBJS ones, just google around a bit for Facebook dialog boxes... there's lots out there).