加载后动态添加facebook按钮

Question

我正在尝试使用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="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"></div>

我试过这样添加一个按钮:

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

更新:

我试过触发FB.XFBML.parse(); 在添加新按钮之后,这会刷新页面上的所有按钮,而不仅仅是新添加的按钮.

Answer 1

要强制刷新/呈现Like按钮,您可以使用FB.XFBML.parse();整个DOM文档.

如果您只想浏览文档的一部分,则可以传递DOM对象(例如,带有1个按钮的容器元素).

FB.XFBML.parse(document.getElementById('containerX'));