Question

有人可以解释为什么我的自定义Facebook分享按钮不起作用吗？每当我点击按钮时，共享窗口就不显示了。我在实际的网络服务器上尝试过它作为html文件，我已经阅读了关于分享按钮的facebook文档中的所有内容。

使用same code provided by facebook时，它确实有效。

我点击按钮后确实得到了this error。

这是我的代码。（没有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>元素。

看看这支笔 - 它当然可以正常减去应用程序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

感谢您的所有答案。它现在可以使用以下代码。

我还为它创建了codepen。

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){});
}

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

3 个答案: