我正在开发的网站包含一个通过 AJAX 动态加载的项目列表。当您向下滚动页面时，会加载更多项目。
现在，我的客户想要为这些项目中的每一项添加一个 Facebook 点赞按钮（以及点赞的人数）。
集成默认的like按钮是没有问题的，但是如何将like按钮添加到通过AJAX加载的项目中呢？如果加载了一个新项目，Facebook API 如何知道 DOM 树中有一个新的点赞按钮，它需要获取多少人点赞这个按钮？
有没有人知道如何做到这一点？有可用的例子吗？我的搜索没有找到任何有用的东西，除了集成标准的按钮。
【问题讨论】：
标签： ajax facebook facebook-like
答案较晚，但您可以在函数的回调中使用 Facebook API 的解析函数，该函数会加载新元素以呈现新的类似按钮：
FB.XFBML.parse();
您还可以将解析器定向到要渲染的元素，这样它就不会重新渲染已经存在的类似按钮：
FB.XFBML.parse(document.getElementById('foo'));
这直接来自文档：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
【讨论】：
<div class="fb-login-button" ...></div> 这样指定的按钮被重新解析。您不必使用像 <fb:login-button ....></fb:login-button> 这样的 FBXML 标签
迟到的答案，但以防万一有人需要。
刚刚完成的项目与描述的项目几乎相同。 我的页面通过 ajax 以 json 格式获取帖子，然后我创建了 dom 元素，包括 facebook like button、tweet button 和 google plus one button。在我做对之前，我遇到了很多问题。主要问题是，like 按钮一次又一次无法按预期工作......之后我找到了可行的解决方案。
我正在使用facebook js sdk（你可以找到一些有用的信息here）
<div id="fb-root"></div>
<script>
var isFBLoaded = false;
window.fbAsyncInit = function() {
FB.init({
appId: ' your api key',
status: true,
cookie: true,
xfbml: false
});
isFBLoaded = true;
...
renderFBqueue(); // i ll explain this later
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
似乎 ajax 内容和 FB.XFBML.parse() 方法或其他东西有问题。 我在fb developers forum 上找到了一个解决方案，并对其进行了修改以满足我的需要。因此，在我从 ajax 调用中获取 json 内容（多个帖子）后，我使用 jquery 创建了所有元素，除了 fb 之类的按钮。我将帖子网址（和其他一些相关数据）放入队列中，并使用超时调用函数来创建/解析这些按钮。
var fb_queue = [];
...
function getMorePosts(){
$.get('moreposts.php', params, function(response){
if (response) createPosts(response);
}, 'json');
}
...
function createPosts(data){
...
for (var key in data.posts) {
...
fb_queue.push({ id : data.posts[key].id , url : data.posts[key].url });
}
... // elements are created
}
最后创建和解析类似按钮的 fb
function parseFBqueue(){
if(isFBLoaded){
if (fb_queue.length==0) return false;
$.each(fb_queue, function (j, data) {
window.setTimeout(function () {
renderFBLike(fb_queue.shift());
}, (j + 1) * 300);
});
};
}
function renderFBLike(data){
var fblike = '<fb:like href="'+data.url+'" layout="button_count" ... ></fb:like>'
$('#fbdiv-'+data.id).append(fblike);
FB.XFBML.parse(document.getElementById('fbdiv-'+data.id'));
}
希望有人会觉得这很有用，我知道一周前我会的 :)
【讨论】：
Facebook 的赞按钮只是页面上的<iframe>。因此，没有运行“Facebook API”。点赞数是<iframe> 内内容的一部分，并在浏览器加载src URL 时与其余内容一起加载。点赞按钮的代码如下：
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
所以本质上，您需要做的就是在页面的正确位置和正确的src URL 中添加一个新的<iframe>，其余所有操作都会自动为您处理。
【讨论】：
<fb:like> 标签转换为 iframe 元素，向 iframe 的 src url 添加一些额外的参数。在实践中，使用 JavaScript API 预先计算具有所需属性的点赞按钮，然后将参数复制到 iframe 版本中，或者编写自己的简单 JavaScript 以将 <fb:like> 标记转换为相应的 iframe，应该不会太难。
在 ajax 完成后调用这个 javascript 函数 ;)
fb_sharepro_render()
【讨论】：