スタックに私のような質問がいくつかありましたが、私の質問に答えたものはなかったので...
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();
が手動で(コンソールで)実行されると、「いいね」ボタンが表示されます。ありがとう
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/
誰かがそれを必要としているかどうかはわかりませんが、私のcompleteコードは今このようになり、FBページといいねボタンの両方を適切にレンダリングします(マテリアルアイコンで作成されたLikeLinkボタン):
<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 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();
}