Question

<script type="text/javascript">
    $.getScript('http://connect.facebook.net/sv_SE/all.js#xfbml=1', function(){
        $('body').append('<div id="fb-root"></div><div class="fb-like" data-href="http://www.google.se" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>');
    });
</script>

没有按钮显示。这不是使用getScript的正确方法吗？

Answer 1

您应首先将DIV加载到DOM中，然后加载脚本以解析DOM对象。

<script type="text/javascript">
    $('body').append('<div id="fb-root"></div><div class="fb-like" data-href="http://www.google.se" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>');
    $.getScript('http://connect.facebook.net/sv_SE/all.js#xfbml=1', function(){

    });
</script>

Answer 2

在FB类按钮脚本执行之前，DIVs fb-root和fb-like需要已经在DOM中。该脚本查找id = fb-root的DIV，并尝试在其中插入FB like按钮。在您的情况下，您将在下载并执行脚本后添加DIV。因此，不会出现任何按钮。

如果您将代码更改为以下内容，它应该可以正常工作：

// append fb-root and fb-like DIVs (with display: none) before getting the FB script
// or even better, add them as part of your page itself with display: none
$('body').append('<div id="fb-root" style="display: none"></div><div class="fb-like" data-href="http://www.google.se" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana" style="display: none"></div>');

$.getScript('http://connect.facebook.net/sv_SE/all.js#xfbml=1', function(){
    $('#fb-root').show(); // show the DIVs
    $('#fb-like').show();
});

Answer 3

来自like button dox您可以使用这样的javascript代码来执行脚本的异步加载。

<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/sv_SE/all.js#xfbml=1&appId=113830492072210";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

使用getScript（）附加类似fb的按钮

3 个答案: