Page PluginでFacebookページをブログのサイドバーや記事下に設置!

ブログ用のFacebookページを作成し、ブログと連携させる設定が完了しましたら、最後にブログのサイドバーなどにFBページのボックスを設置します。(旧Like Box)

  1. FBの個人ページを作成し、FBのブログ用ページを作成する
  2. FBとブログを連携させる(All in One SEO Packを使用)
  3. ブログにPage Pluginを設置する←今回の記事

Page Pluginの設置方法!

Page Pluginの画面を開きます。

fb17

 

※この時、個人FBアカウントよりアクセスします。
アカウントの切り替えは右上バーの地球の隣にある「▼」をクリックしてください。

fb18

 

Page Pluginの各種設定

続いて、Page Pluginの各種設定をいきます。

  • Facebook Page URL: FacebookページのURLを入力
  • Tabs: Timeline(タイムライン)の他、message やeventを表示させることができます。
  • Width & Height: ボックスの幅と高さが設定できます。※高さだけは設定した方がいいです。
  • Use Small Header:ヘッダーを小さめにしたいときはチェック。
  • Hide Cover Photo:カバー画像を非表示させたいときはチェック。
  • Adapt to plugin container width: ボックスの幅を自動で調整してくれます。
  • Show Friend’s Faces: FB友達の画像を表示の有無

 

fb19

 

すべてカスタマイズが完了したら、下のGet Codeをクリック。
2種類コードが表示されます。

fb20

 

コードを設置する

1のコードは<body>タグ内に設置。
外観>テーマ編集より、単一記事の投稿(single.php)を開き、</body>の上に貼り付けます。

fb23

ウィジェットに設置する

サイドバーや記事下などに設置する場合は、外観>ウィジェットより、新しいテキストボックスをドラッグし、コード②を貼り付けます。

fb22

 

※サイドバーのみ、や、記事下のみ、などウィジェットを使って1箇所に設置する場合は、1と2のコードを両方貼り付けるだけでOKです。

fb21

 

運営しているサイトのデザインやテンプレートに応じてカスタマイズしていってください。

以上でFacebookページの作成~連携、そしてボックスの設置は完了です。
お疲れ様でした^^

    ブログランキングに参加中です★よかったらぽちっとお願いいたしますm(_)m
    ↓ ↓ ↓
    ブログランキング・にほんブログ村へ
    にほんブログ村

    mailmagatouroku

    コメントを残す

    ブログ収入のやり方をメルマガにてプレゼント中!登録はこちらをクリック!