Facebook javascript login with publish_actions dialogue not working

Question

I'm building a simple app where users can login via Facebook and write a review for a product. When I do the initial login with the publish_actions extended permission scope the login dialogue freezes after the basic_info step.

Here's a more detailed explanation of what's happening:

• A 'Login with Facebook' button is displayed with the publish_actions scope.
• Clicking the button opens the Facebook login screen (if not logged in).
• After logging in (or if already logged in) the basic_info permission screen appears, stating the 'APP will receive the following info: your public profile and friend list.'
• Clicking 'Okay' causes the 'Okay' button to become disabled but does not proceed to the extended permissions dialogue.

If I close the Facebook login window and click the Login button again I'm presented with the extended permissions dialogue and I can complete the login. Completing the login allows me to continue and the rest of my app works as expected.

I've checked the console for errors and there are none in either the Facebook Login window, or my app window.

I've also tried using both a Facebook login button, and attaching FB.login to an element. Both methods produce the same result. The login dialogue freezes after clicking Okay on the basic permissions step.

Any ideas on how I can make it login dialogue proceed to the final extended permissions step?

JS

// Additional JS functions here
window.fbAsyncInit = function() {
  FB.init({
    appId      : 'MY APP ID',
    status     : true,
    cookie     : true,
    xfbml      : true
  });

};

// Load the SDK Asynchronously
(function(d, s, id){
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Answer 1

Stumbled upon a solution while trying some other things.

I'm using the Facebook Login button like this:

<div
    id="fblogin"
    class="fb-login-button"
    data-show-faces="false"
    data-width="200"
    data-max-rows="1"
    data-scope="publish_actions"
    login_text="Login to Review" >
</div>

This would open the Facebook login dialogue but would stop after the initial permissions step and wouldn't continue the extended permissions I was requesting.

Turns out that if I hijack the Facebook login by calling FB.login when the user clicks the button, and add a return: false; the permissions dialogue works as it should.

$('#fblogin').click(function(){
    FB.login(function() {

    }, {scope: 'publish_actions'});

    return false;
});

Problem solved!