楽しい事実:すでに2億以上の企業がFacebookでマーケティングを行っている!
競合が多い中、Facebookウィジェットを追加することは、エンゲージメントを高め、あなたのビジネスを際立たせる素晴らしい方法です。
しかし、記事によって宣伝する方法は異なるし、その多くは分かりにくい専門用語でいっぱいだ。コードの扱いに慣れていないと、頭痛の種になりかねない。
そんなあなたのために、Facebookウィジェットをウェブサイトに表示する最も簡単な方法をご紹介します。
Facebookウィジェットを作る最も簡単な方法は?
手動でFacebook APIに接続し、埋め込みコードを生成することで、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フィード " すべてのフィード メニューに移動します。
その後、上部にある新規追加 ボタンをクリックするだけです。

このプラグインで利用可能なすべてのフィードタイプを見ることができます。タイムラインフィード、レビューフィード、写真フィード、動画フィードなど、9つのオプションから選ぶことができます。
必要なフィードの種類を選択し、「次へ」をクリックします。
このチュートリアルでは、ここでタイムラインフィードオプションを 選択する。

ステップ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プラグイン