Добавление facebook как кнопок динамически после загрузки

Я пытаюсь добавить как кнопки на страницу, используя стандартный код кнопки, как указано в документации fb:

https://developers.facebook.com/docs/plugins/like-button/

Это вызывает чрезвычайно медленную загрузку из-за количества кнопок, которые я хотел бы добавить.

Чтобы обойти это, я надеялся загрузить кнопки по мере необходимости с помощью jquery, но если я добавлю код кнопки таким образом, они будут добавлены в нужное место (видимое в окне элементов инструментов разработчика), но кнопки не отображается.

Можно ли добавлять эти кнопки динамически? Я предполагаю, что он не работает, потому что кнопки не могут быть добавлены после инициирования, но я не знаю, как обойти это.

Я включил требуемый код внутри тега body

<div id="fb-root"></div>
<script type="text/javascript">
    (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_GB/all.js#xfbml=1&appId=************";
        fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
 </script>

Я использую fb-код, который создается документацией:

<div class="fb-like" data-href="#" onclick="location.href='https://developers.facebook.com/docs/plugins/'; return false;" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>

Я попробовал добавить кнопку таким образом:

   $(".myitem").append('<div class="fb-like" data-href="#" onclick="location.href='https://developers.facebook.com/docs/plugins/'; return false;" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>');

UPDATE:

Я попытался запустить FB.XFBML.parse(); после добавления новых кнопок, но это обновляет все кнопки на странице не только недавно добавленные.

Ответ 1