WordPressにFacebookイベントカレンダーを追加する方法（簡単な方法）

Facebookで素晴らしいイベントカレンダーを整理したばかりなのに、WordPressサイトの訪問者はそれを見逃しています。イライラしますよね？

幸いなことに、FacebookイベントをWordPressサイトに直接統合するのは、思ったよりも簡単です。そして、作業量を倍増させることなく、オーディエンスのエンゲージメントを維持するための鍵となります。

このガイドでは、FacebookイベントカレンダーをWordPressサイトにシームレスに埋め込む方法を説明します。

ウェブサイトにFacebookイベントカレンダーを追加する理由

カレンダーがあれば、今後の ウェビナー、バーチャルリトリート、 オンライン説教、コーチングコールなどのイベントについて、人々が簡単に知ることができます。

Facebookには組み込みのイベントカレンダーがあり、対面およびオンラインイベントの両方をソーシャルメディアのフォロワーに宣伝するために使用できます。ただし、WordPressウェブサイトにのみアクセスする人は、このスケジュールを見ることができません。

それを念頭に置いて、FacebookカレンダーをWordPressに追加して、より多くの人が今後のイベントを見られるようにするのは良い考えです。これらの人々は、Facebookページにアクセスして、イベントに興味があることをマークしたり、Facebookであなたをフォローしたりするかもしれません。

WordPressカレンダープラグインを使用してイベントをウェブサイトに追加できます。ただし、各イベントを手動で追加するのは時間がかかる場合があります。

すでにFacebookイベントカレンダーを使用している場合は、ソーシャルメディアフィードをWordPressウェブサイトに追加する方がはるかに簡単です。

このフィードはFacebookからイベントを自動的に取得するため、時間と労力を大幅に節約できます。また、訪問者は常に最新のイベントを確認できるため、ウェブサイトを新鮮で魅力的なものに保つことができます。

それでは、WordPressにFacebookイベントカレンダーを追加する方法を見てみましょう。これらのクイックリンクを使用して、手順をナビゲートできます。

ステップ1：WordPressにFacebookイベントプラグインを追加する

WordPressにFacebookイベントカレンダーを埋め込む最も簡単な方法は、Custom Facebook Feed Proプラグインを使用することです。

Smash Balloonは、市場で最高のソーシャルメディアフィードプラグインです。これにより、Facebookページのレビュー、アルバム、ビデオなどをWordPressウェブサイトに簡単に表示できます。

まず、Custom Facebook Feed Proプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化したら、Facebook Feed » Settings に移動し、「License Key」フィールドにライセンスキーを入力してください。

この情報は、Smash Balloonウェブサイトのアカウントで見つけることができます。

キーを入力したら、「アクティベート」をクリックするだけです。

ステップ2：FacebookをWordPressに接続し、イベントアクセストークンを作成する

Smash Balloon カスタムFacebookフィードを使用すると、Facebookページからイベントを埋め込むことができます。イベントをライトボックスポップアップで表示することもできるため、訪問者はスケジュール全体をスクロールして確認できます。

最初の手順は、FacebookページをWordPressに接続することです。そのため、**Facebook Feed » All Feeds**に移動してから、「Add New」ボタンをクリックしてください。

次の画面では、Smash Balloonを使用してWordPressにFacebook動画を埋め込むこと、ステータス、コミュニティ投稿などを表示できることがわかります。

WordPressにFacebookイベントカレンダーを追加するには、「イベント」を選択し、「次へ」をクリックします。

次に、イベントカレンダーを取得するFacebookページを選択する必要があります。

これを行うには、「新規追加」ボタンをクリックします。

Facebookのセットアップ方法により、アプリを作成するように求めるポップアップが表示され、次にページIDとイベントアクセストークンを入力する必要があります。今すぐ行いましょう。

新しいタブで、Facebook開発者ページに移動します。

ツールバーで「ログイン」をクリックし、個人のFacebookアカウントのユーザー名とパスワードを入力します。

Facebook開発者サイトに初めてサインインする場合は、「開始する」をクリックしてから、画面の指示に従って無料アカウントを作成してください。

Facebook開発者ダッシュボードにログインしたら、「アプリを作成」ボタンをクリックします。

次の画面で、アプリの主なユースケースを選択する必要があります。

「Facebookログインを設定する」は、WordPressにソーシャルログインを追加する場合に役立ちます。ただし、WordPressにイベントカレンダーを追加するため、「その他」を選択してから「次へ」ボタンをクリックする必要があります。

これで、Facebookページで作成できるさまざまなアプリが表示されます。

Facebookイベントを埋め込むには、「Business」を選択してから「Next」をクリックする必要があります。

次の画面で、アプリに名前を付けます。これは参照用ですので、好きな名前を自由に使用できます。

ここでは、メールアドレスを入力し、オプションでビジネスアカウントを追加することもできます。入力した情報で問題がなければ、「アプリを作成」をクリックしてください。

しばらくすると、新しいFacebookアプリのダッシュボードが表示されます。

左側のメニューで「設定」をクリックし、「基本」を選択します。

ダッシュボードにはデフォルトでApp IDが表示されます。

App Secretを表示するには、「表示」ボタンをクリックしてください。

新しいタブで、Smash Balloonの公式ドキュメントにアクセスしてください。

次に、ステップ3を見つけて、App IDとApp Secretをフィールドにコピーします。

別の新しいタブで、Facebook Graph API Explorerにアクセスしてください。

「Meta App」ドロップダウンで、先ほど作成したFacebookアプリを選択し、「Add a Permission」をクリックします。

表示されるドロップダウンメニューで、「Events Groups Pages」をクリックする必要があります。次に、次のすべての権限を選択します：page_events、pages_read_engagement、pages_read_user_content。

これらの権限を追加した後、「アクセストークンを生成」をクリックします。

表示されるポップアップで、イベントを取得したいFacebookページの横にあるチェックボックスをオンにします。

次に、「次へ」ボタンをクリックします。

これで、FacebookはSmash Balloonがアクセスできるすべての情報と実行できるアクションを表示します。

Smash BalloonのFacebookページへのアクセスを制限するには、スイッチをクリックして無効にするだけです。ただし、これによりWordPressブログまたはウェブサイトに埋め込むことができるイベントに影響が出る可能性があるため、すべてのスイッチを有効にしておくことをお勧めします。

パーミッションの設定が完了したら、「完了」をクリックします。

しばらくすると、WordPressウェブサイトがFacebookに接続されたことを確認するメッセージが表示されるはずです。それが完了したら、「OK」をクリックする準備ができました。

Graph API Explorerダッシュボードに戻ると、約1時間有効な一時的なアクセストークンが表示されます。

これを永続的なアクセストークンにするには、Smash Balloonのドキュメントに戻り、手順13までスクロールしてください。これで、一時トークンをこのフィールドに貼り付けて、「トークンを延長する」をクリックできます。

Smash Balloonは、永続的なページアクセストークンを作成します。

この値をコピーして、WordPressダッシュボードに戻ります。「イベントアクセストークン」フィールドにトークンを貼り付けることができます。

最後に、FacebookページのIDが必要です。

新しいタブでページにアクセスし、アドレスバーを確認するだけで済みます。ページIDは id= の後の値です。たとえば、次の画像では、ページIDは 10006740374000 です。

この値をコピーしてから、WordPressダッシュボードに戻ってください。

これで、IDを「FacebookページID」フィールドに貼り付けてから、「ソースを追加」をクリックできます。

次の画面で、イベントカレンダーに使用したいテンプレートを選択してください。

Smash Balloonのすべてのテンプレートは完全にカスタマイズ可能なので、WordPressでカスタムFacebookフィードを表示する方法に応じてデザインを微調整できます。

「デフォルト」テンプレートを使用していますが、任意のテンプレートを使用できます。選択後、「次へ」をクリックしてください。

Smash Balloon は、Facebookページとテンプレートに基づいてフィードを作成します。これは良い出発点ですが、イベントがサイトに表示される方法を微調整したい場合があります。

ステップ3：埋め込みFacebookイベントカレンダーをカスタマイズする

フィードを作成すると、Smash Balloonエディタに自動的に移動します。

右側にはFacebookイベントカレンダーのプレビューが表示されます。左側には、サイトでのイベントの表示方法をカスタマイズするために使用できるさまざまな設定が表示されます。

これらの設定のほとんどは自明ですが、いくつかの主要な領域を簡単に説明します。

使用しているテンプレートを変更したい場合は、「テンプレート」をクリックしてください。次に、「変更」ボタンを押して新しいテンプレートを選択します。

これらの設定が完了したら、「カスタマイズ」リンクをクリックして、Smash Balloonエディターのメイン画面に戻ることができます。

次に、「フィードレイアウト」設定を確認します。

この画面では、マソンリーレイアウトとリストレイアウトを切り替えたり、フィードの高さを変更したりできます。

変更を加えるとプレビューが自動的に更新されるため、Facebookイベントカレンダーの外観に満足するまでさまざまな設定を試すことができます。

デフォルトでは、Smash Balloonはデスクトップコンピュータとモバイルデバイスで異なる数のFacebookイベントを表示します。

上部右隅にあるボタンの行を使用して、デスクトップコンピューター、タブレット、スマートフォンでイベントカレンダーがどのように表示されるかをプレビューできます。

ウェブサイトのモバイル版をテストした後、すべてのコンテンツが画面に快適に収まるように、スマートフォンやタブレットに表示するイベントの数を変更したい場合があります。

この変更を行うには、「投稿数」セクションを見つけて、「モバイル」フィールドに別の番号を入力するだけです。

他のオプションとして、「列」設定を変更して、スマートフォンやタブレットで表示される列数を少なくすることもできます。

例えば、デスクトップでは3列、タブレットでは2列、モバイルデバイスでは1列を表示しています。

カレンダーがすべてのデバイスでどのように表示されるかに満足したら、「カスタマイズ」をクリックしてメインのエディタ画面に戻ります。

ここで、次の設定オプションである「カラースキーム」をクリックします。

デフォルトでは、Smash BalloonはイベントカレンダーのWordPressテーマと同じ配色を使用します。

この表示が気に入らない場合は、「ライト」または「ダーク」のカラースキームに切り替えることができます。

他のオプションとして、「カスタム」を選択して独自のカラーテーマをデザインすることもできます。

コントロールを使用して、リンクの色、背景色、WordPressでのテキストの色などを変更できます。

デフォルトでは、Smash Balloon はイベントカレンダーの上にヘッダーを追加します。これにより、訪問者はイベントが Facebook ページやビジネスに関連していることを認識でき、Facebook ページへの訪問を促すこともできます。

ヘッダーセクションをカスタマイズするには、左側のメニューで「ヘッダー」をクリックします。まず、ビジュアルヘッダースタイルとテキストヘッダースタイルの間で切り替えることができます。

「ビジュアル」スタイルを使用している場合は、コントロールを使用してヘッダーサイズを変更したり、カバー写真を非表示にしたり、背景色を変更したりすることもできます。

「テキスト」スタイルを使用している場合は、ヘッダーに表示されるテキストをカスタマイズできます。

フォントサイズ、色などを変更することもできます。

よりシンプルなイベントカレンダーを作成したい場合は、「有効にする」トグルをクリックしてヘッダーをオフにすることで、いつでもヘッダーを削除できます。

これが完了したら、左側のメニューから「投稿スタイル」を選択して、個々のイベントのカレンダーでの表示方法を変更できます。

次に、「投稿スタイル」を再度クリックします。

この画面では、カレンダーの通常のレイアウトとボックスレイアウトを選択できます。

「ボックス」を選択した場合、各イベントにカラー背景を作成できます。また、ボーダーラディウスを大きくして角を丸くし、ボックスシャドウを追加することもできます。

「通常」を選択した場合、さまざまなイベントを区切る線の太さと色を変更できます。

次の画像では、カレンダーに太い線を追加し、色を変更しました。

メイン設定画面に戻ることで、各イベント内の個々の部分をカスタマイズすることもできます。

再度「投稿スタイル」を選択しますが、今回は「個々の要素を編集」を選択します。

これで、Smash Balloonが各イベントに表示するタイトル、日付、イベントの詳細など、さまざまなコンテンツが表示されます。

コンテンツの一部を非表示にするには、ボックスのチェックを外すだけです。

要素の名前をクリックすることで、要素の外観を変更することもできます。

次の画面で表示されるオプションは異なります。ただし、通常はテキストのサイズとテキストの色を変更できます。

デフォルトでは、Smash Balloonはイベントカレンダーの下にFacebookいいね！ボタンを追加します。これにより、訪問者はFacebookページをフォローしたり、他の人と共有したりできます。

この機能は、より多くのフォロワーとソーシャルシェアを獲得できる可能性があるため、「いいねボックス」をクリックしてどのような変更ができるか確認する価値があります。

まず、「位置」ドロップダウンを使用して、ボックスをイベントカレンダーの上または下に表示するかどうかを変更できます。

ボックスのサイズや幅を変更したり、ページのカバーフォトを追加したりすることもできます。

多くのフォロワー数は、より多くの人々がソーシャルメディアであなたをフォローし、イベントに参加することを奨励する素晴らしい社会的証明です。それを念頭に置いて、「ファンを表示」スイッチをオンにすることをお勧めします。

「いいね！」ボックスを削除したい場合は、「有効」スイッチをクリックして青からグレーに切り替えるだけです。

「いいね！」ボタンの設定に満足したら、「さらに読み込むボタン」の設定に進むことができます。

「さらに読み込む」ボタンを使用すると、訪問者はすべてのイベントを簡単にスクロールできます。これを念頭に置いて、ボタンの背景色、ホバー状態、テキスト色を変更して、サイトの他の部分から目立たせたい場合があります。

ボタンはデフォルトで「もっと読み込む」と表示されますが、「テキスト」フィールドに入力することで独自のメッセージに置き換えることができます。

例えば、「その他のイベントを見る」や「カレンダーを見る」のようなものを使用したい場合があります。

Smash Balloonには、訪問者がイベントをポップアップで表示できるライトボックス機能があります。

イベントの画像をクリックするだけで、ライトボックスポップアップを開くことができます。

訪問者は、矢印を使用してすべてのイベントをスクロールできます。これは、WordPressにFacebookアルバムを埋め込むのと似ています。

デフォルトのライトボックスをカスタマイズするには、左側のメニューから「ライトボックス」を選択するだけです。

ここで、ライトボックスのテキスト、リンク、背景色を変更できます。

ライトボックスポップアップにより、訪問者はカレンダーを簡単に確認できますが、Facebookグループにアクセスせずにすべてのイベントをスクロールすることもできます。

Facebookページへの訪問を促進したい場合は、「有効にする」トグルをクリックして青から灰色に切り替えることで、ライトボックス機能を無効にしたい場合があります。

ライトボックス機能を無効にした場合、イベントをクリックすると新しいタブでFacebookページが開きます。

Facebookイベントカレンダーの外観に満足したら、変更を保存するために「保存」をクリックすることを忘れないでください。これで、このフィードをWordPressウェブサイトに追加する準備ができました。

ステップ4：FacebookイベントカレンダーをWordPressに埋め込む

Facebookイベントカレンダーを追加するには、画面上部にある「埋め込み」ボタンをクリックできます。

ショートコード、ブロック、またはウィジェットを使用して、WordPressにFacebookイベントカレンダーを追加できます。

私たちの経験では、ブロックまたはウィジェットを使用してFacebookフィードを埋め込む方が簡単なので、まずそれらの方法を紹介します。

Facebookイベントカレンダーをページに追加する

まず、「ページに追加」をクリックできます。その後、イベントカレンダーを追加したいページを選択し、「追加」をクリックしてください。

次に、ブロックエディターにリダイレクトされます。

ここで、「+ Add Block」ボタンをクリックして、「Facebook Feed」ブロックを見つけます。

それを行うと、以前に作成したイベントカレンダーでFacebookフィードを選択できます。

Gutenbergブロックは自動的にイベントカレンダーに変更されます。

ブロックテーマを使用しており、このブロックをテンプレートパーツまたはパターンに追加したい場合は、同じ手順でフルサイトエディターでも実行できます。

これを行う方法の詳細については、WordPressフルサイト編集に関するガイドをお読みください。

Facebookイベントカレンダーをウィジェット対応エリアに追加する

イベントカレンダーを表示できる別の場所は、サイドバーのようなウィジェット対応エリアです。これにより、ユーザーのメインコンテンツから注意をそらすことなく、今後のFacebookイベントを表示できます。

「フィードを埋め込む」ポップアップで「ウィジェットに追加」をクリックする必要があります。次に、WordPressウィジェットエディターページにリダイレクトされます。

次に、目的のウィジェット対応エリアにある「+ブロックを追加」ボタンをクリックし、「Facebookフィード」ブロックを選択します。

前と同様に、先ほど作成したイベントカレンダーフィードを選択するだけです。

完了したら、右上にある「更新」ボタンをクリックするだけです。

WordPressショートコードを使用してFacebookイベントカレンダーを追加する

ブロックまたはウィジェットの方法が機能しない場合は、ショートコードを使用してFacebookイベントカレンダーを追加してみてください。

Embed Feedポップアップで利用可能なコードをコピーし、ブロックまたはウィジェットエディタのショートコードブロックに貼り付けるだけです。

ショートコードの詳細については、WordPressにショートコードを追加する方法に関する記事をお読みください。

ボーナス：WordPressとFacebookの連携を強化する

WordPressとFacebookの連携をさらに強化したいですか？これらの追加ガイドをご覧ください：

• WordPressでFacebookのプレゼント企画を追加してエンゲージメントを高める方法 – Facebookのフォロワーを増やすエンゲージメントの高いプレゼント企画を実行する方法を学びます。
• WordPressからFacebookへ自動投稿する方法 – Facebookの投稿を自動化してソーシャルメディア戦略を合理化します。
• WordPressでFacebookのサムネイルが正しく表示されない問題を修正する方法 – 共有コンテンツがFacebookで常に魅力的に表示されるようにします。
• WordPressでFacebookとInstagramのoEmbed問題を修正する方法 – 一般的な埋め込み問題を解決して、シームレスなソーシャルメディア表示を実現します。
• WordPressでFacebookのタイムラインを表示する方法 – Facebookの活動をWordPressサイトに直接表示します。
• WordPressを使用してFacebookのいいね！を増やす簡単な方法 – これらの効果的な戦略でFacebookのオーディエンスを増やします。
• WordPressの投稿にFacebookのいいね！リアクションを追加する方法 – コンテンツにFacebookの人気リアクション機能を追加して、エンゲージメントを高めます。
• WordPressにFacebookのいいね！ボックス/ファンボックスを追加する方法 – 埋め込みいいね！ボックスで、より多くのいいね！とフォローを促進します。

この記事がWordPressにFacebookイベントカレンダーを追加する方法を学ぶのに役立ったことを願っています。また、ブログに最適なFacebookプラグインの専門家による選び方や、ソーシャルメディア用にWordPressの投稿をスケジュールする方法についてもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。