在本地实施和测试 Facebook 社交插件答案

【问题标题】：Implementing and testing Facebook Social Plugins locally在本地实施和测试 Facebook 社交插件
【发布时间】：2012-01-27 15:13:32
【问题描述】：

我是 Facebook 开发新手，想在我的网站上添加一个 cmets 插件。
我在 Facebook 上创建了一个应用程序，以备不时之需。但由于我还没有注册我的域，所以我将App Domain 部分留空。
然后我复制了给我的代码：http://developers.facebook.com/docs/reference/plugins/comments/ 来测试插件。但是当我在一个 html 文件中测试代码时，什么也没有出现。

是否需要 appid 才能使用 cmets 插件？
如果我需要appid，我应该先购买一个域名并将其添加到App Domain部分吗？我可以用example.com url 测试插件吗？
一般来说，让 cmets 插件工作的最基本方法是什么？

更新：根据 Lix 的回答，我编辑了我的 hosts 文件并添加了：

127.0.0.1 www.example.com
127.0.0.1 example.com
127.0.0.1 http://www.example.com
127.0.0.1 http://example.com

这是我的测试页面：

<html>
<head>
  <title>My Web page</title>
</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/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
</html>

但还是没有运气。

【问题讨论】：

标签： html facebook facebook-social-plugins facebook-comments

【解决方案1】：

据我所知，您确实需要一个应用程序来使用评论插件（我相信用于审核功能）。如果您查看评论框的 code Facebook generates，您会看到它有一个 App Id：

<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/all.js#xfbml=1&appId=MY_APP_ID"; // <-- here
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

要让您的应用在本地正常运行，您需要设置一个虚拟主机。我通常用http://website1.dev 之类的名称设置它们。

部分，正如 Lix 所提到的，将域添加到您的 hosts 文件以解析到您的本地主机 (127.0.0.1)。

另一个部分是在您的本地 Web 服务器上为您的网站创建一个虚拟主机。这样，您实际上是在浏览器中以http://example.com 而不是localhost/example.com 访问本地站点。有很多关于如何设置 Apache 来执行此操作的好文章，这里有两篇：

然后，确保您的 Facebook 应用的管理员设置正确设置为允许 http://example.com 域。当您设置应用程序“网站”时，您必须指定“网站 URL”。您还可以将新的本地域添加为应用“应用域”。

祝你好运！

【讨论】：

因此应用 id 是管理目的所必需的。感谢您有见地的回答:)

【解决方案2】：

您可以做的是编辑您的主机文件以包含您的“假”本地域并将该值放在那里。

【讨论】：

请您详细说明一下。（我知道主机文件。但我不明白你的意思）
是否可以仅使用 example.com 对其进行测试？就像他们在developers.facebook.com/docs/reference/plugins/comments 上所做的那样？
确定是的。您所要做的就是让您的本地计算机认为 example.com 存在。将其指向 127.0.0.1
还是没有运气。更新了我的问题。
对我来说是一个愚蠢的错误。将 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 重命名为 js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; 因为我是在本地打开 html。