Facebook on Modal

Question

I have a Facebook 'Like' button as well as a 'Facepile' carousel in a multi-step Bootstrap modal window but they only appear if you page through, and return to the page that they are meant to display on.. on first viewing the page they are not loaded.

---

<script>
function displayPage(pageId) {
    $('div[id^="display"]').hide();
    $('#display'+pageId).show();
    $('.step').removeClass("active");
    $('#step'+pageId).addClass("active");


    if(pageId == 1) {
        (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/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }
        (document, 'script', 'facebook-jssdk'));

    };
}
</script>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <hgroup class="block fixed">
            <h3>Header</h3>
            <h4>Subheader</h4>
        </hgroup>
    </div>
    <div class="modal-body" id="content">
        <div id="display1" style="display:none;">
            <h1>LIKE OUR PAGE</h1>
            <div id="fb-root"></div>
            <div class="fb-like" data-href="https://www.facebook.com/myaddress" data-width="125" data-height="35" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
            <br><br>
            <div class="fb-facepile" data-href="https://www.facebook.com/myaddress" data-width="395" data-max-rows="1" data-colorscheme="light" data-size="large" data-show-count="true"></div>
        </div>
    </div>
</div>

Answer 1

Originally I simply had the facebook function within the same function which called the modal. When I modified it like so, it worked..

$(document).ready(function() {
    $("#myModal").on("show", function() {
        (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/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
});

function displayPage(pageId) {
    currentPageId = pageId;
    $('div[id^="display"]').hide();
    $('#display'+pageId).show();
    $('.step').removeClass("active");
    $('#step'+pageId).addClass("active");

    if(pageId == 1 || pageId == 2) {
    FB.XFBML.parse();