多个 Facebook 评论实例

Posted 2023-02-21

【中文标题】多个 Facebook 评论实例

【英文标题】：Multiple Facebook Comments Instances

【发布时间】：2012-04-17 07:59:32

【问题描述】：

每当用户使用 JQuery 执行特定操作时，我都需要在页面上加载多个 Facebook 评论框。 (http://developers.facebook.com/docs/reference/plugins/cmets/)

如果我要一次加载所有评论字段，我已经让它工作了，但这是一种糟糕的编程习惯。

当我尝试按顺序加载 cmets 时，出现第一个评论，但所有后续评论都无法加载。

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

第 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>

第 2 页 - 实际的 Facebook 评论页面 (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 cmets 页面会加载。但是，如果您按下任何剩余的，它们不会加载。但是，如果您首先选择加载全部，则所有三个加载。

使用 CCC，我认为如果破坏 AAA 的内容，那么 CCC 就会加载。但是，事实并非如此。我认为 JQuery 在随后的调用中以某种方式杀死了脚本内容。

任何帮助将不胜感激！

【参考方案1】：

克里斯，我个人尽可能避免使用 jQuery。这是一个独立的示例，与您所做的相同，没有 jQuery。

javascript sdk 异步加载，完成和初始化后，将在每个 div 上绘制一个按钮以加载该评论框。 按下按钮会将 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>

【讨论】：

我无法让您的脚本运行，即使在插入我的应用 ID 之后也是如此。什么也没发生。