Question

I can’t get Facebook Javascript functions to work inside of certain jQuery commands…

This works:

$("a#GetScrollTest").click( function() {
    FB.Canvas.getPageInfo(function(fbCanvasInfoObject) {
        var fbPosition = fbCanvasInfoObject.scrollTop;
        $("a#GetScrollTest").html("The scroll top value 
         is " + fbPosition + "px");
    });
    return false;
});

This doesn’t (returns ‘Uncaught ReferenceError: FB is not defined’):

$("a.scrollLink").each(function() {
    $(this).click(function(){
        FB.Canvas.getPageInfo(function(fbCanvasInfoObject) {
        var fbPosition = fbCanvasInfoObject.scrollTop;
        $(this).html("The scroll top value is " + fbPosition + "px");
        });
        return false;
    });
});

Anyone know why one the click method works, yet the .each() method does not? Why does it return FB not defined? The calls are in the same place.

Answer 1

The whole point of that big script block starting with window.fbAsyncInit is that the Facebook SDK gets loaded asynchronously.

Even though you’ve got your calls against FB inside a jQuery document ready callback, that isn’t sufficient to ensure the SDK is loaded when that code is executed.

Fortunately, window.fbAsyncInit exists for exactly that purpose: it won’t be run until the SDK has loaded.

From Facebook’s docs:

The function assigned to window.fbAsyncInit is run as soon as the SDK
is loaded. Any code that you want to run after the SDK is loaded
should be placed within this function and after the call to FB.init.
For example, this is where you would test the logged in status of the
user or subscribe to any Facebook events in which your application is
interested.

Just move your $("a.scrollLink").each(function() into the fbAsynchInit function and all should be happy.