Facebook like 按钮以 0 宽度和 0 高度呈现？答案

【问题标题】：Facebook like button rendered with 0 width and 0 height?Facebook like 按钮以 0 宽度和 0 高度呈现？
【发布时间】：2017-06-14 19:23:20
【问题描述】：

我是 facebook api 的新手，所以我不知道这是否是一个新手问题。我所做的是我关注Quick Start

我把下面的 sn-p 放在<body> 的打开标签上（当然替换了 my-app-id）

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.3'
    });
  };

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

并且我在希望出现点赞按钮的地方有以下 sn-p：

<div
  class="fb-like"
  data-send="true"
  data-width="450"
  data-show-faces="true">
</div>

这是渲染的结果：

<div class="fb-like fb_iframe_widget" 
     data-send="true" 
     data-width="450" 
     data-show-faces="true" 
     fb-xfbml-state="rendered" 
     fb-iframe-plugin-query="...">
    <span style="vertical-align: top; width: 0px; height: 0px; overflow: hidden;">
        <iframe name="f246b6fae4" width="450px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like Facebook Social Plugin" src="..">...</iframe>
    </span>
</div>

我省略了查询和 src 部分。我不明白为什么它以 0 宽度和 0 高度呈现。父 div 和 self div 的样式都没有隐藏。请告诉我我做错了什么？

【问题讨论】：

请展示一个实际的、可测试的/现场示例，不要省略可能至关重要的部分。
您能否提供指向您的“赞”按钮的链接？这将使您更容易查看您是否做错了什么。
您是否可以在页面的隐藏部分呈现它？请参阅此相关问题：http://stackoverflow.com/questions/12291017/facebook-like-buttons-not-displaying-when-loaded-hidden。
您找出问题所在了吗？我也面临同样的问题...
Facebook Like button not displaying/showing in any browser的可能重复

标签： javascript html facebook

【解决方案1】：

不看完整代码很难给出答案，但可能是因为以下原因：

您使用的是 http 而不是 https，因此，Facebook 不允许您的请求通过。运行脚本会在运行时在浏览器控制台中出现以下错误：

混合内容：“https://jsfiddle.net/v98vq53r/”处的页面通过 HTTPS 加载，但请求了不安全的脚本“http://connect.facebook.net/en_US/sdk.js”。此请求已被阻止；内容必须通过 HTTPS 提供。

【讨论】：

一定是评论而不是回答。
啊，我明白了，@geminiousgoel 非常感谢您的反馈。看来我需要 50 声望才能评论其他人的问题，这就是为什么我无法评论他的问题。
如果您在答案中发布直接链接，它将转换为评论。您可以阅读文档。我不是在捏你，只是分享目的。