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

I had this problem and solved it similarly to the solution that Amry provided so I'm posting it here in case someone else needs to use it.

I made the initial assumption that the FB initialization call made in the fbAsyncInit method would initialize immediately, so I too coded my use of the FB object in a $(document).ready() method. That is not the case. fbAsyncInit takes quite some time after the page loads to finish initializing. Here is my solution, when using jQuery on my site:

The last task is to simply switch your $(document).ready() code to a bind for your event. This goes where ever you are using the FB object.

(function($) {
    $(document).bind('FBSDKLoaded', function() {
        //Code using the FB object goes here.
    });

})(jQuery);

One thing I should also mention: Firefox is a lot more tolerant of this than Webkit browsers like Chrome. I couldn't figure out why NONE of my jQuery was working properly in Chrome... well, this was why.

I hope this helps someone.