Making Facebook’s JavaScript SDK work with your AJAX pages

Facebook’s example code in its documentation would not go well with AJAX served pages. In particular, the login button does not get “converted” on subsequent attempts because the JS code required by Facebook is also loaded asynchronously. Their script is loaded into your document tree, and calls the FB.init function only that one time when the script is loaded. All subsequent times, it sees that the script has already been loaded and does nothing (i.e. their d.getElementById(d) check). Therefore, if your login button appears in an AJAX served page, it may work the first time the button appears, but fail to work afterward.

The solution, which may be difficult to find on their documentation, or even elsewhere on the Internet, is to call FB.init at your leisure. Thus, if one of your AJAX served pages has a login button, it should make the call to FB.init itself. Combining a code snippet for determining if the remote script has been fully loaded with this approach provides a slightly more robust solution that won’t throw a JS error:

var stFBId = 'facebook-jssdk';
var fnFBInit = 
  function()
  {
    FB.init({
      appId      : /* YOUR APP ID */,
      status     : true, 
      cookie     : true,
      xfbml      : true,
      oauth      : true,
    });
    FB.Event.subscribe('auth.login', function(response) {
      window.location = /* URL after login */;
    });
    FB.Event.subscribe('auth.logout', function(response) {
      window.location = /* URL after logout */;
    });
  };
var fInitReady = false;

(function () 
{
  function loadScript(stUrl, fnCallback)
  {
    var script = document.createElement("script");
    script.type = "text/javascript";

    if (script.readyState) 
    {
      script.onreadystatechange = function()
      {
        if (script.readyState == "loaded" 
            || script.readyState == "complete") 
        {
          script.onreadystatechange = null;
          fnCallback();
        }
      };
    } 
    else 
    {
      script.onload = function()
      {
        fnCallback();
      };
    }

    script.src = stUrl;
    script.id = stFBId;
    script.async = true;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  if (!(document.getElementById(stFBId)))
  {
    loadScript('//connect.facebook.net/en_US/all.js',
    function()
    {
      fInitReady = true;
      fnFBInit();
    }); 
  }
})();

Finally, in any code that is served asynchronously that includes the FB login divs, you need to simply include the call to FB.init:

<div id="fb-root"></div>
<div class="login-button">Log in with Facebook</div>
<script>
if (fInitReady)
  fnFBInit();
</script>