web-dev-qa-db-ja.com

ajax呼び出し後に「いいね」ボタンをレンダリングする

スタックに私のような質問がいくつかありましたが、私の質問に答えたものはなかったので...

Ajax呼び出しは、「いいね」ボタンを作成するための標準のhtmlコードを返します。

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

このhtmlは、「inspect element」で見るとソースに表示されますが、レンダリングされません。つまり、ボタンがあるべきスペースが空白になります。使用すべきレンダリング機能はありますか？

ヒントをいただければ幸いです。

編集：これがajaxリクエストと解析です-「いいね」ボタンは他のテキストと一緒に「#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();が手動で（コンソールで）実行されると、「いいね」ボタンが表示されます。ありがとう

ajaxfacebookfacebook-like
18
user993683

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/

51
Marcelo Diniz

誰かがそれを必要としているかどうかはわかりませんが、私のcompleteコードは今このようになり、FBページといいねボタンの両方を適切にレンダリングします（マテリアルアイコンで作成された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();
}
1
DusanV