将类似 facebook 的按钮与动态加载的内容集成

Question

我正在开发的网站包含通过 AJAX 动态加载的项目列表。当您向下滚动页面时，会加载更多项目。

现在，我的客户想要为每个项目添加一个类似 Facebook 的按钮（以及喜欢此按钮的人数）。

集成默认的点赞按钮没有问题，但是如何将点赞按钮添加到通过 AJAX 加载的项目中？如果加载一个新项目，Facebook API 如何知道 DOM 树中有一个新的点赞按钮，需要获取有多少人点赞该按钮？

有没有人有如何做到这一点的经验？有可用的例子吗？除了集成标准的按钮之外，我的搜索没有发现任何有用的东西。

Answer 1

迟到的答案，但您可以在函数的回调中使用 Facebook API 的解析函数，该函数加载新元素以呈现新的类似按钮：

FB.XFBML.parse();

您还可以将解析器定向到您想要呈现的元素，因此它不会重新渲染已经存在的类似按钮：

FB.XFBML.parse(document.getElementById('foo'));

这直接来自文档：https://developers .facebook.com/docs/reference/javascript/FB.XFBML.parse/

Answer 2

迟到的答案，但以防万一有人需要它。

刚刚完成了我的项目，几乎与所描述的项目相同。
我的页面通过 ajax 获取 json 格式的帖子，然后我创建 dom 元素，包括 facebook like 按钮、tweet 按钮和 google plus one 按钮。在我解决问题之前，我遇到了很多问题。主要问题是，类似的按钮一次又一次无法按预期工作......之后我找到了有效的解决方案。

我正在使用 facebook js sdk （您可以找到一些有用的信息这里）

<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 开发者论坛 上找到了解决方案，并对其进行了修改以适合我的情况需要。因此，在我从 ajax 调用获取 json 内容（多个帖子）后，我使用 jquery 创建除 fb 之类按钮之外的所有元素。我将帖子 url（以及其他一些相关数据）放入队列中，并使用超时调用函数来创建/解析这些按钮。

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

希望有人会发现这很有用，我知道一周前我会的:)

Answer 3

Facebook 点赞按钮只是页面上的一个

<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

因此，本质上，您需要做的就是将新的

Answer 4

ajax 完成后调用此 javascript 函数;)

fb_sharepro_render()