多个Facebook评论实例 [英] Multiple Facebook Comments Instances

问题描述

每当用户使用JQuery执行特定操作时，我需要在页面上加载几个Facebook注释框。 （http://developers.facebook.com/docs/reference/plugins/comments/）

I need to load several Facebook Comments boxes on a page whenever a user performs a certain action using JQuery. (http://developers.facebook.com/docs/reference/plugins/comments/)

如果我要加载所有评论，字段，但这是坏的编程习惯。

I've gotten it to work if I were to load all the comment fields at once, but this is bad programming practice.

当我尝试按顺序加载注释，第一个注释出现，但所有后续的加载失败。

When I attempt to load the comments sequentially, the first comment appears but all subsequent ones fail to load.

我创建了一个测试脚本来演示。

I've created a testing script to demonstrate.

第1页：

<script src='http://code.jquery.com/jquery-1.6.4.min.js'></script>

  <div id='A' align='center' onclick='clickA();'><strong>AAAAAAAAAAAAAAAAAAAAA</strong></div>
  <div id='B' align='center' onclick='clickB();'><strong>BBBBBBBBBBBBBBBBBBBBB</strong></div>
  <div id='C' align='center' onclick='clickC();'><strong>CCCCCCCCCCCCCCCCCCCCC</strong></div>
  <div id='ALL' align='center' onclick='load_all();'><strong>Load ALL</strong></div>

<script>

var facebook_comments_page = 'http://localhost/test2.html';

function clickA(){ 
    $('#A').load( facebook_comments_page);
}

function clickB(){
    $('#B').load(facebook_comments_page);
}

function clickC(){
    $('#A').empty();//not working to remove the dom
    $('#A').detach();//not working to remove the dom
    $('#A').remove();//not working to remove the dom

    $('#C').load(facebook_comments_page );
}

function load_all(){  
  $('#A').load(facebook_comments_page);
  $('#B').load(facebook_comments_page);
  $('#C').load(facebook_comments_page);
}

</script>

- 实际Facebook评论页面（test2.html）：

Page 2 - the actual Facebook Comments Page (test2.html):

<script class='fb-comments'>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = '//connect.facebook.net/en_US/all.js#xfbml=1';
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>


    <div class='fb-comments' data-href='http://example.com' data-num-posts='2' data-width='470' ></div>

在此示例中，如果您最初按AAAA，BBBB或CCCC，Facebook评论页面加载。但是如果你按任何剩余的，它们不加载。但是，如果你首先选择Load ALL，那么所有三个加载。

In this example, if you initially press AAAA, BBBB, or CCCC the Facebook comments page loads. But if you press any of the remaining ones, they do not load. However, if you first select Load ALL, then all three load.

使用CCC，我认为如果销毁AAA的内容，则CCC将加载。然而，它不。我想在某种程度上JQuery在后续调用中杀死脚本内容。

With CCC, I thought that if destroy the contents of AAA, then CCC would load. However, it does not. I think somehow JQuery is killing the script contents on subsequent calls.

任何帮助将非常感谢！

推荐答案

Chris，亲爱的，我可以避免jQuery。

Chris, personally i avoid jQuery when possible. Here is a stand alone sample that will do the same as your doing, with out jQuery.

1. javascript sdk异步加载，完成和初始化后


2. 按钮将加载html5 div到div，xfbml将解析。

---

---

    <div id="fb-root"></div>
    <div id="cA"></div>
    <div id="cB"></div>
    <div id="cC"></div>
    <div id="cAll"></div>
    <script>
          window.fbAsyncInit = function() {
            FB.init({
        appId  : 'App_ID_HERE',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true, // parse XFBML
        //channelUrl : 'https://anotherfeed.com/emo/channel.html', // channel.html file
        oauth  : true // enable OAuth 2.0
            });
document.getElementById('cA').innerHTML='<button onclick="commentA();">Load A</button>';
document.getElementById('cB').innerHTML='<button onclick="commentB();">Load B</button>';
document.getElementById('cC').innerHTML='<button onclick="commentC();">Load C</button>';
document.getElementById('cAll').innerHTML='<button onclick="commentA();commentB();commentC();">Load All</button>';
      // Load the SDK Asynchronously
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      // Add your application id where says App_ID_HERE
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=App_ID_HERE";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    function commentA(){
    var cb=document.getElementById('cA');
   cb.innerHTML='<div class=\'fb-comments\' data-href=\'http://example.com?page=1\' data-num-posts=\'2\' data-width=\'470\'></div>';
    FB.XFBML.parse(cb);
    };
    function commentB(){
    var cb=document.getElementById('cB');
    cb.innerHTML='<div class=\'fb-comments\' data-href=\'http://example.com?page=2\' data-num-posts=\'2\' data-width=\'470\'></div>';
    FB.XFBML.parse(cb);
    };
    function commentC(){
    var cb=document.getElementById('cC');
    cb.innerHTML='<div class=\'fb-comments\' data-href=\'http://example.com?page=3\' data-num-posts=\'2\' data-width=\'470\'></div>';
    FB.XFBML.parse(cb);
    };
    </script>

这篇关于多个Facebook评论实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！