多個Facebook評論實例

Question

當用戶使用JQuery執行特定操作時，我需要在頁面上加載多個Facebook評論框。 （http://developers.facebook.com/docs/reference/plugins/comments/）

我已經得到它的工作，如果我一次加載所有的評論領域，但這是不好的編程習慣。

當我嘗試按順序加載註釋時，會出現第一個註釋，但所有後續註釋都無法加載。

我創建了一個測試腳本來演示。

第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註釋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評論頁面加載。但是，如果您按下其中任何一個，則不會加載。但是，如果您首先選擇加載全部，那麼全部加載。

隨着CCC，我認爲如果銷燬AAA的內容，那麼CCC會加載。但是，它沒有。我認爲JQuery在隨後的調用中會殺死腳本內容。

任何幫助將不勝感激！

Answer 1

克里斯，我個人儘可能避免jQuery。這裏有一個獨立的樣例，它會和你一樣做，而不使用jQuery。

1. javascript sdk異步加載，完成並初始化後，將會爲每個div繪製一個按鈕以加載該評論框。
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>