【Facebook】GoogleカレンダーをFacebookページに組み込む

意外と情報を検索するのに苦労したので、覚書です。

※Facebookの仕様はコロコロ変わるので、2015/09/16現在ということで読み進めてください。

やりたいことは、↓こういうこと。
スクリーンショット 2015-09-16 20.25.43.png

では、面倒くさい説明は抜きにして、やり方の説明です。

(1)複数のFacebookページを管理していても、ログインしている個人アカウントで、以下のサイトへアクセス
スクリーンショット 2015-09-16 20.27.36.png
Facebookページに似たような名前で同じマークが存在しますが、「アプリ」にある”Static HTML:iframe tabs”を選択します。

(2)アプリの水色ボタンをクリック
スクリーンショット 2015-09-16 20.27.48.png

(3)管理しているFacebookページを選択
スクリーンショット 2015-09-16 20.30.00.png

(4)Edit tabをクリック
スクリーンショット 2015-09-16 20.32.33.png
ちなみに、このアプリでは、複数ページ作成できます。

(5)Googleカレンダーの「設定」>「カレンダー」で追加するカレンダーを選択し、サイズなどをカスタマイズしてhtmlをコピー
スクリーンショット 2015-09-16 20.34.36.png

このとき、サイズは810×520がちょうどいいそうです。

(6)(4)のFacebookのstatic HTML設定画面に戻り、index.htmlの編集エリアに(5)でコピーしたhtmlタグをペースト
スクリーンショット 2015-09-16 20.37.26.png

(7)Previewボタンで確認して問題なければ、Save & Publishボタンで保存し、右上にある”View on Facebook”をクリックしてFacebookページに追加されたかどうかを確認
スクリーンショット 2015-09-16 20.40.57.png
Welcomeと出ているところが、static HTMLアプリで追加したページです。
これだと何のページかわからないので、タイトルや順番を修正します。

(8)まずは、位置決めで、一つ左に動かします。
スクリーンショット 2015-09-16 20.42.12.png
「タブを管理」をクリックし、タブの順番を動かします。

スクリーンショット 2015-09-16 20.42.44.png

スクリーンショット 2015-09-16 20.42.52.png
ここで一旦保存します。

左に行きましたね。
スクリーンショット 2015-09-16 20.45.44.png

(9)次に、タイトルの変更です。「もっと見る」から、タブの管理を表示し、「タブの追加・削除」をクリック
スクリーンショット 2015-09-16 20.46.28.png

アプリの一覧にstatic HTMLが表示されるので、「設定を編集」をクリック
スクリーンショット 2015-09-16 20.46.41.png

カスタムタブ名を編集し、「保存」ボタン、「OK」ボタンで保存
スクリーンショット 2015-09-16 20.47.00.png

タブの名前が変更されました。
スクリーンショット 2015-09-16 20.49.38.png

この後は、Googleカレンダーに予定を追加していくと、このFacebookのページにも反映されます。
ぜひ!!