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のPage IDは211998345516663です。ページIDを探すには、Facebookページに移動し、次の手順に従います:
- ページのカバー写真の下にある「About」タブをクリックし、次に「Page transparency」をクリックします。
- 「See all」をクリックし、次に「Go to Ad Library」をクリックします。
- ブラウザのアドレスバーにあるview_all_page_id=を見つけます。この直後の数字があなたのPage IDです。
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が表示されるはずです!
お困りの際は、support@strikingly.com までご連絡いただくか、チャットでお問い合わせください。