Question

在堆栈上有一些类似于我的问题，但没有一个回答我的问题，所以......

ajax调用返回用于创建like按钮的标准html代码：

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

当使用'inspect element'查看时，这个html确实显示在源代码中，但它没有呈现，即按钮应该是空白的空间。是否有一些我应该使用的渲染功能？

任何提示都将不胜感激！

编辑：这是ajax请求和解析 - 'like'按钮与其他文本一起放在'#thequestion'中（它来自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);

（我知道eval是邪恶的）

编辑2：如果在ajax调用后手动（在控制台中）执行FB.XFBML.parse();，则会出现类似按钮。感谢

Answer 1

你必须在ajax调用后调用FB.XFBML.parse();。

文档：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

编辑：现在我看到您正在尝试将内容加载到$('#thequestion')。 .load接受请求完成后运行的回调。你应该做点什么：

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

文档：http://api.jquery.com/load/

Answer 2

不确定是否有人需要它，但我的完整代码现在看起来像这样，并且适当地呈现FB页面和Like按钮（使用材质图标创建LikeLink按钮）：

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

ajax调用后渲染“喜欢”按钮

2 个答案: