Render 'like' button after ajax call

Question

there were a few question similar to mine on the stack but none that answered my question, so...

An ajax call returns the standard html code for creating the like button:

<div class="fb-like" data-href="http://www.website.com" data-send="true" data-width="450" data-show-faces="true"></div>

This html does show up in the source when looked at with 'inspect element', but it is not rendered, i.e. the space where the button should be is blank. Is there some rendering function that I should be using?

Any hints would be greatly appreciated!

EDIT: Here's the ajax request and parseing - the 'like' button is put in '#thequestion' along with some other text (it is echoed from question.php).

$("#thequestion").load("/thought/question.php", { ans: choice, id: questionId } );
    $("#graph").load("/thought/graph.php", { id: questionId } );
    $("#fbCommentsPlaceholder").html("<div class='fb-comments' data-href='http://qanai.com/thought/#" + questionId + "' data-num-posts='2' data-width='470'></div>");
    FB.XFBML.parse();
    eval(document.getElementById('thequestion').innerHTML);
    eval(document.getElementById('graph').innerHTML);

(I know eval is evil)

EDIT 2: The like button appears if FB.XFBML.parse(); is executed manually (in the console) after the ajax call. Thanks

Answer 1

Not sure anyone needs it, but my complete code looks like this now and renders both FB page and Like button appropriatelly (LikeLink button created with material icon):

<i id="LikeLink" class="material-icons actionButton">&#xE8DC;</i>

var fbloaded = false; // if SDK is loaded, no need to do it again (though cache should do this?
var fbpageid = "myPageId"; // FB page id

// ajax call to FB SDK script
if (!fbloaded) {
    $.ajax({
        type: "GET",
        url: "//connect.facebook.net/en_US/sdk.js",
        dataType: "script",
        cache: true,
        success: function () {
            fbloaded = true;
            FB.init({
                appId: '{myAppId}',
                version: 'v2.3' // or v2.0, v2.1, v2.0
            });
// parse button after success
            FB.XFBML.parse();
        }
    });
}

var FBDivAppended = false; // if already done, do not call and render again
PostUrl = window.location.href; // like button needs this... or not :)

// when LikeLink is clicked, add the divs needed and at the end fire the FB script ajax call (resetFB)

$("#LikeLink").click(function () {
if (!FBDivAppended) {
            var $pagediv = $("<div class=\"fb-page\" data-href=\"https://www.facebook.com/" + fbpageid + "\" />");
            var $fblikediv = $("<div class=\"fb-like\" data-href=\"" + PostUrl + "\" />");
            var $fbdiv = $("<div id=\"fbDiv\" />");
            var $fbroot = $("<div id=\"fb-root\" />");
            $fbdiv.append($pagediv).append($fblikediv);
            $(".Header").append($fbdiv).append($fbroot);
            FBDivAppended = true;
        }

resetFB();
}

Answer 2

You have to call FB.XFBML.parse(); after the ajax call.

Documentation: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Edit: now I see that you're trying to load content into $('#thequestion'). .load takes a callback that runs after the request completes. You should do something like:

$('#thequestion').load('/my/url', { my: 'params' }, function() {
    FB.XFBML.parse();
});

Documentation: http://api.jquery.com/load/