javascript - 在 React 应用程序中集成 fb 分享功能

Question

我想在我的网站中集成共享功能。根据文档https://developers.facebook.com/docs/sharing/reference/share-dialog/，为了整合我需要做这样的事情：

<h1>Sharing using FB.ui() Dialogs</h1>

<p>Below are some simple examples of how to use UI dialogs in a web page.</p>

<h3>Sharing Links</h3>

<div id="shareBtn" class="btn btn-success clearfix">Share Dialog</div>

<p>The Share Dialog enables you to share links to a person's profile without them having to use Facebook Login. <a href="https://developers.facebook.com/docs/sharing/reference/share-dialog">Read our Share Dialog guide</a> to learn more about how it works.</p>

<script>
document.getElementById('shareBtn').onclick = function() {
  FB.ui({
    display: 'popup',
    method: 'share',
    href: 'https://developers.facebook.com/docs/',
  }, function(response){});
}
</script>

我做了这个：

function App() {

    const fbstart = () => {
        FB.ui({
            display: 'popup',
            method: 'share',
            href: 'https://developers.facebook.com/docs/',
        }, function (response) {
        });

    }
    return (
        <div className="App">
            <div id="shareBtn" className="btn btn-success clearfix">Share Dialog</div>

            <p>The Share Dialog enables you to share links to a person's profile without them having to use Facebook
                Login. <a href="https://developers.facebook.com/docs/sharing/reference/share-dialog">Read our Share
                    Dialog
                    guide</a> to learn more about how it works.</p>
            <button onClick={fbstart}>Click</button>
        </div>
    );
}

export default App;

但是，我应该从哪里导入FB变量，因为我得到了我的项目中没有的错误FB。
问题：如何在反应应用程序中正确集成此功能？

标签： javascriptreactjs

Answer 1

您需要在程序中包含FB SDK：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v8.0'
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

另请注意，您需要一个 Faceboo AppId。如果您还没有制作应用程序，您可以通过访问developers.facebook.com并单击我的应用程序来完成