Facebook JS Integration Error

Question

I have the following code right below the body tag of my application

  <div id="fb-root"></div>
  <script type="text/javascript">
  window.fbAsyncInit = function() {
  FB.init({appId: '136904373......', status: true, cookie: true,
         xfbml: true});
  };

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

 FB.getLoginStatus(function(response) {
if (response.session) {
  alert('Logged In');
  } else {
  alert('Not Logged In');
}
});
</script>

I'm currently getting the following error "FB not defined for FB.getLoginStatus(function(response) which makes me believe that the FB.init is not being loaded correctly. Anyone have any ideas (I've obscured the last 6 digits of my app idea on purpose)

Thanks

Answer 1

I suggest adding your methods to the init function to make sure that they run after it's been initialized. It's possible that your code is being executed before the javascript file is finished loading since you're loading it asynchronously.

<div id="fb-root"></div>
  <script type="text/javascript">
  window.fbAsyncInit = function() {
     FB.init({appId: '136904373......', status: true, cookie: true,
         xfbml: true});
     FB.getLoginStatus(function(response) {
         if (response.session) {
           alert('Logged In');
         } else {
           alert('Not Logged In');
         }
     });
  };

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

</script>