どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ワードプレスブログのサイドバーや記事下、フッターなどにFacebookページが表示されているのを見かけたことはありませんか？
Facebookページを埋め込むにはプラグインを使用したり、CSSコードを編集したりするんだろうと思ったあなた。
実際はそういった作業は必要なく、Facebookのブログパーツ「ページプラグイン」を使用するだけで、数分で表示させることができるんです。
プラグインと名がついていますが、ワードプレスのものとは全くの別物になります。
Facebookページをブログに表示させておくことで、集客効果やファンの増加が見込めますので設置した方が効果的でしょう。
そこで埋め込み表示させる方法について、わかりやすくご紹介していきたいと思います。
ページプラグインについて
Facebookの「ページプラグイン」とは、Facebookページをブログやサイトに埋め込み表示する為に、コードを自動で生成してくれる便利なブログパーツです。
難しい設定をする必要がなく、ワードプレスのウィジェットに取得したコードをそのまま貼り付けるだけでいいので、初心者の方でも簡単にFacebookページを埋め込むことができます。
本来は訪問ユーザーが「いいね！」や「シェア」を行う場合、ブログからFacebookページに移動する必要がありましたが、埋め込むことによってブログから直接行うことが可能になります。
「いいね！」や「シェア」をより手軽にできる仕組みを作っておくことで、アクセスアップや拡散効果を得られる可能性が高くなります。
それではページプラグインを使って、Facebookページをワードプレスブログに埋め込んでいきましょう。
Facebookページの埋め込み方法
まず初めにFacebookページを所有していなければ、そもそも埋め込み作業を行うことができませんので、まだ作成されていない場合は以下の記事を参考にして頂ければと思います。
| 参考：ビジネス向けFacebookページの作り方や必要になる６つの設定について |
準備ができましたら、以下の手順で埋め込み作業を進めていきます。
- ページプラグインを設定する
- 埋め込みコードを取得する
- ワードプレスにコードを貼り付ける
上記の手順について順番に解説していきます。
ページプラグインを設定する
「facebook for developers」のサイトにアクセスして、「ドキュメント」⇒「ソーシャルプラグイン」⇒「ページプラグイン」の順に進めていきます。
こちらの「ページプラグインのページ」のリンクから直接アクセスできます。
そうしますと設定できる項目が表示されていますので、必要箇所を入力していきます。
| FacebookページのURL | Facebookページのホーム画面上部に表示されているアドレスバーのURL(https://www.facebook.com/○○○) |
| タブ | 「タイムライン・メッセージ・イベント」の表示が可能。入力する際は「timeline,messages,events」の英字を使用し、複数表示は「,」コンマで区切ります |
| 幅 | 最低180px～最大500pxの範囲で入力します(空白でもOK) |
| 高さ | 最低70px以上で入力します(空白でもOK) |
| ヘッダー部分の幅を狭めたい時にチェックします | |
| 幅が可変するような場合、レスポンシブ対応させたい時はチェックします | |
| 使用中のカバー写真を非表示にしたい場合はチェックします | |
| 「いいね！」をしてくれた人のプロフィール写真を表示したい場合はチェックします |
「高さ」に関してはあまり高すぎると、サイドバーなどに表示させた時に場所を取ってしまうので、できれば300px～500px程度が好ましいかと思います。
その他はお好みで調整していきましょう。
埋め込みコードを取得する
設定が完了したら下にある『コードを取得』ボタンをクリックして下さい。
そうしますと、以下のように２種類の埋め込みコードが表示されているかと思います。
Facebookアプリを作成されている場合は、ステップ1で「アプリID・言語」を選択することができますが、アプリがなくても特に問題はありません。
上記の「Step 2」と「ステップ3」に表示されているコードを、そのままコピーして使用していきます。
ページプラグインでの作業はこれで以上となりますので、ここからはワードプレスに移動して取得したコードを貼り付けます。
ワードプレスにコードを貼り付ける
ここではブログのサイドバーにFacebookページを設置したいと思います。
ワードプレスのウィジェットを使って埋め込みを行うので、管理画面メニューから「外観」⇒『ウィジェット』をクリックします。
「利用できるウィジェット」から「テキスト」をサイドバーエリアにドラッグ＆ドロップします。
テキストのタイトルを入力して「テキストモード」に変更したら、先程取得した２種類の埋め込みコードをテキスト内に貼り付けます。
※「ビジュアルモード」で貼り付けると表示されませんので注意しましょう。
また、埋め込みコードは「Step 2」「ステップ3」の順に貼り付けて下さい。
最後に『保存』ボタンをクリックすると、Facebookページがブログのサイドバーに表示されているはずです。
以上の内容がワードプレスブログに埋め込み表示させる方法になります。
まとめ
Facebookページをブログに埋め込む方法は、非常に簡単なので早ければものの数分で設置作業が完了できます。
また、TwitterのタイムラインをFacebook同様にサイドバーに埋め込むことも可能です。
Twitterの埋め込み方法に関しては、以下の記事でご紹介していますので気になる方はぜひ参考にして下さい。
| 参考：ワードプレスのサイドバーにTwitterのタイムラインを埋め込む方法 |
FacebookやTwitterは世の中に認知されているメジャーなSNSなので、できるだけ活用の場を広げてブログやサイトのアピールを行っていきましょう。
