Render 'like' button after ajax call
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/
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"></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 scriptif (!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 againPostUrl = 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();}