facebook developers 有官方文件教学怎么在 html 页面增加 分享按钮
Share Button - Social Plugins - Documentation - Facebook for Developers
举例如果要在网页加入一个 的连结
步骤 1： 包含你粉丝专页的 JavaScript SDK 一次，最好是接在开头的内文标签后。
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v12.0" nonce="yiBPDvjL"></script>
步骤 2： 将此程式码放置在你希望外挂程式显示的页面位置。
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">分享</a></div>
实测在 html 页面没有问题，但是如果贴到 react 的 js 页面就看不到 icon 得效果
踩雷一：使用 React Helmet
React Helmet 可以在 React components 写应该在 head 出现的东西，方法是用 Helmet 包起来，就会自动的放进 head
google 到有文章说要将
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v12.0" nonce="YJDXOVgP"></script>
放进 head
测试程式码如下
import React from 'react';
import { Helmet } from 'react-helmet';
export default function Test() {
return (
<div>
<div id="fb-root"></div>
<Helmet>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v12.0" nonce="dmrjeGLN"></script>
</Helmet>
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">分享</a></div>
</div>
);
}
第一次执行的时候，分享按钮 有出现，貌似问题已经解决了，但是有点不对，第一次执行都 OK，但是如果使用 react router 的 link 连到页面，分享按钮 就又不见了，只好继续 google
踩雷二：使用 useEffect
google 到最多的解法是这个，说要在 useEffect 中先 init facebook sdk
测试程式码如下
useEffect(() => {
window.fbAsyncInit = function () {
//SDK loaded, initialize it
window.FB.init({
xfbml: true,
version: 'v12.0'
});
//JS SDK initialized
window.FB.XFBML.parse();
};
//load the JavaScript SDK
(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/zh_TW/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}, []);
第一次执行 ⇒ 分享按钮有出现
react router 的 link 连到页面 ⇒ 结果和踩雷一一样，还是看不到
写了几行 log 测试一下发现这两个 function 在执行第一次都会执行，但是 react router 的 link 连回来时 init 因为执行过了，所以不会再执行，而 load 也因为 getElementById facebook-jssdk 已经存在所以不再执行
都不执行当然就不会有画面啊 !
最后方法
让 分享按钮 出现的关键其实是这一行
window.FB.XFBML.parse();
使用踩雷二的程式码，在 useEffect 的最后再增加这几行 code，确保每次 render 都会执行到
if (window.FB) {
window.FB.XFBML.parse();
}
终于每个页面都可以看到分享按钮了，问题解决 !
