Javascript 类似Facebook的按钮赢了'；t荷载（宽度为0）

我正试着设置一个类似的按钮。我遵循了官方的指示，但它不会加载。检查发现它的宽度似乎为零。我做了一个jsfiddle来演示这个问题。如您所见，没有显示任何内容：

来自JSFIDLE的代码：

<!-- 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>

（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；
js.id=id；
js.src=”http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

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

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

---

参考一下。它可能会帮助您

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

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

参考一下。它可以帮助您

测试：

<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>

（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js#xfbml=1”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

使用以下各项进行测试：

<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>

（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js#xfbml=1”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

首先，为了在JSFIDLE中加载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#xfml=1&version=v2.5（如果您已经在https上下文中）

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

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

例如：
首先，为了在JSFIDLE中加载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#xfml=1&version=v2.5（如果您已经在https上下文中）

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

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

例如：
是的，我不需要一个实际的fb应用程序或页面来为网站的url创建一个类似按钮，是吗？是的，我不需要一个实际的fb应用程序或页面来为网站的url创建一个类似按钮，是吗？这不起作用，但这不是没有版本查询的相同代码吗？更重要的变化是将协议切换到https。否则将无法加载SDK，控制台中将显示以下错误：“混合内容：位于“”的页面通过HTTPS加载，但请求了不安全的脚本“”。此请求已被阻止；内容必须通过HTTPS提供。”这不起作用，但这不是没有版本查询的相同代码吗？更重要的变化是将协议切换到https。否则将无法加载SDK，控制台中将显示以下错误：“混合内容：位于“”的页面通过HTTPS加载，但请求了不安全的脚本“”。此请求已被阻止；内容必须通过HTTPS提供。”