Facebook OAuth failing after Ajax / HistoryAPI page load

Time to reach out for some help! I have a site for which I am using Ajax and HistoryAPI for transitions between pages. This includes an integration with Facebook's OAuth API to populate short data capture forms for customers. This works great when visiting a page without the Ajax loading i.e. first visit or page refresh.

But the Facebook integration is failing when I try it following an Ajax page load. When Facebook's dialogue box appears, it is blank and doesn't disappear. Using console.log I can see the position response from the API when I click the close button on the dialogue box. I can also see the userID and access_token returned when I close the dialogue box (visible via console.log).

Here is my JS:

    $(document).ready(function() {
        functionOne();
        functionTwo();
        functionThree();
        historyAPI();
    });

    function historyAPI() {
        String.prototype.decodeHTML = function() {
            return $("<div>", {html: "" + this}).html();
        };

        var $main = $("main"),

        init = function(href) {
            functionOne();
            functionTwo();
            functionThree();
        },

        ajaxLoad = function(html) {
            document.title = html.match(/<title>(.*?)<\/title>/)[1].trim().decodeHTML();
            init();
        },

        loadPage = function(href) {
            $main.load(href + ' main>*', ajaxLoad);
            $('html:not(:animated),body:not(:animated)').animate({ scrollTop: 0});
        };

        init();

        $(window).on("popstate", function(e) {
            if (e.originalEvent.state !== null) {
                loadPage(location.href);
            }
        });

        $(document).on('click', 'nav a', function() {
            var href = $(this).attr('href');
            $(this).removeClass('active');
            $('main').fadeOut(250);

            if (href.indexOf(document.domain) > -1 || href.indexOf(':') === -1) {
                history.pushState({}, '', href);
                loadPage(href);
                return false;
            }
        });
    }

    functionOne {
        ...
    }
    functionTwo {
        ...
    }
    functionThree {
        ...
    }

And my Facebook OAuth integration is handled by the following in a separate file:

function statusChangeCallback(response) {
    if (response.status === 'connected') {
    } else if (response.status === 'not_authorized') {
    } else {}
}

function checkLoginState() {
    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
    });
}

window.fbAsyncInit = function() {
    FB.init({
        appId       : 9999999999999999,
        cookie      : true,
        status      : true,
        xfbml       : true,
        version     : 'v2.1'
    });

    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
    });

};

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function fb_login(){
    FB.login(function(response) {
        if (response.authResponse) {
                console.log(response);
                access_token = response.authResponse.accessToken;
                user_id = response.authResponse.userID;
                FB.api('/me', function(response) {
                    var emailInput = document.getElementById("email");
                    var firstNameInput = document.getElementById("firstName");
                    var lastNameInput = document.getElementById("lastName");
                    emailInput.placeholder = response.email;
                    emailInput.value = response.email;
                    firstNameInput.placeholder = response.first_name;
                    firstNameInput.value = response.first_name;
                    lastNameInput.placeholder = response.last_name;
                    lastNameInput.value = response.last_name;
                    document.getElementById('status').innerHTML = '';
                });

        } else {
                console.log('User cancelled Facebook login or did not fully authorize.');
        }
    }, {
            scope: 'publish_stream,email'
    });
}

My Ajax loading is targeting the main within my page and replacing the contents of that only. My JS and Facebook specific JS is sitting outside of this.

Any help would be much appreciated. As I say, it is working fine with a normal page load, but for some reason it cannot work following an Ajax page load. I have been hunting for methods to reset / restart the OAuth methods but no joy so far.