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();
}
終於每個頁面都可以看到分享按鈕了，問題解決 !
