Firefox Only: FB.login() called before FB.init()

Question

Using the Facebook SDK, I get the following console error when trying to connect a user to my site. The "Connect with Facebook" button works fine in all other browsers, except Firefox.

I have a Channel URL in the innit config, and I've confirmed this issue happens in Firefox installs without Firebug. The following is my code:

<script type="text/javascript">
  window.fbAsyncInit = function() {
  FB.init({
     appId :  'my_real_app_id',
     channelUrl : 'MYURL.com/channel.php',
     status:  true,
     cookie:  true,
     xfbml :  false
  });
};

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

$(document).ready(function() {
  $('a#login-fb').click(function(event) {
     event.preventDefault();
     FB.login(function(response) {
        if (response.authResponse) {
           console.log('Welcome! Fetching your information...');
           FB.api('/me', function(response) {
              handleFacebookLogin(response);
           });
        } else {
           console.log('User cancelled login or did not fully authorize');
        }
     }, {scope: 'email, offline_access, user_birthday, publish_stream, publish_actions' });
  });
</script>

Answer 1

I fixed this issue by changing my above javascript, right below #fb-root to the following:

<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function() {
  window.fbAsyncInit = function() {
     FB.init({
        appId :  'my_id',
        status:  true,
        cookie:  true,
        xfbml :  false
     });
  };

  (function() {
     var e = document.createElement('script');
     e.async = true;
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
     document.getElementById('fb-root').appendChild(e);
  }());

  //rest of code here

Answer 2

For the browser platform, the plugin seems to be using the post prepare plugin to populate the APP_ID. It assumes this is specified in config.xml in the root of the project. I am not sure why - but this was missing in my config generating the error.

Adding this line to config.xml, seems to resolve the problems

<preference name="APP_ID" value="0123456789"/>

Note: the implementation seems to be based on an inline replacement of the special token APP_ID in several files (see plugins/cordova-plugin-facebook4/scripts/after_prepare.js).

In my situation this had been set to null (presumably the first time it ran without the above entry in config.xml). To resolve this I reinstalled the plugin and browser platform.

$ ionic cordova plugin remove cordova-plugin-facebook4
$ ionic cordova platform remove browser
$ ionic cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="0123456789" --variable APP_NAME="myApp"
$ ionic cordova platform add browser

Answer 3

I had the similar issue in a Rails project and it helped to bring the

    window.fbAsyncInit = function() {
    FB.init({
        appId:my_real_app_id, 
        cookie:true,
        status:true, 
        xfbml:true
    });

out of header and have it in the <script> tag just below the <div id="fb-root"></div> in body.