How to close a facebook SDK dialog opened with FB.ui()?

Question

I'm successfully displaying an invite friend dialog (code shown below). When user clicks skip the iframe/dialog shows a new page. However from this point I can't find a way how to close the iframe/dialog. FB.ui doesn't return any object, there doesn't seem to be a Javascript SDK method and traversing and manipulating with the DOM will be brittle to any FB code changes.

Any ideas?

function popupInviteForm(actionUrl) {
    var fbmlString = '<fb:fbml>' +
              '   <fb:request-form type="POST" content="Play against me in game?" action="' + actionUrl + '" method="post" >' +
              '       <fb:multi-friend-selector target="_self" exclude_ids="" max="20" cols="4" rows="3" showborder="false" actiontext="Invite friends!" />' +
              '   </fb:request-form>' +
              '</fb:fbml>';

    FB.ui({
        method: 'fbml.dialog',
        fbml: fbmlString,
        display: 'dialog',
        size: {width:640,height:480}, width:640, height:480
    });

    $(".FB_UI_Dialog").css('width', $(window).width()*0.8);
}

(Note: I have posted the same question on the facebook forum with no response. I will update both, should there be an answer on either.)

The Javascript code was adapted from a stack overflow answer.

Solution 1

I have same trouble. Second day looking for a solution. And just found one way: for closing active FB dialog you should perform followed code in parent window where FB JS is available and where FB.ui was called:

FB.Dialog.remove(FB.Dialog._active);

So, if you want your invite dialog auto closes and don't redirects to any other page, use these steps:

1) Set target attr of and as "_self":

target="_self"

2) create some callback url/page on your site, for example https://mysite/close_dialog.html

3) Set action attr of as just created url:

action="http://mysite/close_dialog.html"

4) In your close_dialog.html put followed JS:

    <script type="text/javascript">
        if (document.location.protocol == 'https:') {
            document.location = 'http://mysite/close_dialog.html';
        } else {
            top.window.FB.Dialog.remove(top.window.FB.Dialog._active);
        };
    </script>

UPDATE:

5) There is one issue else in this way: FB iframe loaded by https, but if request-form 'action' attr uses 'http' - user will get browser warning. But if request-form 'action' has 'https' - iframe js cant access to parent loaded by 'http'. So, its the reason why you should use action by 'https'

Hope this helps

If you has better solution or you can improve this way - please let all know this, Thanks for any comments

Solution 2

That doesn't work (at least not for me).

What I did was simply call the javascript window.close(); function instead of top.window.FB.Dialog.remove(top.window.FB.Dialog._active); and it works.

<script type="text/javascript">
    if (document.location.protocol == 'https:') {
        document.location = 'http://mysite/close_dialog.html';
    } else {
        //alert('some message');
        window.close();
    };
</script>

Solution 3

The FB.ui provides an option for a callback function which will be executed after the FB.ui is completed.

FB.ui(
  {
    method: '..........',
    ..................
  },
  function(response) {
    //write your code here
  }
);

Will this help to solve your problem?

Comments

[FR6]

I got the message "The method FB.Dialog.remove is not officially supported by Facebook and access to it will soon be removed." on the console when I used FB.Dialog.remove. So It's not recommended to use it.

[andyrandy]

he does not need a callback, he wants to close the dialog programmatically