Facebook Javascript SDK Problem: "FB is not defined"

Question

The following code, copied from the Facebook documentation here, is not working for me in Chrome.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
  appId  : 'YOUR APP ID',
  status : true, // check login status
  cookie : true, // enable cookies to allow the server to access the session
  xfbml  : true  // parse XFBML
});
</script>

In the Javascript console I get:

Uncaught ReferenceError: FB is not defined

I'm not having any problems with the SDK in Firefox or Safari, just Chrome.

Solution 1

I saw a case where Chrome had installed WidgetBlock which was blocking the Facebook script. The result was exactly this error message. Make sure you disable any extensions that may interfere.

Solution 2

So the issue is actually that you are not waiting for the init to complete. This will cause random results. Here is what I use.

window.fbAsyncInit = function () {
    FB.init({ appId: 'your-app-id', cookie: true, xfbml: true, oauth: true });

    // *** here is my code ***
    if (typeof facebookInit == 'function') {
        facebookInit();
    }
};

(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));

This will ensure that once everything is loaded, the function facebookInit is available and executed. That way you don't have to duplicate the init code every time you want to use it.

function facebookInit() {
   // do what you would like here
}

Solution 3

This error will also appear if you omit the semicolon after the fbAsyncInit definition.

window.fbAsyncInit = function() {
    FB.init({
        appId: 'YOUR APP ID',
        status: true,
        cookie: true,
        xfbml: true
    });
    //do stuff
}; //<-- semicolon required!

Without the semicolon, the situation is the same as in this shorter example:

var x = function () {
    console.log('This is never called. Or is it?');
}

('bar');

The function gets called, because without the semicolon the ('bar') part is seen as a call to the function just defined.

Solution 4

I encountered this problem too and what solved it has nothing to do with Facebook but the prior script I included that was in bad form

<script type="text/javascript" src="js/my_script.js" />

I changed it to

<script type="text/javascript" src="js/my_script.js"></script>

And it works...

Weew... hopefully my experience can help others stuck in this that has done almost about everything but still can't get it to work...

Oh Boy... ^^

Solution 5

Try Asynchronous Loading: http://developers.facebook.com/docs/reference/javascript/fb.init/

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR APP ID',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
  };

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

View more solutions

Comments

[Alex Miller]

Still gives me the same issue. Works in Firefox / Safari, doesn't work in Chrome.

[beshkenadze]

ok, try a event: window.onload = function(){ /* Init code*/ }

[Alex Miller]

Same thing! I actually had it like that originally. Still getting "FB not defined." Gaaah! Thanks for the suggestions though!

[codeimplementer]

Thanks a million. My chrome synced the widgetblock extension from my home computer to the workplace. Fun bug.

[Damien Keitel]

Thank you for this. Just saved me from having to use sync instead of async. +1 to you

[Jody]

FYI - this chrome extension also caused the problem - "Facebook Disconnect" - chrome.google.com/webstore/detail/…

[Aleja_Vigo]

Same mistake here... Had a big headache before i got to your post. No error was shown and the FB JS SDK wasn't loading at all if the previous script (like jquery) was in that format.

[user562529]

Yeah, same for the superb browser addon "ghostery" (must have!). Now that I found out I feel a bit stupid for not checking this myself. Thanks!

[Alex Miller]

Ah, I was using "Facebook Disconnect"

[Pavel Nikolov]

Same here, I was also using Facebook Disconnect and it was causing the problems. When I removed it everything worked fine.

[ripper234]

I actually had to remove the call to FB.init() to make the above snippet work.

[Breno Salgado]

"Facebook Disconnect" was the cause here too :)

[Luca Simonetti]

this is really weird, but it actually happened to me. What's wrong with omitting the semi-colon? I mean, you shouldn't for a clean code, but JS is not so choosy, right?

[Søren Beck Jensen]

Disconnect was the problem for me.

[Paul Lysak]

Awsome! That was the problem! But I also wonder why it was so important.

[Sorin Buturugeanu]

you are still using the FB object, and you're not sure whether it exists or not

[Clint C.]

Disconnect for me also was the problem!

[Alex]

Awesome.. this just spared me 500 years of pulling my hair out :)

[jmpp]

Same if you use any "blocker". In my case I was using Ghostery and needed to disable it on my page to solve the problem. Thanks @pbz !