アメブロ Facebook 連携 アメブロにFacebookページを追加する【フェイスブック 埋め込み】


アメブロ Facebook ページの連携に関する記事です。
 

お使いのFacebookページをアメブロのトップページに追加することで、アメブロからFacebookページに流入、いいねをもらえる可能性があります。
 

アメブロトップページにFacebookページが表示されている

アメブロトップページにFacebookページが表示されている


 
アメブロとFacebookページがあれば簡単に設置できますので、今回はその設定手順を記載します。
 

※2016年12月27日時点の手順になります。
 
 

もくじ

以下は本記事のもくじです。

  1. 1. Facebookページ追加の概要
    1. 1-1. 完成イメージ
    2. 1-2. 用意するもの
  2. 2. アメブロにFacebookページを表示する手順
    1. 2-1. Facebookページのコードを新規作成する
    2. 2-2. アメブロのプラグインにコードを追加する
    3. 2-3. 補足 手順説明(動画版)
  3. 3. まとめ

 

それでは、詳細に入っていきます。

スポンサーリンク


 

 

1. Facebookページ追加の概要

 

1-1. 完成イメージ

 

今回の完成イメージは、下記のようにアメブロのトップページのサイドバーにFacebookページを埋め込むところまでになります。

アメブロトップページにFacebookページが表示されている

アメブロトップページにFacebookページが表示されている


 
 

1-2. 用意するもの

本手順に入る前に、事前に下記が用意されている必要があります。

  • checkFacebookページ(個人Facebookアカウントは不可)
  • checkアメーバアカウント(ブログ)

 

(※)よく間違いやすいケースとして、個人のFacebookアカウントとFacebookページを混同しているケースがありますが、Facebookアカウントでは作成できません。Facebookページが必要になります。

Facebookページ(これが対象)
Facebookページ
Facebookアカウント(これはNG)
Facebookアカウント

 

 

それでは設置手順に入ります。
 
 

2. アメブロにFacebookページを表示する手順

 

2-1. Facebookページのコードを新規作成する

まずは、下記のFacebook Developersサイトにアクセスします。
 

https://developers.facebook.com/docs/plugins/page-plugin/
 

下記のFacebookページプラグイン画面が表示されます。

Facebook for developer ページプラグイン

Facebook for developer ページプラグイン


 

少し下の箇所にある入力フォームに、自分のFacebookページのURLを入力します。その他の設定項目でタブ、長さ、幅などを選択できまが、分からなければ下記の内容どおりで大丈夫です。

FacebookページのURLを入力 Facebook for developer ページプラグイン

FacebookページのURLを入力


 

(※)よく間違いやすいケースとして、ここで、個人のFacebookアカウントを入力する方がいますが、Facebookアカウントでは作成できません。Facebookページが必要になります。

FacebookアカウントのURLは不可 Facebook for developer ページプラグイン

FacebookアカウントのURLは不可


 

FacebookページのURLなどが入力完了した後で、下にあるコードを取得ボタンを押下します。

コードを取得 Facebook for developer ページプラグイン

コードを取得


 

Facebookページ埋め込み用のコードが生成されます。
 

まず、Step1のページの名前と言語があっていることを確認します(言語があっていない場合は、Japaneseに変更してください。)

ステップ1の名前と言語を確認 Facebook for developer ページプラグイン

ステップ1の名前と言語を確認


 

次にStep2のjavascriptコードをコピーします。

ステップ2のJavascriptコードをコピー Facebook for developer ページプラグイン

ステップ2のJavascriptコードをコピー


 

(※)後でステップ3のコードも利用するのでこのページはそのままの状態にしてください。
 

つづいて、アメブロに貼り付けていきます。

 

2-2. アメブロのプラグインにコードを追加する

アメブロに管理者としてログイン後に、右上の設定ボタンよりプラグインの追加を選択します。

サイドバー>プラグインの追加を選択

 

プラグインの追加>フリープラグインタブで、先ほどのコピーしたjavascriptコードを貼り付けて、保存します。

アメブロ プラグインの追加でFacebookページ用のJavascriptコードを貼り付ける

アメブロ プラグインの追加でFacebookページ用のJavascriptコードを貼り付ける


 

つづけて、さきほどFacebookページプラグインのサイトで取得したコードのうち、ステップ3のHTMLコードをコピーします。

ステップ3のHTMLコードをコピー Facebook for developer ページプラグイン

ステップ3のHTMLコードをコピー


 

同様にして、先ほどのアメブロのフリープラグインにコピーした再び貼り付けて保存します。貼り付ける場所は先ほどjavascriptコードを貼り付けた箇所の上部で構いません。

アメブロ プラグインの追加でFacebookページ用のHTMLコードを貼り付ける

アメブロ プラグインの追加でFacebookページ用のHTMLコードを貼り付ける


 

(補足)なお、HTMLコードはアメブロのフリースペースに記述することも可能ですが、簡単に説明するためここではフリープラグインに貼り付ける手順を紹介しています。

 

続けて「フリープラグイン」を「使用する機能」に追加していきます。(すでに実施済みの場合は不要です)。アメブロの右上の設定ボタンより配置設定を選択します。

アメブロ 設定>配置設定

アメブロ 設定>配置設定


 

サイドバーの配置設定で、ドラッグ&ドロップでフリープラグインを使用する機能に移動して保存します。(配置場所によって、トップページで表示される順番が変わります。)

フリープラグインを使用する機能に設定する
 

最後に、アメブロのトップページにFacebookページが表示されていることを確認して完了です。

アメブロトップページにFacebookページが表示されている

アメブロトップページにFacebookページが表示されている


 

なお、先ほどの配置設定で、フリープラグインを一番上部に持ってくるとサイドバーの一番上に持ってくることも可能です。

アメブロトップページにFacebookページが表示されている

アメブロトップページにFacebookページが表示されている


 
 

2-3. 補足 手順説明(動画版)

 

以下は、設定開始〜完了までの動画になります。
 


 
 

3. まとめ

今回は、Facebookページのコードを生成してアメブロのフリープラグインに貼り付けることで、アメブロのトップページにFacebookページを表示する方法を紹介しました。

 
Facebookページをお持ちでアメブロを利用されている方は、Facebookページをアメブロに表示することで、アメブロユーザーからのFacebookページへのアクセスやいいねを集めることができる可能性が高まりますのでぜひ試してみてください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 
 

スポンサーリンク



 
 

参考)アメブロ カスタマイズ関連記事

 

アメブロ カスタマイズ関連の記事です。難易度は雰囲気で設定しました!!

 
 

アメブロやってます!読者登録歓迎です(^^)

 

 


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!