在div中添加facebook like按钮无效

时间:2015-05-17 17:58:43

标签: javascript html facebook

我正在尝试在div中添加类似按钮的facebook,但它无效。

我已经包含了facebook提供的javascript sdk。这是关于添加按钮http://i.imgur.com/42iLPDy.jpg的Facebook说明,下面是我的代码:

body {
    margin:0px;
    padding:0px;
}
#wrapper {
    width: 100%;
    height: 50px;
    background-color: black;
}
<!DOCTYPE HTML>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <div id="wrapper">
        <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

由于以下代码行,我认为您需要在Web服务器上进行测试:

js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";

*更新:即使你在//前添加http:,它也不会在本地工作。我刚刚使用您的代码上传了一个测试页面到我的主机帐户,按钮显示得很好。

* Update2:此链接解释了为什么Facebook需要托管网站而不是本地网站才能使用此按钮:How do I test the Facebook "Like" button on localhost?

答案 1 :(得分:0)

我可以看到你没有做错任何事。尝试在脚本之前添加以下内容:

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

然后你想要代码

  <div
        class="fb-like"
        data-share="false"
        data-width="20"
        data-show-faces="false">
    </div>