You must initialize FacebookUtils before calling logIn

Question

I have attempted to integrate Facebook with Parse. I have followed the following guide, https://parse.com/docs/js_guide#fbusers but is still experiencing issues.

In a nutshell, there is a login button with facebook. When the user is non-existant it redirect the user to the signup page, and when its an existing user it redirects them to the city page of their selection in the account creation page. If user cancels the signup process, upon login, it takes the existing user to the account signup page.

However, the facebook screen only appears when the user is non existant and haven't finalize the signup process. Below are the warnings I get when attempting to login:

On Console Warnings/Errors

• The 'status' flag passed into FB.init, when set to true, can interfere with Parse Facebook integration, so it has been suppressed. Please call FB.getLoginStatus() explicitly if you require this behavior.

• FB.init has already been called - this could indicate a problem sdk.js:61 Setting authResponse is not supported

• You must initialize FacebookUtils before calling logIn.
• FB.login() called when user is already connected.

Below is the Javascript code:

  // Initialize Parse
Parse.initialize("ID", "ID");

  window.fbAsyncInit = function() {
    Parse.FacebookUtils.init({ // this line replaces FB.init({
      appId      : '433936150095453', // Facebook App ID
      status     : true,  // check Facebook Login status
      cookie     : true, 
      xfbml      : true,  // initialize Facebook social plugins on the page
      version    : 'v2.2' // point to the latest Facebook Graph API version
    });

    // Run code after the Facebook SDK is loaded.
  };

  (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/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

    function fbLogin(){
    Parse.FacebookUtils.logIn(null, {
  success: function(user) {
    if (!user.existed()) {
                window.open("accountCreate.html", "_self");
    } else {
     if (city == "San Francisco") {
                window.open("neighbourhoodselectSF.html", "_self");
                } else if (city == "New York City"){
                window.open("neighbourhoodSelectNYC.html",  "_self");
    }
            else {

                              window.open("accountCreate.html", "_self");

            }

    }
  },
  error: function(user, error) {
    alert("User cancelled the Facebook login or did not fully authorize.");
  }
});
    }

The html code:

  <button onclick="fbLogin()" id="facebookLogin" class="button button-block button-positive">
         <i class="icon ion-social-facebook"></i> &nbsp; <text id="textBtn">Get started with facebook </text>
</button>

    <script src="js/facebook.js"></script>

    <script src="lib/facebookConnectPlugin.js"></script>

Any help would be greatly appreciated.

Answer 1

This is because your application is unable to find the facebook's sdk.js that you are trying to import in the script tag.

Replace

js.src = "//connect.facebook.net/en_US/sdk.js";

with

js.src = "https://connect.facebook.net/en_US/sdk.js";