FB小部件都无法在我的HTML页面上使用（如按钮和页面显示）

Question

因此，我正在制作此网页，并尝试为“喜欢”按钮和页面显示添加Facebook小部件，但都不会显示在我的页面上。 我包括了来自其他站点（Instagram和Twitter）的小部件，这些小部件工作正常，但FB不会显示。 完全不存在like按钮（尽管当我在应该放置的地方绘制红色边框时，它的空间很大），并且页面显示中仅显示了链接到页面本身的文本链接。 这是我包含FB小部件的代码：

<body id="background">

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

<div class="toolbar">
    <input id="input" type="email" placeholder="Join our mailing list!">
    <input id="submit" type="submit">
    <div class="fb-like" data-href="https://facebook.com/xuanrongmusic" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
    <a href="https://twitter.com/XuanRkRong" class="twitter-follow-button" data-show-count="false">Follow @XuanRkRong</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
...
</body>

我尝试制作FB AppID，但可能做错了，对此过程有些困惑...

也不确定这是否重要，但是我正在离线测试我的网站...

谢谢你的帮助！

Answer 1

您是否缺少HTML部分？ 并且您需要有一个appId：

connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.4&appId=XXXXXXX";


<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-show-posts="false">
  <div class="fb-xfbml-parse-ignore">
    <blockquote cite="https://www.facebook.com/facebook">
       <a href="https://www.facebook.com/facebook">Facebook</a>
    </blockquote>
  </div>
</div>

你可以在Facebook的页面开发更多帮助这里

Answer 2

您的代码确实有效。 如果要在本地计算机或沙盒iframe（即jsFiddle或codepen）中测试文件，它似乎似乎无法正常工作。 html文件需要上载到Web服务器才能正常工作。

在我的个人Web服务器上工作的代码的屏幕截图：
在此处输入图片说明

Answer 3

我遇到了同样的问题-只有指向FB页面的链接才会显示在我的WordPress网页上，而不显示这些选项。 无论我在何处插入javascript，这都在具有任何WordPress主题的三种不同的浏览器中发生。 然后，我发现该插件在手机的浏览器中正确显示，并意识到问题出在笔记本电脑上安装的Disconnect应用程序阻止了社交媒体连接。 当我在一个浏览器的“断开连接”中将我的网站列入白名单后，该网站在所有浏览器中都可以正常显示。

FB小部件都无法在我的HTML页面上使用（如按钮和页面显示）

问题描述

3 个解决方案

解决方案1
0 2015-07-27 17:23:31

解决方案2
0 2015-07-27 18:00:23

解决方案3
0 2015-07-27 23:26:36

FB小部件都无法在我的HTML页面上使用（如按钮和页面显示）

问题描述

3 个解决方案

解决方案1 0 2015-07-27 17:23:31

解决方案2 0 2015-07-27 18:00:23

解决方案3 0 2015-07-27 23:26:36

解决方案1
0 2015-07-27 17:23:31

解决方案2
0 2015-07-27 18:00:23

解决方案3
0 2015-07-27 23:26:36