先日、運営しているJimdoサイトにFacebookメッセンジャーの機能を利用した吹き出しアイコンを設置してみました。画面の右下に、赤い吹き出し型のアイコンがあるのがわかりますでしょうか？

これをつけておくと、Facebookのメッセンジャーで新規の方とのやり取りができるようになります。相手もFacebookアカウントを持っていないと会話ができませんが、ちょいと便利なので、導入方法を書いておきます。Facebookページを開設しておいてくださいね。

JimdoサイトにFacebookメッセンジャーアイコンを設置する方法

(１）まずは下記のページへアクセスします。
（★★★★★★★の部分は、自身で管理しているFacebookページのIDを入れる）

https://www.facebook.com/★★★★★★/settings/?tab=messaging&ref=page_edit
私の場合は、https://www.facebook.com/websupporter/settings/?tab=messaging&ref=page_edit
です。

このような画面が開くので「ウェブサイトにMessengerを追加」をクリックします。

(2)この画面が出たら「次へ」をクリックします。

(3)あいさつ文などを変更しましょう。終わったら「次へ」をクリック

(4)次の画面では吹き出しアイコンのカラーなどを変えることができます。好みの色を設定しましょう。終わったら「次へ」をクリック。

(5)この画面では、自分のホームページアドレスを入力し、画面右側に表示されているソースコードをコピーします。

最後に「完了」をクリックしてFacebook側の設定は終わりです。

JimdoにFacebookメッセンジャーコードを設定しよう

(1)Jimdoにログインしてください。フッターあたりで「コンテンツを追加」から「ウィジェット/HTML」を選択します。

(2)さきほどコピーしたコードを貼り付けます。終わったら右下の「保存」をクリック。

※貼り付けたコードはこちら

<!– Load Facebook SDK for JavaScript –>
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : ‘v5.0’
});
};

(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/ja_JP/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=”139453956124607″
theme_color=”#fa3c4c”
logged_in_greeting=”ご質問などがあればお気軽にどうぞ！”
logged_out_greeting=”ご質問などがあればお気軽にどうぞ！”>
</div>