この記事ではアメブロのサイドバーへFacebookページを表示する方法について解説していきます。
アメブロとfacebookを連携することで、ブログ層の他にSNSをメインに利用している人向けに情報を届けることが可能となります。自社商品を販売している場合、より効果的に集客を見込むことが可能となります。ぜひ参考にして実践して見てください。
目次
FacebookページのURLを調べる
まずは表示させたいFacebookのページのURLを確認していきます。パソコンとスマホ版でそれぞれ下記の手順でFacebookページのURLを取得することが可能です。
アメブロアクセスupサービスのFacebookページ：https://www.facebook.com/amebloup
【パソコンの場合】FacebookページのURLを調べる方法
パソコンでのURL取得が最も簡単な方法です。以下のような手順で取得して見てください。
- Facebookへログイン
- 該当するFacebookページをサイドバーより選択
- ページ上部のURLに表示される
- FacebookページURLの取得が完了
（通常：https://www.facebook.com/○○（ここにFacebookページのID）
【スマホの場合】FacebookページのURLを調べる方法
スマホアプリでFacebookを利用している場合には下記のような手順が必要となります。アプリはURLが出てきませんので、該当の項目をクリックしていき、直接コピーをする必要があります。
- Facebookへログイン
- 右下のメニューをクリック
- 「管理しているページ」をクリック
- 該当するFacebookページを選択
- Facebookページ上部の「・・その他」を選択
- 「ファンを増やす」の項目より「ページリンクをコピー」を選択
- FacebookページURLの取得が完了
（通常：https://www.facebook.com/○○（ここにFacebookページのID）
【URLへ直接当て当てはめるの場合】FacebookページのURLを調べる方法
IDを知っていれば、すぐにURLを構成することが可能です。
- FacebookページのURL構成に従って当てはめる
- https://www.facebook.com/○○（ここにFacebookページのID）
FacebookページのID設定方法
なお、FacebookページのURLはページにIDを設定してインければ取得ができません。このIDは未設定の場合、@以降を選択することが可能ですので、お好きな英数字を入力して設定することをおすすめします。
FacebookページのIDを探す方法
FacebookIDを探す方法は以下の通りです。
ページIDを見つけるには:
- ニュースフィードで、左側のメニューにある[ページ]をクリックします。
- ページ名をクリックしてページに移動します。
- 左側の[ページ情報]をクリックします。左側に[ページ情報]が表示されない場合、[さらに表示]をクリックします。
- 下にスクロールし、[詳細]の下でページIDを探します。
Facebookページをアメブロへ設定する方法
Facebookページをアメブロへ設定する方法は以下の２つの手順を行えばすぐにできてしまいます。
- Facebookページプラグインにてコードを生成
- アメブロフリースペースへコードを入力
それぞれ詳しく解説してきますので、ぜひ参考にしてみてください。
ページプラグインにて設定する
Facebookのページプラグインのページを開きます。
Facebookページプラグイン：https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP
下へスクロールすると、ページ設定詳細の部分がありますから、指示に従って入力します。
FacebookのURL入力欄には、先ほどコピーしたアドレスをそのまま貼り付けしましょう。その横のタブという部分には「timeline」と入力を行います。次に幅は自分好みに合わせて設定していきます。
アメブロのカラム数の2カラムなら300とします。３カラムの場合は2通りあり、幅の広いほうに置きたいなら300、狭い方なら200と入力します。高さは好みで設定できますので、プレビューをみて調節すると良いでしょう。
コードを取得する
全部を設定できたら今度はコードを取得しましょう。下まで見ると左側にコードを取得というボタンがあります。これを押すとコードがたくさん出てくる画面になります。ここで上部のタブをIFrameを選択することを忘れないようにします。
ここで表示されるのがコードですから、これを全部コピーします。1文字でも欠けると正しく表示されないので、全コピーするのが最善です。
クリックすれば簡単に全コピーになるので、そのまま張り付けするためにアメブロへと移行しましょう。コードの部分はわけのわからない文字や記号が並びますので驚くかもしれません。
しかし、中身は見ないで大丈夫で、ただ漏れなくコピーすることだけ気を付ければ問題ありません。
アメブロのフリースペースにて設定を行う
コピーが終了したら今度はアメブロに戻ります。アメブロの設定の中のフリースペース編集を開きます。
アメブロフリースペース：https://blog.ameba.jp/ucs/profile/srvprofileupdateinput.do
すると張り付けすスペースが表示されますので、コードをコピーしましょう。確認ができるようにプレビュー機能が在りますので、表示させて正しいかをチェックしましょう。問題なければ保存のボタンを押せば完了です。
万が一、正しく表示されないなら設定の部分の確認も行えます。自分のアメブロのカラム数に対応した設定になっているのかもチェックします。
これだけで設定が終了して、Facebookページの表示がアメブロにできるようになります。手順もシンプルで手間もかかりません。とても簡単なので、ぜひ活用してアクセス数のアップに役立てることができます。
まとめ
アメブロのサイドバーへFacebookページを表示する方法について解説してきましたが、いかがでしたか？
アメブロとFacebookなどの他のメディアを連携することはユーザーが自社メディアを回遊してくれますので、大きなメリットとなります。自社商品を販売している場合、多くのメディアを見てもらった方がより購買率も上がりますので、ぜひアメブロとFacebookを連携しておくことをおすすめします。
