自定义 Facebook 分享按钮不起作用答案

【问题标题】：Custom Facebook share button does not work自定义 Facebook 分享按钮不起作用
【发布时间】：2018-03-13 16:35:07
【问题描述】：

谁能解释为什么我的自定义 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>

【问题讨论】：

标签： javascript html css facebook facebook-graph-api

【解决方案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)

【讨论】：

虽然推荐异步方式，但他使用的是同步版本的js sdk，所以不需要FB.init。
感谢您的帮助。我已经实现了它，但它仍然无法正常工作，我还添加了一个自己的 appID。不幸的是，在添加 appID 时，甚至 codepen 都不起作用。
应用程序 ID 不起作用，因为它没有被授权在 codepen.io 域上运行，而且我实际上已经删除了异步初始化 - 并且不小心点击了保存。我把它放回去了，所以弹出部分仍然可以再次工作
它现在可以工作了，但有没有一种方法可以创建自定义共享按钮，而无需为每个网站注册一个 appID？ @luschn
@AlexanderHoerl 看看我的回答，我已经提供了一些更多的细节。此外，如果您也只在 url 中添加应用程序 ID，它也适用于您的代码。

【解决方案2】：

尝试在 JS SDK 源中添加版本和 App ID：

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>

【讨论】：

【解决方案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){});
}

【讨论】：