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

FB was not yet defined at that point of time. You haven't used it yet, you had simply typed it earlier up. The FB.XFMBL.parse line will execute when the document is ready. Same goes to the //connect.facebook.net/en_US/all.js line. So it's not really reliable which code will execute first if it is executed from the same event.

What you can do is somehow have the code you want be executed from window.fbAsyncInit. From that point onwards, you can be sure that FB is ready to be used.

One way you can do if you don't want to mix the code you have in widget.js is by using jQuery's custom event. So instead of having $(function() { ... });, you will have something along this line:

$(window).bind('fbAsyncInit', function() {
  // Your code here
});

Then you will have window.fbAsyncInit call $(window).triggerHandler('fbAsyncInit') just after the FB.init() line.