将facebook like button与动态加载的内容集成在一起

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

迟到的答案,但以防有人需要它.

刚完成我的项目几乎与描述的项目相同.我的页面通过json格式的ajax获取帖子,而不是创建dom元素,包括facebook,如按钮,推文按钮和谷歌加一个按钮.在我做对了之前,我遇到了很多问题.主要的问题是像按钮一样多次按预期工作......在我找到工作解决方案之后.

我正在使用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>

看来whit ajax内容和FB.XFBML.parse()方法存在问题.我在fb开发者论坛上找到了一个解决方案,并对其进行了修改以满足我的需求.所以在我从ajax调用获得json内容(多个帖子)后,我使用jquery创建所有元素,除了fb之类的按钮.我将post 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>页面上的一个。因此，没有运行“Facebook API”。点赞计数是 内部内容的一部分，并且在浏览器加载 URL<iframe>时与其余内容一起加载。src点赞按钮的代码如下：

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

因此，本质上，您需要做的就是<iframe>在页面的正确位置和正确的srcURL 中添加新内容，其余所有操作都会自动为您处理。