自定义Facebook共享按钮不起作用

Question

有人可以解释为什么我的自定义Facebook分享按钮不起作用吗？ 每当我单击按钮时，共享窗口就不会显示。 我已经在实际的Web服务器上尝试将其作为html文件使用，并且已经阅读了Facebook文档中有关“共享”按钮的所有内容。

当使用facebook提供的相同代码时，它确实起作用。

我确实会在单击按钮时收到此错误 。

这是我的代码。 （没有CSS，因为它还有更多，如果需要，我可以添加它。）

<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1"></script>

<div class="page-header">
  <h1>Share Dialog</h1>
</div>
<p>Click the button below to trigger a Share Dialog</p>
<button class="fill" id="fb-share-button">Share on Facebook</button>

<script>
document.getElementById('fb-share-button').onclick = function() {
  FB.ui({
    method: 'share',
    display: 'popup',
    href: 'https://nureinberg.de',
  }, function(response){});
}
</script>

Answer 1

您需要初始化FB SDK，

这包括FB.init函数，并具有<div id="fb-root"></div>元素。

签出这支笔-当然可以，减去App​​ ID即可，但是弹出部分有效：

https://codepen.io/xhynk/pen/MVKerM

我还将版本ID添加到了sdk.js脚本（ https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7 ）

Answer 2

尝试将版本和App ID添加到JS SDK源：

https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=<your-app-id>

虽然，我建议使用异步方式来加载JS SDK： https : //developers.facebook.com/docs/javascript/quickstart

如果您不想创建一个应用程序，请使用带有标准锚标记的sharer.php：

https://www.facebook.com/sharer/sharer.php?u=<encoded-url>

Answer 3

感谢您的所有答复。 现在，它可以与以下代码一起使用。

我还为此创建了一个代码笔 。

window.fbAsyncInit = function() {
  FB.init({
    appId      : 'your-app-id',
    cookie     : true,
    xfbml      : true,
    version    : 'v2.7'
  });

  FB.AppEvents.logPageView();

};

document.getElementById('fb-share-button').onclick = function() {
  FB.ui({
    method: 'share',
    display: 'popup',
    href: window.location.href,
  }, function(response){});
}