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

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. — Alex Dn, Jan 22 '12 at 14:00

Marcelo Diniz · Accepted Answer · 2012-01-22T15:04:31.693

52

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/

edited Jan 22 '12 at 15:04

answered Jan 22 '12 at 14:01

Marcelo Diniz

2,493
2
21
27

thanks marcelo, but I've done this already, I should have mentioned it. It still doesnt work. – Jan 22 '12 at 14:04
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? – Marcelo Diniz Jan 22 '12 at 14:44
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? – Jan 22 '12 at 14:55
1

edited my answer: you have to run `parse()` after the content loads, in a callback passed to `.load`. – Marcelo Diniz Jan 22 '12 at 15:05
You are 100% correct with your edit, thanks so much, Marcelo! – Jan 22 '12 at 15:10
@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) – Junaid Qadir Shekhanzai Mar 15 '12 at 20:41
@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 (http://stackoverflow.com/questions/11255818/render-multiple-facebook-like-buttons-after-ajax-call) .. if you could find the time to answer :) – Cosmin Atanasiu Jun 29 '12 at 03:49
This solved my issue of FB share button not appearing in angular ng-repeat on model change – phillydigital Sep 01 '16 at 22:11

score 1 · Answer 2 · answered Jun 27 '15 at 08:04

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

Render 'like' button after ajax call

2 Answers2

Linked