我正在尝试设置一个类似的按钮。我按照官方指示,但它不会加载。检查显示它似乎没有宽度。我做了一个jsfiddle来证明这个问题。如您所见,没有任何显示:
https://jsfiddle.net/4qme8mbn/
来自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>
首先,为了在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;
}
我认为您需要像这样初始化您的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一次。它可能会帮助你
测试:
<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>