WordPressサイトにFacebookウィジェットを追加する簡単な方法 (2025)
クリック・ソーシャル

ClickSocialを使ってWordPressから直接ソーシャルメディア投稿をスケジュールする

無料トライアル開始 アングルライト
ホーム ブログ WordPressサイトにFacebookウィジェットを追加する簡単な方法 (2025)

WordPressサイトにFacebookウィジェットを追加する簡単な方法 (2025)

WordPressでFacebookフィードウィジェットを作成する方法

楽しい事実:すでに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フィード " すべてのフィード メニューに移動します。

その後、上部にある新規追加 ボタンをクリックするだけです。

カスタムfacebookフィードプロで新しいフィードを追加

このプラグインで利用可能なすべてのフィードタイプを見ることができます。タイムラインフィード、レビューフィード、写真フィード、動画フィードなど、9つのオプションから選ぶことができます。

必要なフィードの種類を選択し、「次へ」をクリックします。

このチュートリアルでは、ここでタイムラインフィードオプションを 選択する。

facebookフィードタイプを選択

ステップ3:Facebookアカウントに接続する

このステップでは、Facebookページをソースとして追加することができます。

そのため、Facebookウィジェットはそのページからの投稿、写真、ビデオを表示することができます。

新しいソースを追加するには、このポップアップで「新規追加 」をクリックします。

facebookフィード・プロに新しいソースを追加

簡単接続ウィザードを使うか、手動でFacebookに接続するかを選択するポップアップが表示されます。

今のところ、Facebookに接続をクリックするだけでいい。

elementorサイトをfacebookに接続する

そうすると、プラグインはFacebookにリダイレクトします。そこで、プラグインに読み取り専用アクセス権を与え、Facebookの投稿を表示できるようにすることができる。

また、アクセスは読み取り専用なので、データは安全なままであり、プラグインが実際に何かを変更することはできない。

続行するには、ポップアップの「続行」ボタンをクリックします。

フェイスブックへのアクセス

これでウェブサイトに戻ります。ここでFacebookページを選択し、追加 ボタンをクリックしてソースとして追加します。

フェイスブック・フィードのソースを確認する

次へ」 ボタンをクリックして、Facebookウィジェットをソースに接続できます。

facebookのソースを選んでから続ける

ステップ4:Facebookウィジェットをカスタマイズする

Facebookウィジェットを簡単にカスタマイズできるように、このプラグインはあらかじめ作成されたテーマのデザインをインポートできます。

5つのテーマから選ぶことができ、それぞれにユニークなデザインが施されている:

  • デフォルト
  • モダン
  • ソーシャルウォール
  • 概要
  • オーバーラップ

続行するには、使用したいテーマを選択し、「次へ」をクリックします。

ウィジェットのfacebookテーマを選択する

Facebook Feed Proでは、ウィジェットのFacebook投稿のレイアウトを変更するテンプレートを素早くインポートすることもできます。

7つのテンプレートから選ぶことができる:

  • デフォルト
  • シンプルな石積み
  • ウィジェット
  • 大型グリッド
  • 最新アルバム
  • ショーケース・カルーセル
  • シンプルなカルーセル

続行するには、テンプレートを選択し、「Next」をクリックします。

フィードテンプレートfacebookウィジェットを選択

これで、ライブフィードエディターでFacebookウィジェットを開くことができます。

画面の左側をチェックすると、利用可能なすべてのカスタマイズオプションが表示されます。これらのオプションを使って、フィードの種類、フィードのレイアウト、配色、投稿要素、背景などを変更することができます。

ライブ・フィード・エディター

これらのオプションを変更すると、右側にライブプレビューが表示されます。つまり、Facebookウィジェットをカスタマイズするときに、どのように見えるかを見ることができます。

それでは早速、レイアウトをカスタマイズしてみましょう。そのためには、フィードレイアウトオプションを 選択するだけです。

フィードレイアウト facebook elementor フィード

このプラグインでは、リスト、メイソンリーカルーセルの3種類のレイアウトオプションから選ぶことができます。

以下、それぞれのオプションについて説明しよう:

facebookフィードウィジェットのレイアウトオプション

Facebookの投稿を1列に表示したいですか?その場合は、リストレイアウトを 選択できます。

facebookフィードリストレイアウト

しかし、Facebookウィジェットに一度にたくさんの投稿を表示したい場合は、メイソンレイアウトを 選ぶことができる。

facebookフィードウィジェットの例

最後に、あなたの投稿をFacebookのカルーセルスライダーで表示するカルーセルオプションが あります。人々があなたのウェブサイトと交流するための素晴らしい方法です。

facebookフィードウィジェットのカルーセルの例

お好きなフィードレイアウトを選んだら、右上の「保存」 ボタンをクリックしてください。

フィードのカスタマイズに戻りたい場合は、小さなカスタマイズ ボタンをクリックしてください。

フェイスブックの主なカスタマイズ・オプションに戻る

Facebookウィジェットの色をカスタマイズすることもできます。そのためには、配色 オプションを選択してください。

配色オプションの選択 facebook elementor

Facebookウィジェットのカラースキームを4種類から選択できるようになりました。

  • テーマから継承する:WordPressテーマの色をコピーする
  • 明るい:明るい色の背景に暗い色のテキストを表示する。
  • ダーク:背景をダークにし、文字を明るい色にする。
  • カスタム:Facebookウィジェットのすべての色を自分で選べます。

好きな配色を選んだら、「保存」をクリック。

elementorのfacebookフィードの配色オプション

そして、それはほんの始まりに過ぎない。

ライブフィードエディタでは、ヘッダー、カバー写真、いいね!ボタンボックス、投稿要素、背景、余白、その他多くのカスタマイズも可能です。さらに、全て超簡単で、HTML、カスタムCSS、コーディングは一切必要ありません。

フィードのカスタマイズが終わったら、もう一度「保存」 ボタンをクリックしてください。

ステップ5:Facebookウィジェットを埋め込む

ライブフィードエディターから直接、Facebookのフィードを埋め込むことができます。

右上の埋め込み ボタンをクリックしてください。

facebookのelementorフィードを埋め込む

Facebookウィジェットを埋め込む場所を選択する新しいポップアップが表示されます。

ポップアップで「ページに追加 」オプションをクリックして続行します。

フェイスブックのフィードをページに追加する

新しいウィジェットを追加できるすべてのページが表示されます。ページを選択したら、追加ボタンをクリックしてください。

facebookフィードのページを選択

次に、プラグインはそのページを開き、新しいFacebookウィジェットを投稿できるようにします。

そのためには、まず小さなプラスアイコン(+)をクリックして新しいブロックを追加する。

あとは、ウィジェットセクションの カスタムFacebookフィード ブロックを選択するだけです。

フェイスブック・フィード・プロ・ブロック

最後に「Publish」をクリックすれば、Facebookフィード・ウィジェットの埋め込みは完了です。これで、あなたのサイトを開いて、フロントエンドでどのように見えるかをチェックできます。

facebookフィードウィジェットの例

2.WordPressのサイドバーにFacebookウィジェットを追加する

WordPressの投稿やページだけでなく、サイドバーもウィジェット対応エリアです。サイドバーエリアにFacebookフィードウィジェットを追加する方法は、以下のステップを参照してください:

ステップ1:ライブフィードエディターでFacebookウィジェットを開く

Facebookウィジェットを埋め込む前に、ライブフィードエディターで開く必要があります。そのためには、WordPressダッシュボードからFacebookフィード " すべてのフィードに移動します。

そこから、先ほどのFacebookウィジェットをクリックして開く。

facebookフィードウィジェットをもう一度開く

ライブフィードエディターで開いたら、埋め込みます。

ステップ2:サイドバーにFacebookウィジェットを埋め込む

まず、ページ上部の埋め込み ボタンをクリックします。

facebookのelementorフィードを埋め込む

そうすると、ウィジェットを埋め込む場所を選択するポップアップが開きます。ここで、Add to a Widgetをクリックしてください。

facebookフィードをウィジェットとして追加

これで、プラグインはウィジェット・ページに 移動し、そこで現在のウィジェットをすべて管理したり、新しいウィジェットを追加したりできる。

続行するには、サイドバーパネルを クリックします。

ウィジェットのサイドバーを選択する

その後、下部にあるプラスアイコン(+)を クリックします。カスタムFacebookフィードを 選択します。

facebookフィード・ウィジェットをサイドバーに挿入する

ご覧のように、このプラグインを使えば、WordPress用のFBウィジェットを超簡単に作成できる。そして、あなたのサイトを開いて、ウィジェットがどのように見えるかを見ることができる。

facebookフィードサイドバーウィジェット

それで終わりだ!

あなたのウェブサイトにFacebookウィジェットを追加する方法をついに学びました。しかも、複雑な埋め込みコードやHTML、Javascriptに悩まされる必要もありません。

結局のところ、目標を達成するためにもっと簡単な方法があるのなら、なぜそれをやらない のだろう?

試してみたいですか?Facebook Feed Proはこちらから入手できます。

InstagramのフィードをWordPressのウェブサイトに埋め込む方法については、こちらのガイドをご覧ください。

その他のソーシャルメディア・チュートリアルとガイド

著者アバター
リアン・ラロヤ コンテンツマーケティングマネージャー
リアンヌはスマッシュバルーンでコンテンツマーケティングマネージャーを務め、WordPressコンテンツ、ソーシャルメディアマーケティング、ユーザー生成コンテンツ(UGC)、検索エンジン最適化(SEO)において12年以上の経験を持つ。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。