Question

My app opens a share dialog when the user submits a form. The dialog is called on document ready (jQuery) when the page refreshes after the submit.

The dialog box does open, but then closes a couple of second later. This pretty much renders the dialog useless. If you try and hit ‘share’ before it closes then it does work, but obviously most users aren’t going to try and race it.

The app can be found here: https://apps.facebook.com/topmoviesseen/

I have noticed that it can be tempremental, with the odd time seeing it work perfectly. Other times the dialog disappears only to reappear 4 or 5 seconds later. I would hazard a guess that there is some sort of JS affecting either the z-index or visibility of the box, but I cannot find anything.

Any help is hugely appreciated.

Code used to call dialog:

     $(document).ready(function(){
        // calling the API ...
        var obj = {
          method: 'feed',
          display: 'iframe',
          access_token: 'example',
          name: 'Top 100 Movies Seen',
          link: 'https://apps.facebook.com/topmoviesseen/',
          picture: 'https://mgnewmedia.com/topmovies/assets/images/for_stream.png',
          description: 'I have seen 62 of the top 100 movies of all time.  How many have you seen?',
          caption: 'Done any better?',
          message: '62 out of 100 isn\'t bad.'
        };

        FB.ui(obj, callback);
    });

Answer 1

you have to make sure your FB.ui is called after your FB.init is complete, so setting it in the window.fbAsycncInit listener will help:

window.fbAsyncInit = function() { 
    FB.ui(...) 
};