WordPressで作ったサイトにFacebookページを表示させる方法

今回はWordPressで作ったサイトにFacebookページを表示させる方法を紹介します。

Facebookのライクボックスは2015年から使用できなくなり、代わりにページプラグインというものを使って表示する仕様になりました。

というわけで、ページプラグインを使ってWordPressにFacebookのページを表示させていきましょう。

 

ページプラグインを設定

まずはページプラグインへアクセスしてください。

ページプラグイン

入力欄が4つとチェックボックスが4つあると思います。

4つの入力欄の意味は以下の通り。

  • Facebook Page URL:表示したいFacebookページのURLを入力
  • Tabs:タイムラインを表示(空白で非表示になります)
  • Width:横幅を設定します(180px〜500px)
  • Height:縦幅を設定します(70px以上)

 

チェックボックスでは見た目に関連する項目を設定することができます。

4つのチェックボックスの意味は以下の通り。

  • Use Small Header:WordPressで表示するFacebookページのヘッダーが少し小さくなる
  • Adapt to plugin container width:親要素のwidthに合うように横幅が調整されます。基本的にチェックを入れておく
  • Hide Cover Photo:ヘッダー画像を非表示にします。この場合、ヘッダーの背景は白になります
  • Show Friend’s Face:いいねをしてくれた人のアイコンを下に表示します

 

設定を行ったら下にあるGet Codeをクリックします。コードが2つ出てきます。

1のコードはサイト内の<body>で一度呼び出せばokです。ページプラグインを何回か呼び出したい場合でも1度だけ呼び出せば大丈夫です。

2のコードはFacebookページを表示するためのコードです。Facebookページを表示させたい箇所に貼り付けましょう。

 

WordPressに貼り付ける

WordPressにFacebookページを表示させるには2のコードを表示したい箇所に貼り付けるだけです。

ほとんどの場合はウィジェットに表示させると思うので、今回もウィジェットに貼り付けてみます。

ダッシュボード→外観→ウィジェットと進み、テキストウィジェットを選択して2のコードを貼り付けてください。

タイトルはFacebookとかでいいと思います。

 

まとめ

ざっくり流れをまとめると、ページプラグインで表示設定をして、取得したコードをWordPressのウィジェットに貼り付けるという感じです。

ウィジェット以外に貼り付けることもできなくないですが、WordPressの中のファイル(single.phpなど)をいじることになるのであまりオススメしません。ウィジェットに表示できていれば十分でしょう。

更新状況がわかりやすくなるというメリットもあるので、ぜひ試してみてください。