要約：WordPressにFacebookイベントを埋め込む方法。用途に応じて選べる4つの方法。
- SeedProd– ランディングページにFacebookページブロックを追加できます。アクセストークンや開発者設定は不要です。
- Smash Balloon– サイト内のどこにでもイベントカレンダーのフィードを表示できます。デザインを自由にカスタマイズできるため、継続的なイベントの掲載に最適です。
- iCal Sync– イベントのiCal URLをWordPressのカレンダープラグインに貼り付けるだけで利用できます。サイト全体のカレンダー統合に最適です。
- 手動でのHTML作成– Facebookのページプラグインからコードを生成し、カスタムHTMLブロックに貼り付けます。無料ですが、デザインの選択肢は限られています。
フェイスブックでイベントを宣伝するとき、大きな問題にぶつかった。私のウェブサイトを見ている人たちは、そのイベントの存在を知らなかったのだ。彼らは私のページを定期的にチェックしているわけではなかったので、参加表明のためだけに他の場所に送りたくないのだ。
そこで、WordPressの中にFacebookのイベントを埋め込む方法を探しました。そうすれば、訪問者は何が行われるかを見ることができ、クリックするだけで参加でき、ずっと私のサイトにとどまることができる。
もし、その方法を自分で探していたなら、ここはまさにぴったりの場所です。このガイドでは、WordPressサイトでFacebookのイベントを表示する4つの方法をご紹介します。
WordPressにFacebookのイベントを埋め込む方法
このガイドでは、WordPressウェブサイトにFacebookイベントを設置する3つの方法をご紹介します：
- 特別なイベントページを作る。これは、ウェブサイトにイベント専用のVIPセクションを設けるようなものです。人々が簡単にイベントを見つけて申し込むことができます。
- Facebookからイベントを取得するツールを使いましょう。このツールは架け橋のような役割を果たし、あなたのウェブサイトのどのページにもイベントを取り込むことができます。さらに、あなたのスタイルに合わせてイベントの見え方を変えることができます。
- コードのスニペットを追加する（もしそれに抵抗がなければ）。Facebookでは、ちょっとしたコードを取得することで、あなたのサイトに直接イベントを掲載することができます。これは最も簡単な方法ですが、見栄えを良くするためのオプションはあまりありません。
- iCal URL を使ってイベントを同期しましょう。Facebook のイベントから iCal リンクをコピーし、WordPress のカレンダープラグインに貼り付けてください。Facebook で新しいイベントを追加すると、サイトが自動的に更新されます。
どのエンベッディング方式が最適かを知るには？
あなたのウェブサイトにFacebookのイベントフィードを表示するための最良の方法がわからない？WordPressにFacebookカレンダーを埋め込むための正しい方法を選択するのに役立つ比較表を並べてみました。
| 方法 | 特徴 | 使いやすさ | 価格 | モバイルフレンドリー | 無料版は？ | 無料版の制限 |
|---|---|---|---|---|---|---|
| シードプロ | ランディングページ、Facebookとの統合 | 簡単 | 有料/無料 | はい | はい | 機能制限あり、Facebookページブロックは有料 |
| スマッシュ・バルーン | カスタマイズ可能なFacebookフィード | 中程度 | 有料/無料 | はい | はい | 限定機能 |
| 手動埋め込み（コード） | 基本的なイベント表示 | 難しい | 無料 | たぶん | はい | コーディングの知識が必要 |
| iCal同期 | あらゆるカレンダープラグインと同期 | 簡単 | 無料 | カレンダープラグインによって異なります | はい | 互換性のあるカレンダープラグインが必要です |
さあ、飛び込もう。
SeedProdを使ってFacebookイベントを埋め込むにはどうすればいいですか？
SeedProdは、WordPress用のドラッグ＆ドロップ式ウェブサイトビルダーで、「近日公開」や「メンテナンスモード」機能を備えています。このプラグインを使えば、CSSやPHPのコードを書いたり、開発者を雇ったりすることなく、コンバージョン率の高いランディングページを作成できます。
他の多くの埋め込み方法とは異なり、SeedProdのFacebookページブロックは、アクセストークンやApp ID、あるいは開発者設定を一切必要としません。
SeedProdでは、導入直後から数百種類のテンプレートが利用できるだけでなく、Facebookのイベントカレンダーやライブページフィード、出欠確認ツールなどのソーシャルメディアコンテンツを、コードを一切書かずに埋め込めるコンテンツブロックも搭載されています。
最も注目すべきはフェイスブック・ブロックで、これを使えば以下のようなソーシャルメディア・コンテンツを埋め込むことができる：
- 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イベントフィード全体を表示したい場合は、以下の方法を試してみることをお勧めします。
WordPressでFacebookのイベントカレンダーをすべて表示するにはどうすればいいですか？
この方法では、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イベントを表示することができます。
プラグインを使わずに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の設定は限られています。
クライアントのサイトや本番環境でこの方法を採用する前に、まずはご自身のFacebookページでテストを行ってください。Facebookの「ページプラグイン」のイベントタブは、2016年以降、対応状況が不安定であり、アカウントによって結果が異なります。イベントが表示されない場合は、代わりに上記のSmash BalloonまたはSeedProdの方法をご利用ください。
FacebookのイベントをWordPressのカレンダーに同期させるにはどうすればいいですか？
Facebookのイベントをウェブサイトのカレンダーに統合したい場合は、iCalのURLを使うのが効率的です。
iCalのURLを取得し、使用する方法は以下の通り：
Facebookアカウントにログインし、イベントセクションに移動し、共有したいイベントを選択します。
右上に「カレンダーに追加」というボタンがあります。
このボタンをクリックし、ポップアップでエクスポートボタンを右クリックし、"リンクアドレスをコピー "を選択する。
このiCalのURLをWordPressカレンダープラグインや外部フィードをサポートするツールに貼り付けてください。これで、FacebookのイベントとWordPressのイベントカレンダーを自動的に同期できます。
これにより、Facebookのイベントとウェブサイトのカレンダーが自動的に同期されます。
Facebookのイベントが表示されない場合の対処法
イベントが表示されない場合は、以下の4つの確認事項を行うことで、最もよくある問題を解決できます。
- Facebookのプライバシー設定を確認してください。イベントやページは「公開」に設定されている必要があります。非公開のイベントや限定公開のページは、外部埋め込みでは表示されません。
- 広告ブロック機能やセキュリティプラグインを無効にしてください。一部のセキュリティプラグインやCookieプラグインは、Facebookからの外部スクリプトをブロックすることがあります。テストとして、シークレットウィンドウでページを読み込んでみてください。
- JavaScript SDKではなく、iFrameコードを使用してください。手動で埋め込む場合は、必ず「iFrame」タブを選択してください。JavaScript SDK版は、ブラウザ間で安定性が劣ります。
- これらの方法がどれも効果がない場合は、プラグインに切り替えてみてください。FacebookのPage Pluginは2016年以降、イベントのサポートが不安定になっています。SeedProdやSmash Balloonを使えば、より安定した結果が得られます。
Facebookイベントの埋め込みに関するよくある質問
なぜWordPressサイトにFacebookのイベントが表示されないのですか？
最も一般的な原因としては、プライバシー設定（イベントまたはページが「公開」設定になっている必要があります）、Facebookのスクリプトをブロックする広告ブロックツールやセキュリティプラグイン、あるいはiFrame版ではなくJavaScript SDKによる埋め込みを使用していることが挙げられます。手動での埋め込みでも解決しない場合、Facebookの「Page Plugin」の「イベント」タブは2016年以降、動作が不安定になっています。より安定した結果を得るには、SeedProdまたはSmash Balloonへの切り替えをご検討ください。
プラグインを使わずにFacebookのイベントを埋め込むことはできますか？
はい。Facebookの「ページプラグイン」ツールを使用してiFrame埋め込みコードを生成し、それをWordPressの「カスタムHTML」ブロックに貼り付けてください。ただし、デザインのカスタマイズや自動更新機能は利用できず、表示結果はアカウントによって異なります。より安定した埋め込みを行うには、SeedProdやSmash Balloonの方が適しています。
Facebookのイベントを埋め込むと、サイトの表示速度は遅くなりますか？
方法によっては可能です。手動での埋め込みでは、Facebookから外部のJavaScriptやiFrameコンテンツを読み込むため、ページの負荷が増加します。SeedProdやSmash Balloonといったプラグインは、その負荷を最小限に抑えるように設計されています。サイトの表示速度を重視する場合は、SeedProdの「Facebook Page」ブロックをご利用ください。私のテストでは、わずか16回のHTTPリクエストで556ミリ秒で読み込まれました。
FacebookのグループイベントをWordPressに埋め込むことはできますか？
ほとんどの埋め込みツールは、公開イベントのみに対応しており、非公開イベントやグループイベントには対応していません。Facebookグループを運営している場合は、iCal同期が最適な方法です。また、WordPressのページにグループイベントを手動で掲載し、参加の返答（RSVP）用にFacebookのイベントページへのリンクを貼ることもできます。
これで、WordPressにFacebookのイベントを直接埋め込む方法がわかりました。イベントの全フィード、単一のタブ、カレンダーとの同期など、どのような形式でも、ここにぴったりの方法があります。
イベントのコンバージョンを高めたいですか？次はSeedProdでイベントのランディングページを作ってみましょう。
WordPressサイトに関する以下のガイドもお勧めです：
- WordPressにFacebookページを追加する方法
- WordPressにFacebookの動画を埋め込む方法
- WordPressサイトにFacebookの「いいね！」ボタンを追加する方法
- Facebookグループのランディングページを簡単に作成する方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
