Question

我正在尝试在最近升级到SSL的域上的网页上实现类似Facebook的按钮。 Facebook提供的示例代码对我不起作用。尝试使用Facebook的按钮代码时，我不断收到此错误：

无法在'DOMWindow'上执行'postMessage'：目标原点提供的（http://mywebsite.com）与收件人窗口不匹配 origin（https://mywebsite.com）

我在整个项目中彻底清除了所有http://引用，所以我有点难过。我找到了一个帖子，表明我遇到的问题可能与页面完全加载之前运行的代码有关。考虑到这一点，我想延迟运行JavaScript，直到加载页面。

所以我们假设他们希望我将此代码放在<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.10";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

然后我将我的按钮放在页面的某个位置：

<div class="fb-like" data-href="https://www.facebook.com/MyPage/" data-width="100" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>

如何将他们希望我嵌入<body>标记正文的JavaScript移动到我的script.js文件中？我尝试过这个，但是我对jQuery有点生气，所以我想看看我是否弄清楚我正在尝试做什么（剧透：我可能是）：

(function($) {
  $(".fb-like").loaded(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.10";
    // also tried adding https: in front of it, like so
    // js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'))
})

更新

根据评论，我在Facebook开发者门户网站上创建了一个应用程序，将其归类为“商业”并公开启用。

根据Facebook的说明，我将以下JavaScript代码放在<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.10&appId=XXXXXXXXXXXXXXX";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

我还清理了我放在scripts.js文件中的代码，以便所有类似按钮的代码都在html页面上。

我将按钮放在<body>标签内标记的可见部分内。我检查了按钮的宽度没有设置为零。我刷新了页面，我浏览了浏览器缓存（Safari和Chrome）。

如果我在浏览器中输入 https ：//mywebsite.com/my-page-with-like-button.html，我仍然会收到此错误：

无法在'DOMWindow'上执行'postMessage'：目标原点提供的（http://mywebsite.com）与收件人窗口不匹配 origin（https://mywebsite.com）

......什么也没出现。

如果我在浏览器中输入 http ：//mywebsite.com/page-with-like-button.html，页面加载时没有错误，但是没有出现类似按钮

任何想法：我非常感激。我最后一次这样做，这是一个5分钟的项目。现在，我正在第2天摆弄它。

Answer 1

在某种程度上回答有关如何将FB脚本添加到外部js文件的问题。 这是一个最佳猜测方案; 您可以尝试按照示例中的方式添加它：

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

我相信在<div>按住“赞”按钮之前，仍然需要包含此内容。如果你在该文件中有其他js，这应该在你拥有的任何其他JS的顶部和外部。例如：

(function(d,s,id){ /* FB script */}(document, 'script', 'facebook-jssdk'));
(function($){ /* your other JS */ })(jQuery);

这纯粹是猜测，而不是推荐的FB官员＆＃39;办法。因此，只要您可以在<body>元素之后的js文件中添加所需内容，那就应该有效。我还假设您在HTML文件中也需要正确的标记，这也意味着：

<body>
<div id="fb-root"></div>
<script src="yourJsFileWithFB.js"></script>
.... 
..... 
<div class="fb-like"></div>
... 
.....
</body>

加上示例HERE

中提到的like按钮上引用的所有数据属性

将Facebook Like Button JavaScript移动到jQuery脚本文件

1 个答案: