ウェブサイトにFacebookイベントを表示する方法（2つの簡単な方法） | 2026

Facebookでイベントを開催している場合、ウェブサイトの訪問者がそのイベントに全く気づいていない可能性が高いです。

ほとんどの人はわざわざあなたのFacebookページを探し回ることはありません。彼らはすでにあなたのサイトにアクセスしています。もしそこにイベント情報が掲載されていなければ、参加者を逃すことになってしまいます。

朗報です。WordPressのどのページにも、Facebookイベントのライブフィードを直接埋め込むことができ、設定には約5分しかかかりません。

手動での方法とプラグインを使った方法、どちらも試してみました。以下でそれぞれの方法を詳しく説明しますので、ご自身のサイトに合った方法を選んでください。

【簡単解説】ウェブサイトにFacebookのイベントを表示する最も速くて確実な方法は、「Smash Balloon Facebook Feed Pro」プラグインを利用することです。WordPressにインストールし、イベントフィードを作成してFacebookページと連携させ、レイアウトを選択し、好きな場所に埋め込むだけです。Facebookでイベントを投稿または更新すると、自動的に反映されます。コーディングの知識は一切不要です。

両方の方法について、順を追った手順を以下にご紹介します。

• ウェブサイトにFacebookイベントを表示する2つの方法
• Facebookイベントをウェブサイトに埋め込む理由
• 方法 1：Facebook ページプラグインウィジェットでイベントを表示する
  • Facebookページプラグイン（手動iFrame方式）
• 方法 2：WordPress プラグインを使って Facebook イベントを表示する [最良の方法]
  • ステップ1: Smash Balloon Facebook Feed Proをインストールする
  • ステップ2: Facebookイベントカレンダーフィードを作成する
  • ステップ3：Facebookページに接続する
  • ステップ4：Facebookイベントカレンダーフィードをカスタマイズする
  • ステップ5：Facebookのイベントカレンダーを表示する
• よくある質問
• 今すぐFacebookイベントの掲載を始めましょう

ウェブサイトにFacebookイベントを表示する2つの方法

手順に入る前に、2つの選択肢を簡単にご紹介します：

	Facebookページプラグイン（マニュアル）	Smash Balloon Facebook Feed Pro⭐ おすすめ
2026年になっても確実に動作しますか？	⚠️ 機能はしますが、Facebookページの管理者である場合に限ります。デザインを編集することはできません。	✅ はい。完全に対応しており、積極的にメンテナンスが行われています
コードを書く必要がありますか？	❌ はい。FacebookのAPI変更によって動作しなくなる可能性があるiFrameコードをコピー＆ペーストします	✅ いいえ。WordPressの管理画面から視覚的に設定できます
デザインをカスタマイズできますか？	❌ いいえ。Facebookのデフォルトのデザインに固定されています	✅ はい。5つのテーマ、7つのレイアウト、カスタムカラーとフォント
イベントは自動的に更新されますか？	❌ いいえ。古くなってしまう静的埋め込み	✅ はい。新しいイベントは自動的に取得されます
表示されるイベントを絞り込むことはできますか？	❌ いいえ。すべてのイベントが表示され、制御はできません	✅ はい。フィルタリング、並べ替え、表示件数の設定が可能です
最適	デザインへのこだわりがない、手っ取り早くテストしたいサイト	コードをいじらずに、洗練された自動更新機能付きのイベント表示を実現したいWordPressサイト

どちらを使うべきでしょうか？もし、何かを決定する前に、イベント埋め込みが自分の環境で機能するかどうかを試しに確認したいだけなら、手動の方法を使えばテストすることができます。

でも、見た目が良く、常に最新の状態を保ち、Facebookの仕様変更のたびに不具合が起きないものを探しているなら、「Facebook Feed Pro」プラグインをお勧めします。私もこれを使っています。

Facebookイベントをウェブサイトに埋め込む理由

Facebookイベントをウェブサイトに埋め込む最大の理由は、サイト訪問者に今後のイベントを伝え、参加してもらうことです。

Facebookイベントをウェブサイトに埋め込む理由は他にもあります。

• ウェブサイトの訪問者に興味深いイベントを見せることで、Facebookページをフォローしてもらうことができる。
• Facebookに関連するコンテンツをサイトに追加することで、訪問者に、あなたがコミュニティと積極的に関わっていることを示すことができます。
• WordPressでFacebookのイベントを表示することで、人々があなたのサイトに長く留まり、サイトのSEO対策にもなります。
• Facebookページのエンゲージメントを高め、あなたのコンテンツがニュースフィードの上位に表示されるようにすることで、認知度を高め、ページへのトラフィックを増やすことができます。

方法 1：Facebook ページプラグインウィジェットでイベントを表示する

Facebookページプラグイン（手動iFrame方式）

始める前に知っておくべきこと：この方法は、イベントを表示したいFacebookページの管理者である場合にのみ有効です。

FacebookのAPI制限により、管理者以外のユーザーはページプラグインを通じてイベントデータを取得することができません。ご自身のビジネスページであれば、問題ありません。

手順 1： Facebookのページプラグインコードジェネレーターにアクセスし、FacebookページのURLを入力して、「タブ」欄に「イベント」と入力します。「コードを取得」をクリックします。

ステップ 2：生成されたスニペットから iFrame コードをコピーします。

ステップ3：まず、WordPressの管理画面から「外観」＞「ウィジェット」メニューに移動します。

次に、サイドバーか フッターのどちらかを選択します。このチュートリアルではサイドバーを使用します。

その後、プラス（+）アイコンをクリックして、ウェブサイトに新しいウィジェットを追加します。そして、オプションからカスタムHTML ウィジェットを選択します。

最後に、先ほどのiFrameコードスニペットを新しいウィジェットに貼り付けます 。

メインサイトに移動すると、サイドバーにFacebookのイベントが表示されます。

欠点：デザインのカスタマイズやフィルタリング機能はなく、Facebookが仕様を変更した場合でも自動更新されません。機能自体はしますが、表示されるのはFacebookのインターフェースであり、独自のデザインではありません。

お分かりのように、すべての埋め込みコードを処理するのは少し煩わしいかもしれません。さらに、他にもいくつかの欠点があります：

• Facebookウィジェットはカスタマイズできないし、ウェブサイトのデザインとぶつかるかもしれない。
• ウィジェットはフェイスブックに依存しているため、フェイスブックが技術的な問題に対処している場合はオフラインになる。
• このイベントウィジェットは一般的なデザインなので、あなたのサイトを目立たせるチャンスを逃しています。
• 複数のFacebookウィジェットを表示したい場合は、たくさんの埋め込みコードを管理する必要があります。
• この方法では、WordPressウェブサイトに表示される投稿やイベントをコントロールすることはできません。

方法 2：WordPress プラグインを使って Facebook イベントを表示する [最良の方法]

次の方法では、フェイスブックのフィード・プラグインを使って、フェイスブックのイベントをウェブサイトに表示する。

そうすれば、Facebookプラグインが自動的にイベントを取得し、美しいフィードとしてウェブサイトに追加してくれる！

そして、あなたのサイトに魅力的なFacebookイベントフィードを表示するために使用できる最良のオプションは、Smash Balloon Facebook Feed Proプラグインです。

WordPressのための最高のFacebookフィードプラグインとして、それはあなたがわずか数分でWordPressでイベントフィードのようなFacebookのコンテンツをシームレスに統合するのに役立ちます。

Facebookのイベントをあなたのサイトに表示するだけでなく、このFacebookフィードWordPressプラグインには以下の機能があります：

• Facebookの投稿、写真、ビデオフィード、Facebookライブストリームなど、複数のFacebookフィードタイプをサイトに表示できます。
• ヘッダー、日付、説明など、フィードに表示される情報をコントロールできます。
• 複数のFacebookアカウントのフィードを1つのウェブサイトで簡単に管理・表示できます。
• スライダーなどのFacebookフィードテンプレートや、ウェブサイトのブランディングに合わせたスタイリングオプションを使って、フィードのルック＆フィールを完全にカスタマイズできます。
• 多くのフィードタイプをサポートしているので、Facebookのアルバムフィードやビデオフィードなどを作成することができます。
• モバイルフレンドリーなデザインで、フィードをモバイルデバイスに美しく表示します。
• Facebookのレビューをウェブサイトに表示することで、社会的証明を確立し、ビジネスの売上を増やす ことができます。

さらに良いことに、コードを1行も書くことなくこれらすべてを行うことができるので、初心者でも超簡単に使い始めることができる。

WordPressにFacebookイベントを埋め込む最も簡単な方法をビデオチュートリアルでご紹介します。

手順を簡単にまとめると、プラグインをインストールし、新しい「イベント」フィードを作成して、Facebookページを連携させ、ビジュアルエディタからレイアウトを選んで、任意のページやウィジェットエリアに埋め込む、という流れになります。

最初から最後まで、約5分かかります。

手順 1：WordPress サイトに「Smash Balloon Custom Facebook Feed Pro」をインストールし、有効化します。

「プラグイン」＞「新規追加」に移動し、プラグインファイルをアップロードして有効化してください。有効化すると、WordPressの管理画面に「Facebookフィード」という新しいメニューが表示されます。

ステップ 2：Facebookフィード > すべてのフィードに移動し、「新規追加」をクリックします。フィードの種類として「イベント」を選択します。

ここで、プラグインにどのようなコンテンツを取得するかを指定します。「イベント」を選択すると、フィードには一般的なページの投稿ではなく、今後のFacebookイベントや過去のFacebookイベントが具体的に表示されます。

ステップ3：「新規追加」をクリックして、フィードソースを設定します。以下の3つの情報が必要です：

• FacebookページID
• イベントアクセストークン
• イベントのiCal URL

このリストは少し専門的に見えるかもしれませんが、プラグインが各設定項目の場所を詳しく案内してくれます。Facebookページの設定から、コピー＆ペーストを数回行うだけで完了します。

ステップ4：レイアウトとデザインを選びます。

個人的には、この部分が最も気に入っています。5つのテーマ（デフォルト、モダン、ソーシャルウォール、アウトライン、オーバーラップ）と7つのレイアウトテンプレートから選択できます。ビジュアルエディタを使って、色、フォント、ヘッダーのスタイル、表示するイベントの数などを調整できます。CSSを1行もいじることなく、ご自身のサイトに合わせることができます。

ステップ5：「埋め込み」をクリックして、イベントフィードを公開します。

フィードを表示したいページまたはウィジェット領域を選択してください。このプラグインはショートコードを生成するため、任意のページビルダーやクラシックエディタのブロックに貼り付けることができます。

公開後は、Facebookで何かを追加・変更するたびに、イベント情報が自動的に更新されます。WordPressに戻って更新作業を行う必要はありません。

作業の概要がわかったところで、以下に具体的な手順について説明します：

ステップ1: Smash Balloon Facebook Feed Proをインストールする

Facebook Feed Proを入手し、プラグインをインストール、有効化して始めましょう。

WordPressプラグインのインストール方法については、ステップバイステップのガイドをご覧ください。

ステップ2: Facebookイベントカレンダーフィードを作成する

サイトにプラグインをインストールして有効化したら、ダッシュボードからFacebookフィード " すべてのフィード メニューに移動します。

Facebookイベントカレンダーの作成を開始するには、「新規追加」をクリックします。

その後、タイムラインフィード、写真フィード、ビデオフィード、イベントフィード、レビューフィードなど、9種類のフィードが利用できることがわかる。

次に、オプションのリストからイベントを 選択し、「Next」ボタンをクリックして次に進みます。

ステップ3：Facebookページに接続する

フィードを作成したら、イベントのソースを選択できます。これはあなたがイベントを計画したFacebookページになります。

そのためには、新規追加 ボタンをクリックする。

新しいポップアップが表示され、3つの項目を追加する必要があります：

• FacebookページID
• イベント・アクセス・トークン
• イベント iCal URL

これら3つを手に入れる方法を以下に紹介しよう：

FacebookページIDの取得

Facebookページを開き、上部にある「About」 タブをクリックします。

その後、ページの透明度オプションをクリックすると、右側にページIDが表示されます。

ページIDを取得したら、次に進む前に安全な場所に保存してください。

イベント・アクセストークンを入手する

次のステップは、イベント・アクセストークンを取得することです。

まだお持ちでない方は、Facebookイベントアクセストークンの作成方法をステップバイステップでご覧ください。

このビデオガイドに従うこともできる：

イベントiCalのURLを取得する

iCalのURLを取得するには、Facebookのホームページを開き、Facebookページとしてログインしていることを確認してください。

次に、左側の「イベント」オプションをクリックして続行します。

次に、左側の「Your Events」オプションをクリックして、あなたが計画したアクティブなイベントを表示します。

あとは右上のカレンダーに追加ボタンのURLをコピー するだけです。

それが終わったら、ウェブサイトに戻り、ページID、イベント・アクセストークン 、iCalのURLを入力します。

最後に、下の「ソースを追加」ボタンをクリックします。

このソースをつなげば、今後のFacebookフィードに自由に再利用することができる。

続行するには、新しく追加したソースを選択し、「Next」をクリックします。

ステップ4：Facebookイベントカレンダーフィードをカスタマイズする

これで、イベントカレンダーをカスタマイズすることができます。まず、新しいFacebookフィードのテーマを選びます。

Facebookのテーマは5種類から選ぶことができる：

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

自由にテーマを選択し、「次へ 」をクリックして次に進む。

次に、このプラグインは7種類のフィードテンプレートから選ぶことができます。これらのテンプレートはそれぞれ独自のレイアウトを持っており、インポートすることができます：

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

ここでテンプレートを選択し、「次へ」ボタンをクリックします。

右側にフィードのライブプレビューが表示され、左側にカスタマイズオプションが表示されます。

これらのオプションで、フィードの種類、レイアウト、色、ヘッダーデザイン、投稿デザイン、その他多くのことをカスタマイズすることができます。

まず、左側のフィードレイアウトオプションを選択します。

イベントカレンダーには3種類のレイアウトがあります：リスト、メイソンリー、カルーセルです。

イベントを次々にリストアップしたい場合は、リストレイアウトを 選ぶことができます。

Facebookのイベントをカラムで表示するには、メイソンレイアウトを試してみて ください。

また、美しいカルーセルスライダーでイベントを表示できるカルーセルレイアウトもあります。

フィードレイアウトを選んだら、上部のカスタマイズ オプションをクリックして、以前のカスタマイズオプションに戻ります。

次に、Facebookフィードの配色を選ぶことができます。そのためには、左側の配色 オプションを選択します。

フィードの色は4種類から選べる。

• テーマから継承する：ウェブサイトの配色をコピーする
• Light：背景が明るく、文字色が濃い。
• 暗い:明るい色のテキストで背景を暗くします。
• カスタム：すべての色を自分で入力

そして、ヘッダーデザイン、フィードサイズ、余白など、イベントカレンダーの他の部分をカスタマイズすることができます。

Facebookイベントカレンダーのデザインに満足したら、保存 ボタンをクリックしてください。

最後に、Facebookイベントをウェブサイトのページ、サイドバー、フッターに埋め込む方法を紹介します。

ステップ5：Facebookのイベントカレンダーを表示する

カスタマイズが完了したら、Facebookのイベントカレンダーをウェブサイトに表示することができます。FacebookページのイベントをWordPressに表示するには、2つのオプションがあります。

Facebookイベントカレンダーをページに埋め込む

WordPressにFacebookのイベントを埋め込むには？FacebookのイベントカレンダーをWordPressのページに掲載するには、まず、ライブエディタの右上にある埋め込み ボタンをクリックしてください。

Facebookのイベントカレンダーを掲載する場所を選択するための新しいポップアップが表示されます。そこで、「ページに追加」ボタンをクリックして次に進みます。

そうしたら、今度はウェブページのリストから選ぶことができます。Facebookのイベントカレンダーを掲載したいページを選択し、「追加」をクリックしてください。

これで、プラグインはあなたが選んだページにあなたを送ります。

このページで、小さなプラスアイコン（+）を クリックし、ドロップダウンメニューから Facebookフィードウィジェットを 選択して、Facebookイベントカレンダーを追加します。

これで、Facebookのイベントカレンダーがウェブサイトに追加されました！Facebookページのイベントカレンダーフィードがどのように見えるか、あなたのウェブサイトにアクセスしてみてください。

次に、このプラグインを使ってFacebookのイベントフィードをウェブサイトのサイドバーやフッターに埋め込む方法をご紹介します。

それでは、facebookイベントウィジェットをウェブサイトに配置する方法を見てみましょう。

Facebookのイベントカレンダーをサイドバーやフッターに表示する

2つ目の方法は、サイドバーやフッターなど、ウェブサイトのウィジェット対応エリアにFacebookイベントを埋め込むことです。

始めるには、まずライブエディターでフィードを開く必要があります。

WordPressのダッシュボードからFacebookフィードメニューを開くと、すべてのFacebookフィードが表示されます。

そのリストから、フェイスブックのイベント・フィードをクリックする。

Facebookフィードプラグインのビジュアルカスタマイザーに戻ります。ここで、一番上の埋め込み ボタンをクリックしてください。

このプラグインは、Facebookイベントウィジェットの場所を選択できるポップアップを表示します。ウィジェットに追加 ボタンをクリックするだけで続行できます。

そうすると、プラグインが自動的にウィジェットページに移動します。ここで、Facebookカレンダーウィジェットをサイドバーまたはフッターに追加できます。すべてのウィジェットオプションのリストから、サイドバーをクリックします。

Facebookイベントカレンダーウィジェットをフッターに表示するには、代わりにフッターオプションを クリックしてください。

とりあえず、フェイスブックのイベント・ウィジェットをサイドバーに掲載する。

サイドバーかフッターのどちらかをクリックすると、ドロップダウンメニューにアクティブなウィジェットが表示されます。

そこで、プラス・アイコン（＋）を クリックして、新しいウィジェットを追加することができる。

Facebookのカレンダーウィジェットをウェブサイトのサイドバーに表示するには、オプションから Facebookフィードウィジェットを 選択します。

これで完了です！あなたのウェブサイトのフロントエンドで、Facebookイベントカレンダーウィジェットがどのように見えるか、自由にチェックしてみてください。

それで終わりだ！

Facebookのイベントカレンダーをウェブサイトに表示する方法について、この記事がお役に立てれば幸いです。Facebook Feed Proを使えば、数クリックでサイトにイベントカレンダーを表示できます。

わずか数分で、Facebookのイベントを盛り上げたり、フォロワーを増やしたり、ウェブサイトの訪問者を引き込んだり、その他いろいろなことができます。

イベントカレンダーを埋め込む準備はできましたか？今すぐFacebook Feed Proを始めましょう！

フォロワーを増やし、イベントに参加する人を増やしたいですか？Facebookのフォロワーを増やす方法について、こちらのガイドをご覧ください。

よくある質問

自分のウェブサイトにイベントを表示するには、Facebookページの管理者である必要がありますか？

はい、手動のiFrame方式を使用している場合はその通りです。Facebook APIの制限により、ページプラグインは、管理権限を持つページからのイベントデータしか取得できません。ご自身のビジネスや組織のページであれば問題ありません。しかし、管理していないページのイベントを表示しようとする場合、iFrame方式は機能しません。

自分のウェブサイトにFacebookのイベントを無料で表示することはできますか？

はい。Facebookのページプラグインを使った手動のiFrame方式は無料で、ページの管理者であれば2026年現在も利用可能です。ただし、デザインのカスタマイズやフィルタリング機能がなく、自動更新も行われないというデメリットがあります。Smash Balloon Custom Facebook Feed Proは有料オプションですが、フィードをサイトのデザインに合わせたり、自動更新を行ったり、表示したいイベントだけを厳選したりしたい場合には、その価値があります。

Facebookのイベントは、私のサイトで自動的に更新されますか？

はい、「Smash Balloon Custom Facebook Feed Pro」を使えば可能です。Facebookで新しいイベントを追加したり、既存のイベントを更新したりすると、ウェブサイトのフィードにその変更が自動的に反映されます。WordPressに再度ログインしたり、手動で何か操作を行ったりする必要はありません。

今後のイベントだけを表示して、過去のイベントは非表示にすることはできますか？

はい。このプラグインでは、イベントフィードのフィルタリングや並べ替えが可能で、今後のイベントのみを表示したり、一度に表示する件数を制限したり、表示順を調整したりできます。これはプラグインの中でも特に便利な機能の一つであり、定期的なイベントを多数開催しており、過去のイベントが長々と表示されるのを避けたい団体にとって特に役立ちます。

Facebookページではなく、Facebookグループでもこれを使えますか？

Smash Balloon Custom Facebook Feed Proの「イベント」フィードタイプは、Facebookグループではなく、Facebookページに接続します。FacebookのAPI制限により、グループのイベントデータには同様の方法でアクセスすることができません。イベントがページに掲載されている場合は、そのままご利用いただけます。グループにのみ掲載されている場合は、ページにも同時に投稿する必要があります。

Facebookマーケティングのヒントとガイド

• Facebookフィードをウェブサイトに：参考にしたい事例
• フェイスブックのレビューをウェブサイトに埋め込む方法（初心者ガイド）
• ウェブサイトにInstagramチャットを追加する方法（ステップバイステップガイド）
• 今年ビジネスを成長させる最高のFacebookプラグイン
• エンゲージメントを高めやすいFacebook投稿の種類

今すぐFacebookイベントの掲載を始めましょう

手動でのiFrame方式は機能しますが、サイト上ではFacebookのデフォルトのデザインが表示され、自動更新されず、ページの管理者である場合にのみ機能します。

多くのサイトにとって、それだけで候補から外れることになる。

「Smash Balloon Facebook Feed Pro」を使えば、サイトのデザインに合わせたフィードが表示され、自動的に更新されるほか、どのイベントを表示するかを細かく設定できます。

イベントフィードが重要な役割を果たすサイトであれば、どこでもこのバージョンを使うでしょう。

Smash Balloon Facebook Feed Pro を今すぐ始める →