使用 Facebook 页面插件答案

【问题标题】：Using Facebook Page Plugin使用 Facebook 页面插件
【发布时间】：2015-10-21 04:41:31
【问题描述】：

在尝试使用 Facebook 的 Page Plugin 创建一个小型 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 file://connect.facebook.net/en_US/sdk.js net::ERR_FILE_NOT_FOUND

解决方案：在 sdk 的路径前添加“https://”。导致以下行发生了变化：

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

但是，这会导致错误不再被抛出，但插件显示（实际的小部件）仍然没有显示。或者更确切地说，没有显示任何内容。

我试过了：

删除路径末尾的“#xfbml=1&version=v2.5”
更改 id 为“fb-root”的 div 的位置
更改脚本的位置（在各种元素之前和之后）
使用多个浏览器
使用this question 中的所有潜在解决方案

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

【问题讨论】：

首先，您需要在通过HTTP(S)浏览的网站上使用该代码，否则//connect.facebook.net/形式的SDK引用将不起作用。您是否仅在浏览器中本地查看您的页面，通过文件系统打开？在这种情况下，SDK 可能无法工作（即使您修复了地址问题）——请尝试将页面上传到（本地）Web 服务器并通过 HTTP(S) 访问。
@CBroe 感谢您的输入，我尝试将文件上传到 Web 服务器并以这种方式查看它，令人惊讶的是，它成功了。但是，您能否向我解释一下为什么会发生这种情况以及为什么从本地文件系统打开文件时无法访问 SDK（即使链接前面有“https：”）。再次感谢。
SDK 可以“访问”，但它可能无法正确检查其他内容——例如当前在浏览器中登录 Facebook 的用户。（如果您要为其显示插件的 FB 页面尚未发布，或以其他方式限制访问，则登录的用户很重要。）

标签： javascript facebook

【解决方案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/，您将看到您的索引页面。

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

【讨论】：

代码一切正常，唯一的问题是它不在网络服务器上。 Xampp 效果很好。谢谢。

【解决方案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>

【讨论】：