Загрузите Facebook как ящик после завершения содержимого страницы

Question

Я пытаюсь отложить Facebook Like Box от загрузки до загрузки содержимого страницы. Я пытаюсь достичь этого через AJAX, но до сих пор имел смешанные результаты. То, что я делал, было взять код ниже (HTML5 версии):

<div id="fb-root"></div> 
<script>(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&appId=147395032005356"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="false" data-header="false"></div> 

... и был он сидел на своем собственном где-то на моем сайте.

я затем настроить некоторые JQuery, чтобы получить код и добавить его на страницу как так:

// set 1 second timeout 
setTimeout(function() { 
    $.ajax({ 
     url: "/facebook/likebox.php", 
     success: function(data){ 

      // add loaded data to page 
      $('#foo').append(data); 
     } 
    }); 
}, 1000); 

В некоторых случаях (ударяя F5 на той же странице) это работало, и некоторые не сделали.

Мне было интересно, есть ли какие-то лучшие решения для того, что я пытаюсь выполнить, или я вообще что-то пропустил.

Answer 1

Вы должны поместить свой javascript в функцию обратного вызова fbAsyncInit(), чтобы вы могли быть уверены, что SDK для JavaScript JavaScript полностью загружен, прежде чем положить свою коробку. Не забудьте позвонить по номеру FB.XFBML.parse() после ввода DOM для аналогичного ящика

window.fbAsyncInit = function() { 
$.ajax({ 
    url: "/facebook/likebox.php", 
    success: function(data){ 

     // add loaded data to page 
     $('#foo').append(data); 
     FB.XFBML.parse($('#foo')[0]); 
    } 
}); 
};