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

Narration

I'm not sure that it's the correct answer, but as I know, Like button sits inside of iframe. I don't know if you need to put it in iframe manually or html you talk about already contains iFrame. – Relish

html5 is now used for like buttons it seems. – Narration

Answer 1

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/

Circumfluent

thanks marcelo, but I've done this already, I should have mentioned it. It still doesnt work. – Narration

I tried it on a Chrome console and it worked just fine after I called FB.XFBMLparse(). Do you have Facebook JS SDK loaded? Are you using a HTML5 compatible browser? – Circumfluent

wow, I ran FB.XFBML.parse(); in the console and it appeared! this is a mystery... does jquery run ahead of it's self or something? like it has parsed before it has loaded the html into the div? – Narration

edited my answer: you have to run parse() after the content loads, in a callback passed to .load. – Circumfluent

You are 100% correct with your edit, thanks so much, Marcelo! – Narration

@Marcelo Diniz I'm having the same issue. I'm calling FB.XFBML.parse(); on complete event of the jQUery.ajax() method. Any help would be up-voted :) (please don't demut me, just kidding) – Temple

@MarceloDiniz: your response helped me so I gave you an upvote! But I still have a problem so I made a new question at [link] my question (#11256318) .. if you could find the time to answer :) – Huoh

This solved my issue of FB share button not appearing in angular ng-repeat on model change – Jamshedpur

Answer 2

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();
}

Knout