網站安裝 Facebook Messenger 客服聊天室 - 2019

上週在 Blog 增加一個 Facebook Messenger 的工具，可以來做即時的客服 或 留問題 等等使用，還蠻有趣的，只是這個也有點尷尬的地方，量小感覺沒什麼用，量大又沒人力可以負擔... XDDDD

網站安裝 Facebook Messenger 客服聊天室

在網站想要安裝 Facebook Messenger 很簡單，只要準備 「Facebook 粉絲團」 和 「粉絲團的page_id」 就好

• Facebook 粉絲團：$FB_FANS
• Facebook 粉絲團的 Page_id：$FB_FANS_ID

註：不知道粉絲團 Page_id 在哪邊，可以使用下述方式看看：

1. 連到 https://www.facebook.com/$FB_FANS/
2. 滑鼠右鍵→檢視原始碼
3. Ctrl + F 搜尋 page_id 就可以了
4. 註：因為正規方法和 FB 論壇提供的方法都找不到，所以上述是我自己找的方式

申請 Facebook Messenger Chat

• 官方說明頁面：顧客洽談外掛程式（測試版） - Messenger 平台
• 申請與設定頁：https://www.facebook.com/$FB_FANS/settings/?tab=messenger_platform

在粉絲團的設定頁面裡面，全部設定完成後，會取得下述程式碼：(請自行換掉 $FB_FANS_ID，或者取得官方最新版的 Code)

<!-- Load Facebook SDK for JavaScript -->

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
        xfbml : true,
        version : 'v3.2'
    });
};

(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 = 'https://connect.facebook.net/zh_TW/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
    attribution=setup_tool
    page_id="$FB_FANS_ID">
</div>

這段程式碼只要放在頁面的 </body> 之前，就可以自己產生 Facebook Messenger 囉~

• 註：需要在自己允許的 Domain 才會呈現出來

至於 WordPress 的話，Facebook 官方提供 Plugin 可以直接安裝使用。

• Facebook 官方提供的 WordPress Plugin(於外掛搜尋「Messenger Customer Chat」)：Messenger Customer Chat