Firefox only: FB.login () is called before FB.init ()

Question

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

I have a feed url in my innit configuration and I confirmed that this problem occurs in Firefox installations without Firebug. Below 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 problem by changing my above javascript, just 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

I had a similar problem in a Rails project and it helped bring

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

from the header and place it in the <script> just below the <div id="fb-root"></div> in the body.

Answer 3

For the browser platform, the plugin seems to use a post preparation plugin to populate APP_ID . This is assumed to be specified in config.xml in the root of the project. I'm not sure why - but this was not enough in my error-generating configuration.

Adding this line to config.xml seems to fix the problems

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

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

In my situation, this was set to zero (presumably the first time it worked without writing above in config.xml ). To solve this problem, 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