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

Facebookでイベントスケジュールが満載でも、WordPressサイトの訪問者は、それらのイベントを直接ページに表示しない限り、それを知りません。

Facebookイベントフィードは、Facebookページから直接イベントを取得し、ウェブサイトに自動的に表示することで、この問題を解決します。

このガイドでは、必要なFacebookアプリの作成から、完成したカレンダーのカスタマイズまで、すべてのセットアップを説明します。

これらのクイックリンクを使用して、手順をナビゲートできます。

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

WordPressでFacebookイベントを表示するには、Smash Balloon Facebook Feedプラグインが必要です。このプラグインを使用すると、Facebookの投稿、写真、動画、アルバムをWordPressウェブサイトに直接表示できます。

公式WordPressリポジトリからダウンロードできる無料のSmash Balloon Social Post Feedプラグインもあります。ただし、Facebookイベントを表示するには、Eliteライセンス（年間$149）にアップグレードする必要があります。

ライセンスを取得したら、プラグインをインストールして有効化できます。WordPressプラグインのインストール方法に関するガイドで、手順をステップバイステップで説明します。

有効化後、Facebookフィード » 設定に移動し、ライセンスキーフィールドにキーを貼り付けて、有効化をクリックします。

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

Facebookはページイベントを制限付きデータとして扱っているため、Smash Balloonは標準投稿のように自動的にプルすることはできません。代わりに、簡単なFacebookアプリを作成し、アクセストークンを生成して、そのトークンをプラグインに追加する必要があります。

開始する前に、個人のFacebookアカウントがイベントがホストされているFacebookページに管理者アクセスできることを確認してください。管理者でない場合、セットアップはエラーを表示せずに完了しますが、カレンダーは完全に空白のままになります。

Meta開発者として登録する

開始するには、Meta for Developersサイトにアクセスし、右上隅の「ログイン」をクリックします。Facebookは個人のみを開発者として登録できるため、ビジネスではなく、ページを管理している個人のFacebookプロフィールでサインインする必要があります。

初めての場合は、「新規アカウントを作成」をクリックし、画面の指示に従ってください。

Facebookは、開発者規約に同意し、SMSで電話番号を確認し、メールアドレスを確認するように求めます。完了すると、Facebookはアプリダッシュボードにリダイレクトします。

Facebookアプリを作成し、権限を追加する

アプリページで、右上隅の「アプリを作成」をクリックします。

「アプリの詳細」画面で、アプリの名前と連絡先メールアドレスを入力します。名前はあなたにのみ表示されるため、「マイイベント」のような簡単な名前で問題ありません。

次に進むには、「次へ」をクリックします。

「ユースケースを追加」画面で、左側のメニューから「コンテンツ管理」を選択します。

表示されたら、「あなたのページですべてを管理」を選択します。

「次へ」をクリックします。

「ビジネス」画面で、ビジネスポートフォリオを使用している場合は接続できます。この部分はオプションなので、「まだビジネスポートフォリオを接続したくありません」を選択して「次へ」をクリックすることもできます。

要件画面で、「次へ」をクリックして、追加の公開要件が適用されないことを確認します。

最後に、概要画面で設定を確認し、「アプリを作成」をクリックします。

これにより、新しいアプリのダッシュボードが開きます。ここから、「あなたのページですべてを管理」ユースケースをカスタマイズをクリックします。

このページでは、pages_show_listとbusiness_managementの権限が既に選択されていることに気付くでしょう。

リストで、これらの各権限の横にある「追加」をクリックします。

• pages_read_user_content
• pages_read_engagement
• pages_manage_engagement

追加されると、3つすべてに「テストの準備完了」ステータスが表示されます。

Facebookイベントフィードの表示には、Facebookによるアプリのレビューまたは公開は必要ないため、アプリを開発者モードのままにしておくことができます。

トークンを生成し、ページを接続する

アプリの左側サイドバーで、アプリ設定 » 基本に移動します。

ここに、「アプリID」と「アプリシークレット」フィールドがあります。

シークレットを表示するには、「表示」をクリックします。この情報はすぐに必要になるため、この画面を開いたままにしておきます。

新しいタブで、アプリが読み取ることを許可されているものをテストするためのFacebookのツールであるGraph API Explorerを開きます。まだ選択されていない場合は、「Meta App」ドロップダウンを開き、作成したばかりのアプリを選択します。

その後、「Add a Permission」ドロップダウンを開き、次の5つすべてを選択します: business_management, pages_manage_engagement, pages_read_engagement, pages_read_user_content, および pages_show_list。

5つすべてが「Permissions」リストに表示されたら、「Generate Access Token」をクリックします。

Facebookのログインウィンドウが表示され、アカウントを確認するように求められるので、「Continue」をクリックします。

次に、Facebookはアプリがアクセスできるページとビジネスを選択するように求めます。表示したいページを選択し、「Continue」をクリックします。

新しいトークンが「Access Token」フィールドに表示されます。横にあるコピーアイコンをクリックしてテキストをコピーできます。

この一時的なトークンは約1時間しか持続しないため、すぐにSmash Balloonプラグインに貼り付けます。WordPressダッシュボードに戻り、Facebook Feed » All Feedsに移動して、「Add New」をクリックします。

次の画面で、「Events」フィードタイプを選択し、「Next」をクリックします。

まだイベントソースが接続されていないため、「Select a Source」画面は空になります。「Add New」をクリックします。

App ID、App Secret、およびUser Access Tokenを対応するフィールドに貼り付け、「Connect」をクリックします。

接続されると、プラグインは管理しているFacebookページを取得し、リストに表示します。表示したいイベントのページを選択し、「Add」をクリックします。

ページが接続されたイベントソースとして表示されます。「Select a Source」画面でそれを選択し、「Next」をクリックして続行します。

カレンダーのレイアウトテンプレートを選択し、「Next」をクリックします。

このガイドではデフォルトのテンプレートを使用しますが、すべてのテンプレートは完全にカスタマイズ可能です。

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

フィードを作成すると、Smash Balloonカスタム機能に移動します。

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

これらの設定のほとんどはわかりやすいので、カレンダーに最も影響を与えるものに焦点を当てます。まず、Feed Layoutパネルが全体の形状を制御します。

ここでは、List、Masonry、Carouselのレイアウトを選択できます。Masonryは、さまざまなカードの高さを自然に調整する列状のグリッドにイベントを表示し、Carouselはカレンダーをインタラクティブなスライダーに変換し、訪問者がクリックして進むことができます。

同じパネルで、フィードの高さを調整し、「Number of Posts」を表示する数に設定できます。デスクトップとモバイルデバイスで個別のコントロールがあります。モバイルで投稿数を少なく表示すると、長いスケジュールが小さな画面を散らかしたり、他のコンテンツを隠したりするのを防ぐことができます。

変更を加えると、プレビューが自動的に更新されます。右上隅のデバイスボタンを使用して、デスクトップ、タブレット、モバイルデバイスでフィードがどのように表示されるかを確認できます。

デフォルトでは、カレンダーはWordPressテーマから色を引き継ぎます。別の外観を好む場合は、左側のメニューから「カラー スキーム」を選択して変更できます。

さらに下にあるヘッダー設定では、カレンダーの上部に配置され、訪問者をFacebookページに誘導するブロックを管理します。

ここから、ビジュアルヘッダーとテキストヘッダーを切り替えたり、タイトルと自己紹介のコピーをカスタマイズしたり、有効トグルを使用してヘッダーを完全にオフにしたりできます。

個々のイベントの外観を変更するには、**投稿 » 投稿スタイル**に移動します。

投稿タイプの下で、ボックスを選択すると各イベントが個別のパディングされたカード内に配置され、または通常を選択すると単一の区切り線でイベントを分離します。

ライトボックス機能もあり、誰かがイベントをクリックするとページ上にポップアップが表示されます。これにより、訪問者はサイトを離れることなく、スケジュール全体を閲覧できます。

その利便性により、Facebookページにクリックしてアクセスする人が少なくなる可能性があります。訪問者を直接Facebookページに送信することを好む場合は、有効トグルを使用してライトボックスを無効にできます。

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

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

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

まず、「ページに追加」をクリックできます。

イベントカレンダーを公開したいページを選択し、「追加」をクリックします。

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

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

その後、ブロックのパネルでドロップダウンを開き、以前に作成したイベントフィードを選択します。

ブロックは自動的に更新され、イベントカレンダーが表示されます。

埋め込みポップアップには、「ウィジェットに追加」オプションも含まれています。これは、サイドバーやフッターなどのウィジェット領域にカレンダーを配置する場合に便利です。さらに、標準ブロックがサポートされていない場所にコピー＆ペーストできるショートコードも提供します。

ページを公開した後、シークレットまたはログアウトしたブラウザウィンドウで開いて、今後のFacebookイベントが表示されているか確認してください。

カレンダーは読み込まれるが完全に空に見える場合は、ステップ2で説明したように、Facebookアカウントがページの管理者アクセス権を持っていることを再確認してください。

WordPressにFacebookイベントカレンダーを追加することに関するよくある質問

Facebookイベントをカレンダーに追加するにはどうすればよいですか？

手動でコピーするのではなく、購読します。ページのイベントカレンダーで、「カレンダーに追加」ボタンを見つけます。このボタンを右クリックすると、Googleカレンダー、Appleカレンダー、またはOutlookに貼り付けることができるリンクが表示されます。

購読は埋め込みとは別であることを覚えておいてください。カレンダーの購読は、イベントを個人のカレンダーアプリ内で同期させ続けますが、Smash Balloonのようなプラグインで埋め込むと、訪問者が見ることができるように、ライブスケジュールがウェブサイトに直接表示されます。

WordPressに最適なイベントカレンダープラグインは何ですか？

Facebookから取得するのではなく、サイトで直接イベントをホストしたい場合は、Sugar Calendarが最適です。繰り返しイベントを管理し、予約を受け付け、StripeまたはWooCommerceを通じてチケットを販売できます。

イベントはサイトでホストされるため、Facebookへの投稿を停止しても機能し続けます。

さらに詳しく見るには、Sugar Calendarのレビューをご覧いただくか、WordPressの最高のカレンダープラグインのまとめで代替案と比較してください。

この記事がWordPressにFacebookイベントカレンダーを追加する方法を学ぶのに役立ったことを願っています。また、WordPressの最高のFacebookプラグインの専門家による選択肢をご覧になるか、WordPressにFacebookタイムラインを表示する方法を学ぶこともできます。

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