Question

所以我正在创建这个网页，我正在尝试将Facebook小部件包含在类似按钮和页面显示中，但两者都不会显示在我的页面上。我已经包含来自其他网站（Instagram和Twitter）的小部件工作得很好，但FB不会出现。类似按钮完全不存在（虽然当我在应该的位置绘制红色边框时，它有很大的空间），页面显示只显示链接到页面本身的文本链接。这是我包含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开发页HERE

中找到更多帮助

Answer 2

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

在我的个人网络服务器上运行的代码的屏幕截图：
enter image description here

Answer 3

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

FB小部件都不在我的HTML页面上工作（如按钮和页面显示）

3 个答案: