Несколько экземпляров комментариев Facebook - PullRequest
Новая
       37

Несколько экземпляров комментариев Facebook

2 голосов
/ 03 апреля 2012

Мне нужно загружать несколько ящиков комментариев Facebook на странице всякий раз, когда пользователь выполняет определенное действие с помощью JQuery.(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Страница комментариев (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, затем загрузите все три.

С CCC я подумал, что если уничтожить содержимое AAA, то будет загружен CCC. Однако это не так. Я думаю, как-то JQueryубивает содержимое сценария при последующих вызовах.

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 04 апреля 2012

Крис, лично я избегаю 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>
...