Facebook Messengerは、ライブチャットをあなたのサイトに埋め込む最も簡単な方法です。これらのチャットは、訪問者の Facebook Messenger アカウントに接続されているため、常にアクセスすることができます。訪問者があなたのサイトに表示される内容は次のとおりです。
要件:
- Proアカウント
- HTTPSでカスタムドメインに接続されたStrikinglyのサイト(内容については、こちらでご確認お願い致します。）
- Facebookページ (作成方法）
- FacebookアプリのID (登録方法）
始めましょう！
1. Facebook App IDを取得します。
これは長い数字です。例えば、Strikingly自身のApp IDは138736958550286です。このページにあなたのApp IDが表示されます： https://developers.facebook.com/apps/
2. FacebookページのIDを取得します。
これも長い数字です。例えば、StrikinglyのページIDは211998345516663です。ページIDを見つけるには、自分のFacebookページにアクセスして、「About」タブに行き、一番下までスクロールしてください。
3. Facebookページの管理者設定で、「Messenger Platform」に移動し、ホワイトリストにドメインを追加します（httpsを使用する必要があります！）。
完了したら、「保存」をクリックしてください。こんな感じになります。
4. Strikinglyのサイトにカスタムコードを追加します。
以下のコードを「設定」→「詳細設定」→「カスタムコード」→「フッターコード」に貼り付けます。赤い太字の部分は、必ずご自身のFacebookアプリIDとFacebookページIDに置き換えてください。
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(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/en_US/sdk/xfbml.customerchat.js";;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-customerchat"
messenger_app_id="YOUR_APP_ID"
page_id="YOU_PAGE_ID"
ref="test">
</div>
5. サイトを公開します。右下にMessenger のチャットウィジェットtが表示されるはずです!😊