Facebook 点赞按钮无法加载（宽度为 0）

Question

我正在尝试设置一个赞按钮。我按照官方说明操作，但无法加载。检查显示它的宽度似乎为零。我做了一个 jsfiddle 来演示这个问题。如您所见，没有显示任何内容：

来自 jsfiddle 的代码：

<!-- fb like script -->
<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 = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

</script>

<!-- fb like button -->
<div class="fb-like" data-href="http://www.mylinkhere.com" data-layout="button_count" data-width="100" data-action="like" data-show-faces="false" data-share="false">
</div>

Answer 1

我认为您需要像这样初始化您的 Facebook SDK

    FB.init({
    appId      : '{your-app-id}',
    status     : true,
    xfbml      : true,
    version    : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
  });

参考this一次。可能对你有帮助

Answer 2

测试：

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

Answer 3

首先，为了在 JSFiddle 中加载 facebook SDK，您需要使用 https。（f.i。https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5 或者只是 //connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5 如果你已经在 https 上下文中）

其次，不是一个明确的解决方案，但解决方法是手动强制为 facebook 元素设置宽度和高度，如下所示：

.fb-like, 
.fb-like > span,
.fb-like > span iframe {
width: 100px !important;
height: 20px  !important;
}

示例： https://jsfiddle.net/8rutttoq/1/

Facebook 点赞按钮无法加载（宽度为 0）

Facebook like button won't load (has 0 width)

javascript

facebook

facebook-like