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

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

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

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

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

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

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

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

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

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

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

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

• ステップ1：WordPressにFacebookイベントプラグインを追加する
• ステップ2：FacebookをWordPressに接続し、イベントアクセストークンを作成する
• ステップ3：埋め込みFacebookイベントカレンダーをカスタマイズする
• Step 4: Embed Your Facebook Event Calendar in WordPress

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

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

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

まず、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までスクロールします。これで、一時的なトークンをこのフィールドに貼り付けて、「Extend my token」をクリックできます。

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ページをフォローしたり、他の人と共有したりできるようにします。

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

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

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

大量のフォロワー数は、より多くの人々がソーシャルメディアであなたをフォローし、イベントに参加することを奨励する素晴らしい ソーシャルプルーフ です。それを念頭に置いて、「Show fans」スイッチを有効にするクリックを検討してください。

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

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

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

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

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

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イベントを表示できます。

「Embed Feed」ポップアップで「Add to a Widget」をクリックする必要があります。その後、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イベントカレンダーを追加する方法を学ぶのに役立ったことを願っています。また、ブログを成長させるための最高のWordPress Facebookプラグインや、ソーシャルメディア用にWordPress投稿をスケジュールする方法についても、専門家のおすすめをご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。