FB is undefined even though I just used it

Question

I am trying to add a Facebook Like button to a widget that I am creating. The code that I use to add the Facebook like button to my page is as follows:

widget.html

Answer 1

The whole point of that big script block starting with window.fbAsyncInit is that the Facebook SDK gets loaded asynchronously.

Even though you've got your calls against FB inside a jQuery document ready callback, that isn't sufficient to ensure the SDK is loaded when that code is executed.

Fortunately, window.fbAsyncInit exists for exactly that purpose: it won't be run until the SDK has loaded.

From Facebook's docs:

The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.