2021 年 4 月 1 日
アットホーム株式会社「自治体専用ページ」に Facebook ページを表示する方法。
アットホーム 空き家バンクの「自治体専用ページ」では、同ページ左側の「Menu」エリア（サイドメニュー）に、自治体さま独自のメニューを設定・表示することができます。
「サイドメニュー」には Facebook ページの埋め込み表示ができます。

自治体さまがすでにお持ちのFacebook ページをメニューに埋め込み、表示します。
※弊社ではアカウント作成はサポートしておりません。

1 / 102021 年 4 月 1 日
アットホーム株式会社◆事前設定□Facebook のホームページを開く
自治体さまの Facebook ページを「自治体専用ページ」に表示するためには、Facebook が提供しているホームページから HTML コードを取得する必要があります。
以下のページを参照していただき、HTML コードを取得してください。
＜ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - 開発者向け Facebook＞
https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP※上記の URL はパソコンによってセキュリティの警告が出ることがありますが「許可」で続行してください。

上記のページを開くと以下のような画面が出てきます。

画面が表示されたら下へスクロールして下さい。

次ページへ

2 / 102021 年 4 月 1 日
アットホーム株式会社□必要事項を入力する
画面をスクロールすると以下のような入力項目が現れますので必要事項を入力します。
①②③④⑤⑥⑦⑧⑨※入力項目の説明① Facebook ページの URL：自治体さまの運営する Facebook ページの URL を入力します。
② タブ：表示する内容を選択します。デフォルトの「timeline」のままで大丈夫です。
③ 幅：「自治体専用ページ」に表示する幅を設定できます。入力しなくても大丈夫です。
④ 高さ：「自治体専用ページ」に表示する高さを設定できます。入力しなくても大丈夫です。
⑤ スモールヘッダーを使用：チェックを入れるとヘッダーが小さく表示されます。
内容部分を広く表示したい場合はチェックを入れます。
⑥ plugin container の幅に合わせる：表示幅の自動調整です。チェックを入れます。
⑦ カバー写真を非表示にする：チェックを入れると一番上に表示しているカバー写真を表示しません。
3 / 102021 年 4 月 1 日
アットホーム株式会社⑧ 友達の顔を表示する：チェックを入れると「いいね」をした友達の Facebook の顔写真が表示されます。チェックを外してください。
⑨ 表示イメージ（プレビュー）です。上記の⑤~⑧の設定をするとリアルタイムでプレビューが表示されるので設定内容を確認しながら決定していきます。

4 / 102021 年 4 月 1 日
アットホーム株式会社□「自治体専用ページ」 に設定するコードを取得する
設定が終了したら、少し画面を下へスクロールすると「コードを取得」ボタンが出てきますので、こちらをクリックします。

「コードを取得」をクリック。

「コードを取得」をクリックすると以下のようにコードが表示されます。
STEP１部分のコードをコピーしてメモ帳などに保存してください。

STEP3（もしくはSTEP2）部分のコード
IE の場合は STEP2 とを表示されます。

コピーして STEP１とは別にメモ帳などに保存してください。
表示されたコードを「自治体専用ページ」に登録するので、コピーして「メモ帳」などに張り付けてください。
STEP1 と STEP3（もしくは STEP2）で登録する場所が異なるので、それぞれがわかるように保存をしてください。
（ファイル名でそれぞれ「STEP1」などとつけて保存するとわかりやすいです。
）
ここまでで Facebook の操作は終了です。Web ページを閉じて次ページの「アットホーム空き家バンク 「自治体専用ページ」の設定」へお進みください。
5 / 102021 年 4 月 1 日
アットホーム株式会社◆アットホーム 空き家バンク 「自治体専用ページ」の設定□アットホーム 空き家バンク のコントロールパネルにログイン「自治体専用ページ」 の設定をするためにコントロールパネルへログインします。
【コントロールパネル】
https://mng.akiya-athome.jp/manage/login/1/

開設時にお伝えしている ID／Password でログインしてください。
ログイン ID／Password を紛失された場合は以下までお問い合わせください。
アットホーム 空き家バンク 相談窓口
E-mail: akiya_soudan@athome.co.jp

ログインして次ページへ

6 / 102021 年 4 月 1 日
アットホーム株式会社□ホームページ設定から事前準備で取得した STEP1 のコードを設定する
ログイン後、ホームページ⇒ ホームページ設定を開きます。

スクロール「ホームページ設定」画面を少し下へスクロールして「アクセス解析設定」を表示します。
先ほどメモ帳などで保存した「STEP1」を開いて、コードをコピーして「アナリティクスコード設定（body）」に貼りつけます。

7 / 102021 年 4 月 1 日
アットホーム株式会社

ここに STEP１の内容を貼りつけ貼りつけたら「登録確認」□メニュー設定から事前準備で取得した STEP3 のコードを設定する。
ログイン後、ホームページ⇒ メニュー設定 を開きます。

【コントロールパネル】【メニュー設定画面】

表示順確認後「新規登録」※表示順の確認方法については次ページに記載しています。

次ページへ
8 / 102021 年 4 月 1 日アットホーム株式会社＜注意事項＞（表示順の確認について）
メニュー設定画面では、「ヘッダー」「サイド」「フッター」に表示されているメニューが一覧で表示されています。
今回、FaceBook ページを埋め込むのは「サイド」のため、「表示配置」列が「サイド」になっているメニューの「表示順」列（一番右）が何番まで使用されているか予め確認してください。
このあと、FaceBook ページ埋め込み用のサイドメニューを登録する際に、他のメニューの「表示順」と重ならないように設定する必要があります。

例）
以下のように登録されている場合、「サイド」が１~6 まで登録されているため、メニューの一番下に表示する場合、表示順を「7」で登録してください。以下の例でアットホーム
リンクの上に入れたい場合は、「アットホームリンク」の表示順を使用されていない「7」以降に変更してから表示順「6」で登録します。

「サイド」に１~6 が登録されているため 7 を使用する。

表示配置「サイド」が対象
表示順の確認をしたら次ページへ9 / 10

2021 年 4 月 1 日
アットホーム株式会社【メニューデータ設定画面】

①②
③④⑤
⑥
⑦⑧
⑨

「事前設定」の「「自治体専用ページ」 に設定するコードを取得する」で取得して保存したSTEP3 コードを貼り付けます。

※入力内容の説明①表示配置：「サイド」を選択してください。
②メニュー形式：「HTML コンテンツ」を選択してください。
③メニューオプション：「アップロード・入力」を選択してください。
④公開設定：「公開」を選択すると表示されます。
⑤表示順：上から昇順で表示されます。表示したい場所の数字を入力してください。
⑥メニュー名：メニュー一覧で識別するための名称です。任意の名称を入力してください。
⑦メニューデータ：事前準備で保存した STEP3 のコードを貼り付けしてください。
⑧開き方：変更不要（使用されません）⑨管理メモ：不要（メモとして使用してください。
）
全て入力が終わったら。
「登録完了」ボタンをクリックして登録してください。

以上で、設定完了です。

10 / 10