Question

MyNamespace.Facebook.coffee:

namespace 'MyNamespace', (exports) -> 
    exports.FacebookAPILoader = class 

        constructor: (@appId, @channelFileUrl) -> 
            @init()

        init: (fbAPILoadedCallback) -> 
            #FB triggers/calls window.fbAsyncInit() after the API javascript loads: 
            window.fbAsyncInit = () => 
                @initFb()
                fbAPILoadedCallback() if fbAPILoadedCallback?
                return
            @loadAPI()

        loadAPI: () -> 
            ((d) ->
                id = 'facebook-jssdk'
                ref = d.getElementsByTagName('script')[0]
                return if d.getElementById id

                js = d.createElement 'script'
                js.id = id
                js.async = true
                js.src = "//connect.facebook.net/en_US/all.js"
                ref.parentNode.insertBefore js, ref
            )(document)

        # Set app specific settings here: 
        initFb: () -> 
            fbConfig = 
                appId: @appId
                channelUrl: @channelFileUrl
                status: true
                cookie: true
                xfbml: true
            FB.init fbConfig 

This is how I load the api in my views:
//MyView.cshtml:

@using (Script.Foot()) {
    var settingsReader = new System.Configuration.AppSettingsReader();
    var facebookAPIAppId = settingsReader.GetValue("Facebook_API_AppId", typeof(string));
    var hostName = settingsReader.GetValue("EnvHostname", typeof(string));

<script type="text/javascript">
    var myFb;
    $(document).ready(function () {
        myFb = new MyNamespace.FacebookAPILoader(
            '@Html.Raw(facebookAPIAppId)'
            , '//@Html.Raw(hostName)/modules/myapp/channel.html'
        );
    });
</script>
}

Jquery is loaded just before the closing </body> tag. I have two questions:

1. Is there anything wrong with the way I am loading it here? I believe it will load asynchronously after jquery fires the document ‘ready’ event — is that correct? Is there a way to do it that has better performance?

2. What is the best way to set this module up so that I can pass in arbitrary callbacks that will execute within fbAsyncInit()? I’m using this inside a CMS (Orchard) driven website, and I can potentially have multiple views in the same HTTP request wanting to add their own custom callbacks that should be run as part of fbAsyncInit(). How do I accomplish that? I know I could just pass in a callback array, but the part I’m not sure about is how to make sure all the different features on a given page can chime in on what their Facebook related code is, and how to ensure that the FacebookAPILoader.init() runs only after all those FB widgets’ callbacks and DOM elements and everything are ready to interact with it.

UPDATE:
I think I’m going to do this the same way google analytics async tracking does it with the _gaq variable in the global namespace. Any code that needs facebook API interaction can push callbacks into the _gaq style queue, and the FacebookAPILoader module will pull that queue when it’s ready. Is this a naive approach? Is there any danger that my code will try to add to the _gaq style queue AFTER fbAPILoadedCallback() has already been called?

Answer 1

I found this, which I think is the best solution I’ve come across for this problem so far. A little easier to implement than the _gaq style queue, as long as you don’t mind depending on jQuery.