サイドバーやフッターに最新のFacebook投稿を表示して、ウェブサイト訪問者の関心を引いてみませんか？
WordPressにFacebookフィードウィジェットを追加することは、ソーシャルプルーフを高め、サイト滞在時間を延ばし、ソーシャルメディアのフォロワーを増やす素晴らしい方法です。
ただし、WordPressのデフォルト設定には制限があり、Facebookのプラグインもカスタマイズ性に欠けることが多い。
このチュートリアルでは、市場で最高のプラグインを使用して、WordPress上で完全に刷新されたレスポンシブなFacebookフィードウィジェットを作成する方法をご紹介します。
- なぜWordPressにFacebookフィードウィジェットを追加するのか？
- Facebookウィジェットを作る最も簡単な方法は？
- ウェブサイトにFacebookウィジェットを追加する2つの方法
なぜWordPressにFacebookフィードウィジェットを追加するのか？
ウェブサイトのサイドバーやフッターは貴重なスペースです。サイトのほぼすべてのページに表示されるため（テーマにより異なります）、動的なコンテンツを強調するのに最適な場所です。
Facebookフィードウィジェットを表示することで、以下のことが可能です：
- コンテンツを常に新鮮に保つ：Facebookに投稿するたびに、サイトは自動的に更新されます。
- 信頼を築く：リアルタイムの交流と活発なコミュニティをアピールすることで、あなたのブランドが生き生きと反応していることを証明します。
- フォロワーを増やす：訪問者はページを離れることなく、ウェブサイトから直接あなたのページを「いいね！」したりフォローしたりできます。
Facebookウィジェットを作る最も簡単な方法は？
手動でFacebook APIに接続し、埋め込みコードを生成することで、Facebookウィジェットを作成できます。しかし、これには多くの制限があります：
- Facebookに開発者として登録するには、長いプロセスを経る必要があります：アプリケーションを作成し、アカウントを確認し、必要な権限を設定し、アクセストークンを生成します。
- フィードの背景色を変えたいですか？変えられません。フォントサイズは？それも変えられません。
- では、フィードに表示されるフェイスブックのアイコンを変更したい場合は？それもできません。
- それならフィードをカスタマイズして、サイトのテーマとスムーズに統合したい場合はどうすればいいでしょうか？コードを使ってください。
- フィードのヘッダーを変える？コードを使う？フィードをWordPressに表示する？こちらもコードを使用してください。
もっと簡単な方法として、Facebookのフィード・プラグインを使えば、投稿を取得してウェブサイトに埋め込むことができる。
選択肢はたくさんあるが、このガイドではFacebook Feed Proを使うことにする。このプラグインがNo.1の選択肢である理由はいくつかある：
- セットアップはとても簡単： プラグインをインストールしたら、5分以内にすべての設定が完了します！
- カスタマイズ可能なレイアウト： Facebookのフィードでは、投稿をサムネイル、半角、全角の異なるサイズで表示することができます。
- 選べる様々なフィードタイプ：このプラグインでは、Facebookの投稿、写真、ビデオ、ライブストリーム、アルバム、イベント、レビューを表示することができます。
- 超高速読み込み：プラグインが効率的にデータをキャッシュするため、フィードの読み込みが超高速になります。また、Facebookが一時的にダウンしても、フィードは表示されます。
- レスポンシブ・テーマ：モバイルフレンドリーで、どんな画面サイズでも美しく表示されます。
- SEOフレンドリー：Facebookからの新鮮なコンテンツを自動的に表示することで、検索エンジンの検索結果で上位にランクインすることができます。
- フィードのビジュアルを簡単にカスタマイズできます：数回クリックするだけで、背景色やフォントスタイルを簡単に変更できます。
ウェブサイトにFacebookウィジェットを追加する2つの方法
プラグインが手に入ったので、チュートリアルを始めよう。便宜上、2つの方法に分けて説明します。
1.WordPressの投稿とページにFacebookウィジェットを追加する
まず、WordPressウェブサイトのページまたは投稿にFacebookウィジェットを追加してみましょう。とても簡単で、数分しかかかりません。
ステップ1：Facebook Feed Proプラグインをインストールする
まずは、Facebook Feed Proプラグインを入手しましょう。そして、あなたのウェブサイトにインストールして有効化してください。
どうすればいいかわからない？WordPressプラグインのインストールに関するチュートリアルを参考にしてください。
ステップ2：Facebookウィジェットを作成する
Facebookウィジェットを作成するには、ダッシュボードからFacebookフィード " すべてのフィード メニューに移動します。
その後、上部にある新規追加 ボタンをクリックするだけです。
次に、作成したいFacebookフィードの種類を選択するよう求められます。このプラグインでは、以下のような様々なウィジェットタイプを作成できます：
- タイムライン
- 写真
- ビデオ
- アルバム
- イベント
- レビュー
- 単一機能投稿
- シングル・アルバム
必要なフィードの種類を選択し、「次へ」をクリックします。
このチュートリアルでは、ここでタイムラインフィードオプションを 選択する。
ステップ3：Facebookアカウントに接続する
このステップでは、Facebookページをソースとして追加することができます。
そのため、Facebookウィジェットはそのページからの投稿、写真、ビデオを表示することができます。
新しいソースを追加するには、このポップアップで「新規追加 」をクリックします。
簡単接続ウィザードを使うか、手動でFacebookに接続するかを選択するポップアップが表示されます。
今のところ、Facebookに接続をクリックするだけでいい。
そうすると、プラグインはFacebookにリダイレクトします。そこで、プラグインに読み取り専用アクセス権を与え、Facebookの投稿を表示できるようにすることができる。
また、アクセスは読み取り専用なので、データは安全なままであり、プラグインが実際に何かを変更することはできない。
続行するには、ポップアップの「続行」ボタンをクリックします。
これでウェブサイトに戻ります。ここでFacebookページを選択し、追加 ボタンをクリックしてソースとして追加します。
次へ」 ボタンをクリックして、Facebookウィジェットをソースに接続できます。
ステップ4：Facebookウィジェットをカスタマイズする
Facebookウィジェットを簡単にカスタマイズできるように、このプラグインはあらかじめ作成されたテーマのデザインをインポートできます。
5つのテーマから選ぶことができ、それぞれにユニークなデザインが施されている：
- デフォルト
- モダン
- ソーシャルウォール
- 概要
- オーバーラップ
続行するには、使用したいテーマを選択し、「次へ」をクリックします。
Facebook Feed Proでは、ウィジェットのFacebook投稿のレイアウトを変更するテンプレートを素早くインポートすることもできます。
7つのテンプレートから選ぶことができる：
- デフォルト
- シンプルな石積み
- ウィジェット
- 大型グリッド
- 最新アルバム
- ショーケース・カルーセル
- シンプルなカルーセル
続行するには、テンプレートを選択し、「Next」をクリックします。
これで、ライブフィードエディターでFacebookウィジェットを開くことができます。
画面の左側をチェックすると、利用可能なすべてのカスタマイズオプションが表示されます。これらのオプションを使って、フィードの種類、フィードのレイアウト、配色、投稿要素、背景などを変更することができます。
これらのオプションを変更すると、右側にライブプレビューが表示されます。つまり、Facebookウィジェットをカスタマイズするときに、どのように見えるかを見ることができます。
ウィジェットのレイアウトを設定する
それでは早速、レイアウトをカスタマイズしてみましょう。そのためには、フィードレイアウトオプションを 選択するだけです。
このプラグインでは、リスト、メイソンリー、カルーセルの3種類のレイアウトオプションから選ぶことができます。
以下、それぞれのオプションについて説明しよう：
Facebookの投稿を1列に表示したいですか？その場合は、リストレイアウトを 選択できます。
しかし、Facebookウィジェットに一度にたくさんの投稿を表示したい場合は、メイソンレイアウトを 選ぶことができる。
最後に、あなたの投稿をFacebookのカルーセルスライダーで表示するカルーセルオプションが あります。人々があなたのウェブサイトと交流するための素晴らしい方法です。
お好きなフィードレイアウトを選んだら、右上の「保存」 ボタンをクリックしてください。
フィードのカスタマイズに戻りたい場合は、小さなカスタマイズ ボタンをクリックしてください。
ウィジェットの色設定
Facebookウィジェットの色をカスタマイズすることもできます。そのためには、配色 オプションを選択してください。
Facebookウィジェットのカラースキームを4種類から選択できるようになりました。
- テーマから継承する：WordPressテーマの色をコピーする
- 明るい：明るい色の背景に暗い色のテキストを表示する。
- ダーク：代わりに暗い背景を使用し、テキストには明るい色を使用してください
- カスタム：Facebookウィジェットのすべての色を自分で選べます。
好きな配色を選んだら、「保存」をクリック。
そして、それはほんの始まりに過ぎない。
ライブフィードエディタでは、ヘッダー、カバー写真、いいね！ボタンボックス、投稿要素、背景、余白、その他多くのカスタマイズも可能です。さらに、全て超簡単で、HTML、カスタムCSS、コーディングは一切必要ありません。
フィードのカスタマイズが終わったら、もう一度「保存」 ボタンをクリックしてください。
ステップ5：Facebookウィジェットを埋め込む
ライブフィードエディターから直接、Facebookのフィードを埋め込むことができます。
右上の埋め込み ボタンをクリックしてください。
Facebookウィジェットを埋め込む場所を選択する新しいポップアップが表示されます。
ポップアップで「ページに追加 」オプションをクリックして続行します。
新しいウィジェットを追加できるすべてのページが表示されます。ページを選択したら、追加ボタンをクリックしてください。
次に、プラグインはそのページを開き、新しいFacebookウィジェットを投稿できるようにします。
そのためには、まず小さなプラスアイコン（＋）をクリックして新しいブロックを追加する。
あとは、ウィジェットセクションの カスタムFacebookフィード ブロックを選択するだけです。
最後に「Publish」をクリックすれば、Facebookフィード・ウィジェットの埋め込みは完了です。これで、あなたのサイトを開いて、フロントエンドでどのように見えるかをチェックできます。
2.WordPressのサイドバーにFacebookウィジェットを追加する
WordPressの投稿やページだけでなく、サイドバーもウィジェット対応エリアです。サイドバーエリアにFacebookフィードウィジェットを追加する方法は、以下のステップを参照してください：
ステップ1：ライブフィードエディターでFacebookウィジェットを開く
Facebookウィジェットを埋め込む前に、ライブフィードエディターで開く必要があります。そのためには、WordPressダッシュボードからFacebookフィード " すべてのフィードに移動します。
そこから、先ほどのFacebookウィジェットをクリックして開く。
ライブフィードエディターで開いたら、埋め込みます。
ステップ2：サイドバーにFacebookウィジェットを埋め込む
まず、ページ上部の埋め込み ボタンをクリックします。
そうすると、ウィジェットを埋め込む場所を選択するポップアップが開きます。ここで、Add to a Widgetをクリックしてください。
これで、プラグインはウィジェット・ページに 移動し、そこで現在のウィジェットをすべて管理したり、新しいウィジェットを追加したりできる。
続行するには、サイドバーパネルを クリックします。
その後、下部にあるプラスアイコン（+）を クリックします。カスタムFacebookフィードを 選択します。
ご覧のように、このプラグインを使えば、WordPress用のFBウィジェットを超簡単に作成できる。そして、あなたのサイトを開いて、ウィジェットがどのように見えるかを見ることができる。
それで終わりだ！
あなたのウェブサイトにFacebookウィジェットを追加する方法をついに学びました。しかも、複雑な埋め込みコードやHTML、Javascriptに悩まされる必要もありません。
結局のところ、目標を達成するためにもっと簡単な方法があるのなら、なぜそれをやらない のだろう？
試してみたいですか？Facebook Feed Proはこちらから入手できます。
InstagramのフィードをWordPressのウェブサイトに埋め込む方法については、こちらのガイドをご覧ください。
その他のソーシャルメディア・チュートリアルとガイド
- WordPressの古い投稿をソーシャルメディアに自動共有する方法（簡単な方法）
- TikTokはあなたの秘密兵器：中小企業のためのベストTikTokアイデア
- WordPressからFacebookの投稿をスケジュールする方法（ステップバイステップ）
- ウェブサイトに最適なFacebook WordPressプラグイン
