FB.ui() giving error in Safari with asynchronous request when user is not already logged in

Question

I'm trying to get have users be able to post to their Facebook walls on my external site.

I've encountered a problem in Safari. If the user isn't logged in, i.e. they have not gone through the flow that calls FB.login(), I get the following JS error when calling FB.ui():

TypeError: 'undefined' is not an object (evaluating 'b.fbCallID=a.id')

However, if they are logged in, the dialog appears just fine.

FB.ui() is called in a callback function -- I'm retrieving a unique url from my server, and then calling FB.ui(). If I call FB.ui() directly, it works fine, but not when it's asynchronous.

Here's the code:

        retrieveUrl(param1, param2, function(result) {
            FB.ui({ method:  'feed',
                    description: 'My Description',
                    display: 'dialog',
                    link:    result.uniqueUrl,
                    picture: 'http://foo.com/bar.jpg'
            }, function(response) {
                if (response && response.post_id) {
                    //Posted message
                } else {
                    //Not posted message
                }
            });
        });

This works in other browsers, regardless of logged in state or not.

Answer 1

FB.login or FB.ui methods must be called on a user initiated action (click) in Safari for new window/popup/iframe to be rendered by FB.UIServer.

If you try calling these methods on a network callback event it will be blocked and the exception you described will occur:

TypeError: 'undefined' is not an object (evaluating 'b.fbCallID=a.id')

Can you retrieve the unique URL before the user interacts with the page and then present the feed dialog when they click on a button?