Running a javascript function when Facebook has finished loading

Question

I'm writing a facebook app that uses badgeville to award points to players. Sometimes points need to awarded when the page loads, however I also have some facebook social plugins on the page like a comment box and like button. It appears that because the page is waiting for these to load it doesn't load the badgeville stuff intime to allow the function that awards the points to run correctly.

Is there any event I can use to run the function once facebook has finished doing it's things? I found "FB.Canvas.setDoneLoading();" but am not sure how to implement it.

Thanks

Answer 1

Assuming you are doing Server-side Login, You should use FB.Event.subscribe . if you are initializing FB object with status: true then auth.statusChange or auth.authResponseChange event will fire after FB object initialized.

FB.Event.subscribe('auth.statusChange', function(response) {
    if(response.status == 'connected') {
        runFbInitCriticalCode();
    }
});

FB.init({
    appId  : 'appId',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
});

Answer 2

Sure, you probably have something like this:

<script>
window.fbAsyncInit = function() {
FB.init({
  appId  : 'YOUR APP ID',
  status : true, // check login status
  cookie : true, // enable cookies to allow the server to access the session
  xfbml  : true,  // parse XFBML
  channelUrl  : 'http://www.yourdomain.com/channel.html', // Custom Channel URL
  oauth : true //enables OAuth 2.0
});
FB.Canvas.setDoneLoading(
 function () {
  alert("Done loading");
 });
};
(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);
 }());
 </script>

This will sure that setDoneLoading() is not called until the FB functions are setup an initialized.