この記事は2017/06/12に追記をしています。

今回はWordPressサイトにFacebookページを埋め込む方法を紹介します。

当サイトのサイドバーに最近Facebookページを設置したのですが、あなたもブログのサイドバーやフッターなどにFacebookページのパーツが置かれているのを見たことはないでしょうか?

実はこれ、WordPressプラグイン不要で、作業的には3分くらいで簡単に設置できます。

もし、まだやっていないようでしたらリピーター獲得の機会や、本来もっと増えてもいいはずのアクセスをみすみす手放しているようなものなので、これはなかなかにもったいない。

というわけで、この記事でやり方をマスターしていきましょう!

WordPressにFacebookページを設置するには?

WordPressにFacebookページを設置するには、まず大前提としてFacebookページを持っている必要があります。

当たり前といえば当たり前ですね。

そして、Facebookページをどうやって設置するのかといえば、これはFacebookが提供しているソーシャルプラグインの『ページプラグイン』を使うだけです。

ちなみにこれはWordPressのプラグインではありません。

WordPressカスタマイズで、プラグイン拡張に慣れているとちょっと紛らわしいですよね。

ページプラグインとは?

ページプラグインとは、Facebookページをウェブサイトに埋め込むことができるように専用コードを出力してくれるツールのことです。

ページプラグインで吐き出されたコードをWordPressのウィジェットに突っ込めば、それだけでFacebookページの埋め込みができます。

そして、ブログを訪問してきたユーザーはブログから直接、Facebookページに「いいね!」や「シェア」ができるようになります。

Facebookの仕組みとしていいねをつけてもらえると、その人のニュースフィードにページの投稿が流れるようになるので、ユーザーとの接触機会が増えます。

そうなるとアクセスアップ効果やPR効果が期待できるので、ぜひとも設置しておきたいところです。

Facebookページを埋め込む手順

それでは、Facebookページを埋め込む手順を紹介していきます。

ステップは大きく分けると4ステップです。

  1. ページプラグインのページを開く
  2. 設定
  3. コード取得
  4. WordPressに設置

1.ページプラグインのページを開く

まず、ページプラグインのページを開きます。

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

すると、Facebook for Developersに飛ぶのですが、OGPとかの設定をしたことがある人は「げ、Facebookアプリの設定が必要になるめんどくさいやつ?」と思ったかもしれません。(私のことです)

ですが、ページプラグインはFacebookアプリ作成不要なのでご安心ください。

Facebookアプリを作成する必要がありますか。

ウェブ:ウェブ上でソーシャルプラグインを使用する場合は、ソーシャルプラグインの統合にFacebookアプリを作成する必要はありません。

参考:よくある質問 – ソーシャルプラグイン – ドキュメンテーション – 開発者向けFacebook

ここでいうソーシャルプラグインの中にページプラグインが含まれています。

2.設定

ページを開くと設定項目があります。

FacebookページのURL

”FacebookページのURL”をあなたのFacebookページのURLに置き換えることで、あなたのFacebookページのコードを取得できます。

FacebookページのURLを確認するには?

ちなみに、FacebookページのURLを確認するには、まず個人ページ左側にある”Facebookページ”を開きます。

さらに画面上部にある”管理しているページ”を開きます。

すると、管理しているFacebookページの一覧が表示されます。

あとはその中から該当のFacebookページを開き、URLをコピーすればOKです。

 

最低限、ここだけ設定すればコード取得できるのでこのままステップ3に進んでもOKです。

タブ

タブの設定をいじることで、埋め込みパーツに表示する内容をカスタマイズすることができます。

デフォルトではタイムラインが入っていますが、削除するとスッキリ&コンパクトになるので、私はここを空白にしています。

なお、タブで表示できる内容はタイムライン、イベント、メッセージの3つです。

  • タイムライン:ページのタイムライン(最新の投稿)を表示可能に
  • イベント: イベントのフォロー、フィード購読を可能に
  • メッセージ:サイトに埋め込んだFacebookページから直接、Facebookメッセージを送信可能に(送信するユーザーがFacebookへログインしている必要アリ)

これらを表示させたい場合、次のコマンドを設定します。

  • タイムライン = timeline
  • イベント = events
  • メッセージ = messages

なお、”, (コンマ)”で区切ることでこれらを複数表示させることもできます。

※例:timeline, events

サイズ

Facebookページの埋め込みサイズを変えることができます。

指定できるサイズの限界値は次の通りです。

  • 幅:最低180px、最大500px
  • 高さ:最低70px

ちなみに空白でも大丈夫です。

オプション

この他にも設定できる箇所が4つあります。

スモールヘッダーを使用

ここにチェックを入れると埋め込み表示がコンパクトに変身。

しかし、シェアボタンがなくなります。

私の場合、Facebookページならシェアよりもいいね!を優先していきたいので、あえてシェアボタンが表示されないスモールヘッダーに設定しています。

※追記分(2017/06/12)

スモールヘッダーを選択したとき、横幅が315px未満だと「いいね!」の文字が見切れてしまいます。(画像は300pxに指定したときのキャプチャ)

これだとなんだか気持ち悪かったのでスモールヘッダーを解除しました。

plugin containerの幅に合わせる

レスポンシブ対応させたいときはここにチェックを入れます。

ただ、これとは別にcssなどでレスポンシブの設定をしてあげる必要があるので「チェックを入れた=レスポンシブ対応」になるわけではないので注意です。

※レスポンシブ対応のやり方は今回は割愛

カバー写真を非表示にする

Facebookページで設定したカバー写真を表示するかしないかを選べます。

カバー写真があるとにぎやかに、ないとシンプルな感じになります。

友だちの顔を表示する

いいね!してくれた友だちのプロフィール写真が表示されるようになります。

いっぱい、いいねがついたらいろんな人のプロフィール写真が表示されるので、「お!このFacebookページ人気あるんだなー」と、社会的証明の効果を誘うことができます。

ただし、当ブログのFacebookページにいいねしてくれた人はまだいません。

画像編集してるときに改めて気付き、ふと切なくなったのはここだけの内緒話です。

3.コード取得

ここまでで設定が完了したら、あとは”コードを取得”をクリック。

すると、”step 2”と”ステップ 3”の箇所に2種類のコードが吐き出されます。

なぜに”step 2”は英語で、”ステップ3”が日本語なのか。

翻訳の絶妙なバランスを感じさせるこの部分ですが、この2つのコードをコピーしましょう。

ちなみに、Facebookアプリが公開状態でないと「このアプリは開発モードになっており、公開されていません。」といったエラーメッセージっぽいのが出て焦るかもしれませんが、これはエラーでもなんでもないので気にしなくてOKです。

最初の方でも少し触れましたが、ページプラグインはFacebookアプリなしで利用できるので、このまま進んでしまって問題ありません。

これにてページプラグインのページはお役御免となります。

4.WordPressに設置

最後はWordPressに設置する作業です。

今回はサイドバーに設置していきます。

サイドバーに設置する場合、WordPress管理画面から”外観 > ウィジェット”を開きます。

そして、あとはテキストウィジェットを使ってサイドバーのところに突っ込みます。(フッターに入れたければフッターに突っ込めばOK)

先ほどコードが2つ吐き出されたので少し戸惑うかもしれませんが、吐き出された2つのコードを同じテキストウィジェットの中に順番に貼り付けます。

そして、最後に忘れずに”保存”を押して完了。

あとは動作確認のために実際にブログを見てみて、きちんと表示されていれば成功です!

設置完了!

おつかれさまでした!

まとめ

以上、FacebookページをWordPressサイトに埋め込む方法を紹介してきました。

  1. ページプラグインのページを開く
  2. 設定
  3. コード取得
  4. WordPressに設置

非常に簡単なので設定にこだわらなければ3分で設置できます。

Facebookを使えばサイトPRができるし、Facebook経由でのアクセス流入が期待できるようになるので、ぜひとも設置しておきたいところです。

あと、いいねお待ちしております。