Question

I’ve been trying to configure the new Facebook Javascript API with my website, but I’m facing an issue with Firefox (working perfectly fine with Chrome and Safari, yet to test out on IE fully but have been informed of no issues).

The issue is being pointed out in the beginning of Facebook’s all.js file, with the message saying

window.name is undefined
if(!window.FB)window.FB={_apiKey:null,...return document.getElementById(a);}}; 
all.js (line 3)

Hence, any subsequent accesses to the SDK using FB. results in an error stating

FB is not defined
[Break On This Error] FB.login(function(response) 

The code that I’ve used is

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
    appId      : 'my_app_id', // App ID
    channelURL : 'my_channel_file', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    oauth      : true, // enable OAuth 2.0
    xfbml      : true  // parse XFBML
    });
    startLoad();

};

    // Load the SDK Asynchronously
    (function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
</script>

Any clues as to what the issue has? And has anyone faced this error before?

Answer 1

Solved: unbelievably, the only minor error was that I was using a global variable inside my JS file called “name”. That’s a serious no-no with the Facebook SDK (though not mentioned anywhere). I found the reasoning on a link I can’t remember, but the primary issue is that the global name variable is mangled up with the window.name which is required by the FB api.

I’d simply suggest avoiding a global variable called name whether or not you use the Facebook SDK. Just in case.