Problem with Facebook XFBML and IE8 asynchronous loading

Question

I'm trying to implement an XFBML comment box on a page. It works in FF and Chrome, but only sporadically in IE8.

I get an 'FB' is undefined error when the page hits the FB.XFBML.parse('fb-stuff'); Do I need to check if the FB Connect script has finished loading before I try to parse the XFBML?

<script type="text/javascript">
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '117378991625799',
      status : false, // check login status
      cookie : false, // 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);
    FB.XFBML.parse('fb-stuff'); 
  }());
</script>

Answer 1

You shouldn't need to call fb.xfbml.parse yourself, since you're already instructing facebook init to do that for you in the fbAsyncInit. It's useful mainly in situations when you add new facebook elements to the page after the initialization and want them to be parsed and rendered.

And yes, you should wait for the javascript library to load. That's what the fbAsyncInit is all about. You create the script element for the connect library and inject it into the dom in that anonymous function, but it takes a little while for the browser to load and evaluate the code, so FB isn't available straight away. When the script has loaded (and the FB object is available) it will try to execute the window.fbAsyncInit and then you can do whatever you need to.