facebook - 网页中的“赞”和“分享”按钮会导致 javascript 警告和 php 错误

Question

我使用直接从 Facebook 开发人员页面复制的代码向网页添加了基本的 Facebook“喜欢/分享”按钮。代码分为两部分:一个 javascript block 和一个带有类“fb-like”的 div 标签继承 javascript:

<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 标签:

<div class="fb-like" data-href="http://www.bethcake.com" data-width="90" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>

以下是我遇到的问题:

1. 当网页加载时，我收到 2 条 javascript 警告。警告指的是 connect.facebook.net 源代码第 233 行，而不是我编写的任何代码。它们是:

   • 无效的应用程序 ID:必须是代表应用程序 ID 的数字或数字字符串。
   • 在调用 FB.init() 之前调用 FB.getLoginStatus()。

2. 同样在页面加载时，我收到一个 php 错误 (like.php.1:948):

   • 阻止了来源为“http://www.facebook.com”的框架访问来源为“http://www.bethcake.com”的框架。协议(protocol)、域和端口必须匹配。

   这个错误令人费解。首先，我没有使用框架。其次，协议(protocol)确实匹配，这里没有关于端口的内容。当然，域不匹配:我不是要为 Facebook 页面收集“赞”；我想获得外部网站页面的“赞”。我错过了什么吗？

3. 我通过 Facebook Open Graph Object Debugger 运行了 URL。它提出了一些我不明白的警告。它们是:

   • fb:admins 和 fb:app_id 标签丢失。
   • og:title、og:type 和 og:image 丢失。
   • 应明确提供 og:url、go:title、go:description 和 go:image 属性

好的，好的。但是我应该在哪里以及如何添加这些？我查看了 Facebook 文档并搜索了 stackoverflow，但没有成功。如果这些应该被添加到 div 标签中的 data-href 字符串中，请给我一个例子。

Answer 1

我收到了与您在第一期中提到的相同的 javascript 警告，并将 appId 参数添加到 Facebook 代码中的 URL 解决了这两个问题。所以只需更改这一行:

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

到

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1234567891234567";

要获取 facebook appId，请转到: https://developers.facebook.com/apps