Jquery - Facebook like button with asyncronous script tag dynamic loaded not initialized twice

Question

i am using the async script loading technic from Facebook to show a like button on a dynamic into an container loaded ajax page. For the first time i load the site the Button would be presented correctly..

.. but if i unload the page from the parent container with html('') and load it again the same way, the like button would't be initialized anymore. Firebug shows me the script was loaded to the correct div but not executed.

I load the subpage holding the like button like this (same on ini and site navigation):

$.ajax({
    url: url+'holdslikebutton.php?rnd='+Math.random()+'&ajax=yes',
    //cache: false,
    success: function(data) {
        showFBButton();
    }
});

The Script for the like button looks so:

function showFBButton() {
    var html =
        '<div id="fb-button">'
        + '<div class="fb-like" data-href="https://www.facebook.com/xxx" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="like"></div>'
        + '<div id="fb-root"></div>'
        + '</div>';
    $('#fb-viewport').html(html);
    window.setTimeout( function () {
        var e = document.createElement( 'script' );
        e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/'+fblang+'/all.js#'+Math.random()+'&xfbml=1&appId=xxx';
        document.getElementById( 'fb-root' ).appendChild( e );
        document.getElementById( 'fb-button' ).removeAttribute( 'class' );
    }, 2000 );
return true;
};

Why would the script not initialized when i load the holdslikebutton.php from inbetween the site per navigation. Is there something what i need to do to trigger the execution of all.js? But why then is it working on loading the site externally with browser-url or browser reload.

It's not complicated. Maybe i oversee something? I am stuck and would be happy for every idea how to fix this issue.

Answer 1

Rendering of FB plugins only happens for elements that are in the DOM when the SDK is initialized.

To re-parse the DOM (or parts thereof) for new plugin tags needs to be done using FB.XFBML.parse.

(Discussed here multiple times before …)