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

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

无法在"DOMWindow"上执行"postMessage"：目标来源前提是 (http://mywebsite.com( 与收件人窗口的原产地 (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( 与收件人窗口的原产地 (https://mywebsite.com(

。什么也没出现。

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

任何想法：我搞砸了什么，非常感谢。我上一次这样做，是一个5分钟的项目。现在，我在摆弄它的第二天。

在某种程度上回答您关于如何将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官方"方式。因此，只要您可以在<body>元素之后的 js 文件中添加所需的内容，这应该可以工作。我还假设您在 HTML 文件中也需要正确的标记，这意味着：

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

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

相关内容

最新更新

热门标签：