フェイスブックでイベントを宣伝するとき、大きな問題にぶつかった。私のウェブサイトを見ている人たちは、そのイベントの存在を知らなかったのだ。彼らは私のページを定期的にチェックしているわけではなかったので、参加表明のためだけに他の場所に送りたくないのだ。
そこで、WordPressの中にFacebookのイベントを埋め込む方法を探しました。そうすれば、訪問者は何が行われるかを見ることができ、クリックするだけで参加でき、ずっと私のサイトにとどまることができる。
このガイドでは、WordPressサイトにFacebookのイベントを表示する3つの方法を紹介します。このガイドでは、WordPressサイトにFacebookのイベントを表示する3つの方法を紹介します。シンプルなウィジェットでも、完全なイベントカレンダーでも、独自に更新する埋め込みフィードでも構いません。
なぜWordPressにFacebookイベントを埋め込むのか？
WordPressにFacebookイベントを埋め込むと、サイト上にイベントを直接表示することができます。更新を自動的に同期することで時間を節約し、RSVPオプションで興奮を高め、社会的証明を示すことで信頼性を高めます。カスタマイズオプションにより、あなたのウェブサイトのデザインにマッチした表示が可能です。
WordPressにFacebookのイベントを埋め込む方法
このガイドでは、WordPressウェブサイトにFacebookイベントを設置する3つの方法をご紹介します：
- 特別なイベントページを作る。これは、ウェブサイトにイベント専用のVIPセクションを設けるようなものです。人々が簡単にイベントを見つけて申し込むことができます。
- Facebookからイベントを取得するツールを使いましょう。このツールは架け橋のような役割を果たし、あなたのウェブサイトのどのページにもイベントを取り込むことができます。さらに、あなたのスタイルに合わせてイベントの見え方を変えることができます。
- コードのスニペットを追加する（もしそれに抵抗がなければ）。Facebookでは、ちょっとしたコードを取得することで、あなたのサイトに直接イベントを掲載することができます。これは最も簡単な方法ですが、見栄えを良くするためのオプションはあまりありません。
どのエンベッディング方式が最適かを知るには？
あなたのウェブサイトにFacebookのイベントフィードを表示するための最良の方法がわからない？WordPressにFacebookカレンダーを埋め込むための正しい方法を選択するのに役立つ比較表を並べてみました。
| 方法 | 特徴 | 使いやすさ | 価格 | モバイルフレンドリー | 無料版は？ | 無料版の制限 |
|---|---|---|---|---|---|---|
| シードプロ | ランディングページ、Facebookとの統合 | 簡単 | 有料/無料 | はい | はい | 機能制限あり、Facebookページブロックは有料 |
| スマッシュ・バルーン | カスタマイズ可能なFacebookフィード | 中程度 | 有料/無料 | はい | はい | 限定機能 |
| 手動埋め込み（コード） | 基本的なイベント表示 | 難しい | 無料 | たぶん | はい | コーディングの知識が必要 |
さあ、飛び込もう。
WordPressのランディングページにFacebookのイベントを表示する方法
SeedProdは人気のドラッグ＆ドロップWordPressページビルダーで、coming soonとメンテナンスモード機能を備えています。このプラグインを使えば、CSSやPHPのコードを書いたり、開発者を雇ったりすることなく、コンバージョンの高いランディングページを作成することができます。
Elementorをご存知なら、それと同じように機能するが、より合理化されたユーザーインターフェイスとシンプルさに重点を置いている。
また、SeedProdにはコンテンツブロックが含まれており、Facebookのイベントカレンダー、ライブページフィード、RSVPツールなどのソーシャルメディアコンテンツを埋め込むことができます。
最も注目すべきはフェイスブック・ブロックで、これを使えば以下のようなソーシャルメディア・コンテンツを埋め込むことができる：
- Facebookの「いいね！」ボタン
- Facebookのコメント
- フェイスブックページ
- フェイスブックへの埋め込み
この方法では、Facebookページブロックを使ってランディングページにイベントを追加します。一番いいところは、アクセストークンやショートコード、IDをコピー＆ペーストする必要がないことです。
1.SeedProdのインストールとアクティベーション
まずは、SeedProdプラグインをインストールし、有効化してください。このガイドでは、必要な高度なFacebookブロックを備えているSeedProd Proを使用します。
2.WordPressでランディングページを作る
WordPressサイトにSeedProdをインストールした後、新しいランディングページを作成する必要があります。
幸いなことに、WordPressでランディングページを作成するためのステップバイステップのガイドに従って、すぐに始めることができます。また、このガイドに従ってイベントのランディングページを特別に作成することもできます。
ランディングページのデザインが完成したら、SeedProd " ページに移動し、チュートリアルに従って作成したランディングページの編集をクリックします。
SeedProdビジュアルエディターが開き、イベントを追加することができます。
3.Facebookページブロックを追加する
次に、Facebookイベントカレンダーを表示したいページのスペースを探します。次に、右側の「詳細ブロック」セクションに移動し、Facebookページブロックを見つけます。
このブロックをページに追加するには、左からプレビュー上にドラッグします。
次に、Facebookページブロックのコンテンツ設定で、あなたのページのURLを貼り付けます。このようにして、SeedProdはあなたの公開Facebookイベントフィードを取り込み、WordPressのレイアウト内に表示します。
デフォルトでは、SeedProdは自動的にFacebookページのタイムラインを表示します。代わりにイベントを表示するには、タブ見出しの下にあるイベントオプションをクリックしてください。
同じパネルで、ヘッダーのスタイルの変更、カバー写真の表示・非表示、配置の調整などもできる。
また、Facebookページのエンゲージメントを高めたい場合は、Facebook埋め込みブロックを使って、投稿、Facebookビデオ、コメントをイベントスケジュールと一緒に埋め込むことができます。
4.ランディングページを公開する
あとは、右上の保存ボタンの横にあるドロップダウン矢印をクリックし、公開をクリックするだけです。
プレビューをクリックすると、ランディングページにイベントカレンダーが表示されます。
これだけです。ウェブサイト訪問者は、ランディングページであなたのFacebookイベントを見ることができます。
しかし、Facebookイベントフィード全体を表示したい場合は、以下の方法を試してみることをお勧めします。
FacebookのイベントをWordPressサイトに同期させる方法
この方法では、Smash Balloon Custom Facebook Feed Proプラグインをインストールして有効化する必要があります。このステップについては、WordPressプラグインのインストール方法に関するステップバイステップのチュートリアルをご覧ください。
1.新しいFacebookフィードを作成する
プラグインをインストールして有効化したら、WordPressダッシュボードからFacebookフィード " すべてのフィードメニューに移動します。そこから、新規追加ボタンをクリックして、イベントフィードの作成を開始します。
次のページでは、ウェブサイトに追加できる9種類のFacebookフィードをご紹介します：
- タイムライン
- 写真
- ビデオ
- アルバム
- イベント
- レビュー
- さらに
Eventsオプションを選択し、Next ボタンをクリックして続行します。
2.Facebookページのソースを選択する
フィードの種類を選んだら、次はFacebookページのソースを選びます。これは、Facebookグループでも、ビジネスのイベントを投稿するページでもかまいません。
ソースを追加するには、「新規追加」ボタンをクリックします。
FacebookページIDとイベントアクセストークンの入力を求めるポップアップが開きます。
あなたのページのアプリIDとアプリシークレットトークンの見つけ方がわからない場合は、以下の手順に従ってください。
Facebookアプリの詳細を入力した後、Add Sourceボタンをクリックします。
次の画面で、新しく追加したFacebookページが表示されます。そのページを選択し、「次へ」をクリックして次に進みます。
3.Facebookイベントカレンダーのレイアウトをカスタマイズする
さあ、イベントのカスタマイズを始めましょう。カスタマイズオプションは左側に、フィードのプレビューは右側にあります。
カスタマイズオプションでは、フィードの種類、レイアウト、色、ヘッダーデザイン、投稿デザインなどを変更できます。
まず、左側のフィードレイアウトオプションを選択します。
このオプションでは、リスト、メイソンリー、カルーセルの3種類のレイアウトを設定できます。
イベントを次々に表示するには、リストレイアウトオプションを選択します。
複数カラムのレイアウトでイベントを表示したい場合は、メイソンリーオプションを選択することもできます。
最後に、カルーセルオプションがあり、あなたのイベントを見事な画像スライダーで表示することができます。
あなたのウェブサイトに最適なレイアウトを選択してください。そして、もう一度カスタマイズボタンをクリックすると、前の設定に戻ります。
4.Facebookイベントフィードの配色をカスタマイズする
フィードの色を変更したい場合は、「配色」の見出しをクリックしてください。このパネルでは、次のような4つの異なる色のオプションから選択することができます：
- テーマから継承する：ウェブサイトの配色をコピーする
- Light：背景が明るく、文字色が濃い。
- 暗い: 明るい色のテキストで背景を暗くします。
- カスタム：すべての色を自分で入力
その後、ヘッダーデザイン、フィードサイズ、マージンなど、その他の設定をカスタマイズできる。
すべての見た目に満足したら、「保存」 ボタンをクリックします。
5.WordPressページにFacebookからのイベントを表示する
Smash Balloonでは2つの方法でFacebookイベントを埋め込むことができます。
まず、右上の埋め込みボタンをクリックします。様々な公開オプションのポップアップが開きます。
通常のWordPressページにFacebookイベントを埋め込むには、「ページに追加」ボタンをクリックします。
そこから、あなたのウェブサイトの任意のページをリストから選択し、追加ボタンをクリックすることができます。
このオプションをクリックすると、選択したページの編集画面に移動します。そこからプラスアイコン（+）をクリックし、カスタムFacebookフィードウィジェットを選択します。
ページを更新または公開する際、プレビューしてイベントの外観を確認することができます。
6.WordPressのサイドバーにFacebookのイベントを追加する
フィードをサイドバーエリアに追加したい場合は、埋め込みウィンドウの「ウィジェットに追加」ボタンをクリックするだけです。
このオプションをクリックすると、ウィジェットのページに移動し、イベントを表示するサイドバーを選択できます。
サイドバーを選択した後、プラスアイコン（+）をクリックして新しいウィジェットを追加し、カスタムFacebookフィードウィジェットを選択します。
それが完了すると、ウェブサイトをプレビューして、ウェブサイトのサイドバーエリアにFacebookイベントを表示することができます。
WordPressにプラグインなしでFacebookイベントを追加する
WordPressのプラグインを多用するのが苦手な方は、プラグインなしでWordPressにFacebookのイベントを表示することができます。
しかし、この方法はサイトにコードを追加する必要があるため、初心者の方にはお勧めできません。また、イベントの見栄えもあまりコントロールできません。
1.Facebookページプラグインのウェブサイトをご覧ください。
この方法を始めるには、Facebookページ・プラグインが必要です。これはWordPressのプラグインではなく、Facebookが開発者のために作ったスタンドアローンのツールです。
Facebookプラグインツールにアクセスし、FacebookページのURLを貼り付ける。
FacebookページのURLを入力すると、タイムラインのプレビューが表示されます。Facebookのイベントを表示したいので、タブフィールドの "timeline "という単語を削除し、"events "と入力してください。
2.Facebookイベント埋め込みコードを生成する
プレビューパネルにページのイベントリストが表示されるようになりました。コードを取得するには、プレビューの下にある「コードを取得」ボタンをクリックしてください。
Get Codeボタンをクリックすると、2つのタブを持つライトボックスポップアップが開きます：JavaScript SDKとIFrameです。IFrameタブをクリックし、埋め込みコードをクリップボードにコピーします。
3.WordPressにFacebookイベントコードを埋め込む
次に、WordPressのウェブサイトにアクセスし、Facebookイベントを表示したい投稿またはページを編集します。
投稿またはページの編集画面でプラス（+）アイコンをクリックし、カスタムHTMLWordPressブロックを見つけます。
HTMLブロック内をクリックし、Facebookページプラグインツールの埋め込みコードを貼り付けます。
その後、投稿を保存または公開し、プレビューすると、Facebookイベントがあなたのウェブサイトにライブ表示されます。
このフィードの表示方法を変更したい場合は、Facebookページ・プラグインに戻り、再度wp embed Facebookコードを生成する必要があります。とはいえ、変更できるFacebookの設定は限られています。
イベント同期にiCal URLを利用する
Facebookのイベントをウェブサイトのカレンダーに統合したい場合は、iCalのURLを使うのが効率的です。
iCalのURLを取得し、使用する方法は以下の通り：
Facebookアカウントにログインし、イベントセクションに移動し、共有したいイベントを選択します。
右上に「カレンダーに追加」というボタンがあります。
このボタンをクリックし、ポップアップでエクスポートボタンを右クリックし、"リンクアドレスをコピー "を選択する。
このiCalのURLをWordPressカレンダープラグインや外部フィードをサポートするツールに貼り付けてください。これで、FacebookのイベントとWordPressのイベントカレンダーを自動的に同期できます。
これにより、Facebookのイベントとウェブサイトのカレンダーが自動的に同期されます。
Facebookイベントの埋め込みに関するよくある質問
WordPressでFacebookイベントの外観をカスタマイズするには？
このガイドにあるオプション以上のカスタマイズには、カスタムCSSやJavaScriptが必要になる場合があります。コーディングの知識があるユーザーは、WordPressテーマのスタイルやスクリプトを直接変更するか、子テーマを使用してFacebookのイベントフィードによりパーソナライズされたスタイルを適用できます。
Facebookのイベントが表示されない場合のトラブルシューティング方法は？
FacebookイベントがWordPressサイトに表示されない場合は、古いプラグイン、他のプラグインとの競合、Facebook APIの設定が正しくないなどの一般的な問題がないか確認してください。すべてのプラグインが最新であることを確認し、セットアップの正確性についてプラグインのドキュメントを確認することで、これらの問題を解決できることがよくあります。
Facebookイベントを埋め込むと、サイトのパフォーマンスに影響しますか？
WordPressにFacebookのイベントカレンダーを埋め込むと、埋め込みが多くのリソースをロードする場合、パフォーマンスに影響を与える可能性があります。ロード時間を短縮するには、SeedProdやSmash Balloonのようなツールを使用してください。これらは、サイトを遅くすることなくソーシャルフィードを表示するように最適化されています。
FacebookのグループイベントをWordPressに埋め込むことはできますか？
ほとんどのFacebook埋め込みツールは、公開ページのイベントのみをサポートしており、非公開イベントやグループイベントはサポートしていません。Facebookグループを運営している場合は、iCal同期方法を使用するか、WordPressページに手動でイベントをリストアップしてみてください。
FacebookイベントをWordPressに直接埋め込む方法はお分かりいただけたと思います。
イベントのコンバージョンを高めたいですか？次はSeedProdでイベントのランディングページを作ってみましょう。
WordPressサイトに関する以下のガイドもお勧めです：
- WordPressにFacebookページを追加する方法
- WordPressにFacebookの動画を埋め込む方法
- WordPressサイトにFacebookの「いいね！」ボタンを追加する方法
- Facebookグループのランディングページを簡単に作成する方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
