Question

在尝试使用Facebook的页面插件创建一个小型portlet以显示公司页面的更新时，我遇到了各种错误。其中最大的插件显示只是没有出现。

这是我的代码（直接从facebook上复制和粘贴，除了html标签）：

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

        <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="true" 
        data-show-posts="true"><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>
    </body>
</html>

控制台中的

错误抛出：GET文件：//connect.facebook.net/en_US/sdk.js net :: ERR_FILE_NOT_FOUND

解决方案：添加＆＃39; https：//＆＃39;通往斯德哥尔摩的道路。导致以下行改变：

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

但是，这会导致错误不再被抛出，但插件显示（实际的小部件）仍未显示。或者更确切地说，正在显示NOTHING。

我试过了：

删除＆＃39;＃xfbml = 1＆amp; version = v2.5＆＃39;在路径的尽头
使用ID＆f 39-root＆＃39;
更改脚本的位置（各种元素之前和之后）
使用多个浏览器
使用this问题

我发现很难相信来自Facebook开发者网站本身的示例代码本身不会起作用，并且想要解释一下我做错了什么。

Answer 1

我已编辑此答案以使其更好。

首先，确保您嵌入了自己的页面，而不是Facebook的......

而不是：

...
<div class="fb-page" data-href="https://www.facebook.com/facebook" ...
...

..你的代码将是这样的：

<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_GB/sdk.js#xfbml=1&version=v2.5";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- your content -->
    <div class="face">
        Here is the div or section where you want to place your Facebook snippet.
        <br>
        <div class="fb-page" data-href="https://www.facebook.com/YOURPAGE" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/YOURPAGE"><a href="https://www.facebook.com/YOURPAGE">YOUR PAGE TITLE</a></blockquote></div></div>
    <!-- your content -->
</body>

保留所提供的代码，不需要更改，如果您愿意，请确保在Facebook's code gen执行此操作。

然后，您需要一台本地服务器才能查看结果，例如Mampp或Xampp。否则，只有在将页面上传到Web服务器时才会看到它正常工作。

安装Xampp后，您唯一需要做的就是将您的网站根文件夹添加到名为htdocs的文件夹中。这是你的localhost。您想要创建的每个网站，我建议您在此文件夹中执行此操作，这样您就可以完全看到Web浏览器显示的内容。

假设您的网站根文件夹名为example，它位于htdocs Xampp文件夹中。您在Xampp中转向Apache on并转到浏览器并输入localhost/example/，您将看到索引页。

希望它有所帮助！如果是，请将答案标记为正确或有用！谢谢;）

Answer 2

万一你还有这个问题，请使用此代码，facebook代码似乎在我的博客上出错，直到我使用下面的代码行为这个网站。 http://www.HipHopLevel.net

<div id='fb-root'/>
<script>//<![CDATA[
(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&appId=YOUR APP ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]></script>

使用Facebook页面插件

2 个答案: