Facebook的按钮呈现0宽度和0高度？ [英] Facebook like button rendered with 0 width and 0 height?
问题描述
我是facebook api的新手，所以我不知道这是否是一个新手问题。我所做的是在快速入门之后遵循的
I am new to facebook api, so I don't know if this is a newbie question. What I did is I followed after Quick Start
我将以下代码片段放在< body> 的开放标签（当然，替换了我的app-id） p>
I put the following snippet at the open tag of <body> (with my-app-id replaced, of course)
<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>
我在我想要的按钮出现的地方有以下片段：
and I have the following snippet at the place where I want the like button to appear:
<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高度。 parent和self div都不是隐藏的样式。请告诉我我做错了什么？
I omitted the query and src part. I don't understand why it rendered with 0 width and 0 height. Both parent and self div are not styled to hidden. Please tell me what am I doing wrong?
推荐答案
很难在没有看到整个代码的情况下给出答案，但可能是因为以下原因：
It's hard to give an answer without seeing the entire code, but it may be because of the following:
您正在使用http而不是https，因此，Facebook不允许您的请求通过。运行脚本会在运行时在浏览器控制台中发生以下错误：
You are using http instead of https and due to this, Facebook is not allowing your request to go through. Running your script gives the following error in the browser console upon running:
混合内容：页面位于 https：// jsfiddle .net / v98vq53r /'通过HTTPS加载，但请求了一个不安全的脚本 http://connect.facebook.net/en_US/sdk.js '。此请求已被阻止;内容必须通过HTTPS提供。
Mixed Content: The page at 'https://jsfiddle .net/v98vq53r/' was loaded over HTTPS, but requested an insecure script 'http://connect.facebook.net/en_US/sdk.js'. This request has been blocked; the content must be served over HTTPS.
这篇关于Facebook的按钮呈现0宽度和0高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
