複数のFacebookコメントインスタンス

Question

ユーザーがJQueryを使用して特定のアクションを実行するたびに、ページに複数のFacebookコメントボックスを読み込む必要があります。 （http://developers.facebook.com/docs/reference/plugins/comments/）

すべてのコメントフィールドを一度に読み込むとうまくいきましたが、これはプログラミングの面で悪いことです。

コメントを順番に読み込もうとすると、最初のコメントは表示されますが、後続のコメントはすべて読み込まれません。

デモ用のテストスクリプトを作成しました。

ページ1： - ：あなたが最初にAAAA、BBBB、またはCCCC押した場合、この例では

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

<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）のコメントFacebookのコメントページが読み込まれます。しかし、残りのいずれかを押すと、ロードされません。ただし、最初にLoad ALLを選択すると、3つすべてがロードされます。

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>