要約：WordPressにFacebookイベントを埋め込む方法。 4つの方法があり、それぞれ異なるユースケースに適しています。
- SeedProd – 任意のランディングページにFacebookページブロックを追加します。アクセストークンや開発者のセットアップは不要です。
- Smash Balloon – サイトのどこにでも完全なイベントカレンダーフィードを表示します。継続的なイベントと完全なデザインコントロールに最適です。
- iCal同期 – イベントのiCal URLを任意のWordPressカレンダープラグインにコピーします。サイト全体のカレンダー統合に最適です。
- 手動HTML – Facebookのページプラグインからコードを生成し、カスタムHTMLブロックに貼り付けます。無料ですが、デザインオプションは限られています。
Facebookでイベントを宣伝しているときに大きな問題に直面しました。私のウェブサイトのユーザーは、それらのイベントが存在することを知りませんでした。彼らは私のページを定期的にチェックしておらず、RSVPするためだけに別の場所に移動させたくありませんでした。
そこで、FacebookイベントをWordPressに直接埋め込む方法を探しました。そうすれば、訪問者は今後のイベントを確認し、クリックで参加でき、常に私のサイトに滞在できます。
自分でそれを実行する方法を調べているなら、あなたは正しい場所にいます。このガイドでは、WordPressサイトにFacebookイベントを表示する4つの方法を紹介します。
FacebookイベントをWordPressに埋め込む方法
このガイドでは、WordPressウェブサイトにFacebookイベントを掲載する3つの方法を紹介します。
- 特別なイベントページを作成します。 これは、ウェブサイトにイベント専用のVIPセクションがあるようなものです。人々がイベントを見つけて簡単に申し込むのに役立ちます。
- Facebookからイベントを取得するツールを使用します。 このツールはブリッジのように機能し、イベントをウェブサイトの任意のページに引き込みます。さらに、イベントの外観をスタイルに合わせて変更できます。
- コードスニペットを追加します（慣れている場合）。 Facebookでは、イベントを直接サイトに配置するためのコードの一部を取得できます。これは最も簡単な方法ですが、見栄えを良くするためのオプションはあまりありません。
- iCal URLを使用してイベントを同期します。 FacebookイベントからiCalリンクをコピーし、WordPressカレンダープラグインに貼り付けます。Facebookで新しいイベントを追加すると、サイトが自動的に更新されます。
どの埋め込み方法が最適かを知る方法は？
ウェブサイトにFacebookイベントフィードを表示する最良の方法がわからないですか？ここでは、WordPressにFacebookカレンダーを埋め込むための適切な方法を選択するのに役立つサイドバイサイド比較表を示します。
| 方法 | 機能 | 使いやすさ | 料金 | モバイルフレンドリー | 無料版？ | 無料版の制限 |
|---|---|---|---|---|---|---|
| SeedProd | ランディングページ、Facebook統合 | 簡単 | 有料/無料 | はい | はい | 機能制限、Facebookページブロックには有料版が必要 |
| Smash Balloon | カスタマイズ可能なFacebookフィード | 中程度 | 有料/無料 | はい | はい | 機能制限 |
| 手動埋め込み（コード） | 基本的なイベント表示 | 難しい | 無料 | 多分 | はい | 非常に限定的、コーディング知識が必要 |
| iCal同期 | 任意のカレンダープラグインに同期 | 簡単 | 無料 | カレンダープラグインに依存 | はい | 互換性のあるカレンダープラグインが必要です |
それでは始めましょう。
SeedProdを使用してFacebookイベントを埋め込む方法は？
SeedProdはWordPress用のドラッグアンドドロップウェブサイトビルダーで、近日公開予定およびメンテナンスモード機能があります。このプラグインを使用して、CSSやPHPコードを書いたり、開発者を雇ったりすることなく、コンバージョン率の高いランディングページを作成できます。
ほとんどの埋め込み方法とは異なり、SeedProdのFacebookページブロックはアクセストークン、App ID、または開発者のセットアップを必要としません。
すぐに使える何百ものテンプレートを使用できるだけでなく、SeedProdには、Facebookイベントカレンダー、ライブページフィード、RSVPツールなどのソーシャルメディアコンテンツをコードなしで埋め込むことができるコンテンツブロックも含まれています。
最も注目すべきはFacebookブロックで、これを使用すると、以下を含むソーシャルメディアコンテンツを埋め込むことができます：
- Facebookいいね！ボタン
- Facebookコメント
- Facebookページ
- Facebook埋め込み
この方法では、Facebookページブロックを使用して、ランディングページに直接イベントを追加します。最も良い点は、コピー＆ペーストするアクセストークン、ショートコード、またはIDがないことです。
1. SeedProdのインストールと有効化
開始するには、SeedProdプラグインをインストールしてアクティブ化します。このガイドでは、必要な高度なFacebookブロックが含まれているため、SeedProd Proを使用します。
2. WordPressランディングページの作成
WordPressウェブサイトにSeedProdをインストールしたら、新しいランディングページを作成する必要があります。
幸いなことに、このステップバイステップガイドに従ってWordPressでランディングページを作成することで、すぐに開始できます。または、このガイドに従ってイベントランディングページを作成することもできます。
ランディングページの設計が完了したら、SeedProd » Pagesに移動し、チュートリアルに従って作成したランディングページでEditをクリックします。
これにより、SeedProdビジュアルエディターが開かれ、イベントを追加できます。
3. Facebookページブロックの追加
次に、ページ上でFacebookイベントカレンダーを表示したいスペースを見つけます。次に、右側の高度なブロックセクションに移動し、Facebook Pageブロックを見つけます。
このブロックをページに追加するには、左側からプレビューにドラッグします。
次に、Facebookページブロックのコンテンツ設定で、ページのURLを貼り付けます。これにより、SeedProdは公開Facebookイベントフィードを取得し、WordPressレイアウト内に直接表示します。
デフォルトでは、SeedProdはFacebookページのタイムラインを自動的に表示します。代わりにイベントを表示するには、[タブ]見出しの下にある[イベント]オプションをクリックします。
同じパネルで、ヘッダーのスタイルを変更したり、カバーフォトを表示または非表示にしたり、配置を調整したりすることもできます。
Facebookページのエンゲージメントを高めたい場合は、Facebook Embedブロックを使用して、イベントスケジュールと並べて投稿、Facebook動画、またはコメントを埋め込むことができます。
4. ランディングページを公開する
あとは、右上隅にある「保存」ボタンの横のドロップダウン矢印をクリックし、「公開」をクリックするだけです。
次に、「プレビュー」をクリックすると、イベントカレンダーがランディングページにライブ表示されます。
これで完了です。ウェブサイト訪問者は、ランディングページでFacebookイベントを確認できるようになりました。
ただし、Facebookイベント全体を表示したい場合は、次の方法をお試しください。
WordPressで完全なFacebookイベントカレンダーを表示するにはどうすればよいですか？
この方法では、Smash Balloon Custom Facebook Feed Proプラグインをインストールしてアクティブ化する必要があります。この手順については、WordPressプラグインのインストール方法に関するこのステップバイステップチュートリアルをご覧ください。
1. 新しいFacebookフィードを作成する
プラグインをインストールしてアクティブ化した後、WordPressダッシュボードからFacebookフィード » すべてのフィードメニューに移動します。そこから、「新規追加」ボタンをクリックしてイベントフィードの作成を開始します。
次のページでは、次のようなウェブサイトに追加できる9種類のFacebookフィードが表示されます。
- タイムライン
- 写真
- 動画
- アルバム
- イベント
- レビュー
- その他多数
「イベント」オプションを選択し、「次へ」ボタンをクリックして続行します。
2. Facebookページのソースを選択する
フィードタイプを選択したら、Facebookページのソースを選択します。これは、Facebookグループまたはビジネスのイベントを投稿するページにすることができます。
ソースを追加するには、「新規追加」ボタンをクリックします。
これにより、FacebookページIDとイベントアクセストークンを求めるポップアップが開きます。
ページのアプリIDとアプリシークレットトークンの取得方法がわからない場合は、これらの手順に従ってください。
Facebookアプリの詳細を入力したら、「ソースを追加」ボタンをクリックします。
次の画面で、新しく追加されたFacebookページが表示されます。そのページを選択し、「次へ」をクリックして続行します。
3. Facebookイベントカレンダーのレイアウトをカスタマイズする
これで、イベントのカスタマイズを開始できます。カスタマイズオプションは左側にあり、フィードのプレビューは右側にあります。
カスタマイズオプションを使用すると、フィードタイプ、レイアウト、色、ヘッダーデザイン、投稿デザインなどを変更できます。
まず、左側の「フィードレイアウト」オプションを選択します。
このオプションには、リスト、マソーネ、カルーセルレイアウトを含む3つの異なる設定があります。
イベントを順番に表示するには、「リスト」レイアウトオプションを選択します。
複数の列レイアウトでイベントを表示したい場合は、メーソンリーオプションを選択することもできます。
最後に、カルーセルオプションがあります。これにより、イベントを魅力的な画像スライダーで表示できます。
ウェブサイトに最適なレイアウトを選択してください。その後、もう一度カスタマイズボタンをクリックして、前の設定に戻ります。
4. Facebookイベントフィードのカラー スキームをカスタマイズする
フィードの色を変更したい場合は、カラー スキームの見出しをクリックします。このパネルでは、次のような4つの異なるカラーオプションから選択できます。
- テーマから継承: ウェブサイトのカラー スキームをコピーします
- ライト: 明るい背景に暗い色のテキストを表示します
- ダーク: 背景を暗くし、明るい色のテキストを表示します
- カスタム: すべての色を自分で入力します
その後、ヘッダーのデザイン、フィードのサイズ、余白など、その他の設定をカスタマイズできます。
すべてが希望どおりに見えるようになったら、保存ボタンをクリックします。
5. WordPressページにFacebookイベントを表示する
これで、FacebookイベントをWordPressウェブサイトに埋め込む準備ができました。Smash Balloonを使用すると、2つの方法でこれを実行できます。
まず、右上隅にある埋め込みボタンをクリックします。これにより、さまざまな公開オプションが表示されるポップアップが開きます。
ページに追加ボタンをクリックして、Facebookイベントを通常のWordPressページに埋め込みます。
そこから、リストからウェブサイトの任意のページを選択し、追加ボタンをクリックします。
そのオプションをクリックすると、選択したページの編集画面に移動します。そこから、プラスアイコン（+）をクリックし、カスタムFacebookフィードウィジェットを選択します。
ページを更新または公開すると、プレビューしてイベントの外観を確認できます。
6. WordPressサイドバーにFacebookイベントを追加する
フィードをサイドバーエリアに追加したい場合は、埋め込みウィンドウのウィジェットに追加ボタンをクリックするだけです。
そのオプションをクリックすると、ウィジェットページに移動し、イベントを表示するサイドバーを選択できます。
サイドバーを選択したら、プラスアイコン（+）をクリックして新しいウィジェットを追加し、カスタムFacebookフィードウィジェットを選択します。
それが完了したら、ウェブサイトをプレビューして、ウェブサイトのサイドバーエリアにFacebookイベントが表示されていることを確認できます。
プラグインなしでFacebookイベントを埋め込むことはできますか？
ウェブサイトに多くのWordPressプラグインを使用することに抵抗がある場合は、プラグインなしでWordPressにFacebookイベントを表示できます。
ただし、この方法ではサイトにコードを追加する必要があるため、初心者にはお勧めできません。また、イベントの外観を制御することもあまりできません。
1. Facebookページプラグインのウェブサイトにアクセスします。
この方法を開始するには、Facebookページプラグインが必要です。これはWordPressプラグインではなく、Facebookが開発者向けに提供するスタンドアロンツールです。
Facebookプラグインツールにアクセスし、FacebookページのURLを貼り付けます。
FacebookページのURLを入力すると、ツールにタイムラインのプレビューが表示されます。Facebookイベントを表示したいので、「Tabs」フィールドの「timeline」という単語を削除し、「events」と入力します。
2. Facebookイベント埋め込みコードを生成する
プレビューパネルに、ページのイベントリストが表示されます。コードを取得するには、プレビューの下にあるコードを取得ボタンをクリックします。
コードを取得ボタンをクリックすると、JavaScript SDKとIFrameの2つのタブがあるライトボックスポップアップが表示されます。IFrameタブをクリックし、埋め込みコードをクリップボードにコピーします。
3. WordPressにFacebookイベントコードを埋め込む
次に、WordPressウェブサイトにアクセスし、Facebookイベントを表示したい投稿またはページを編集します。
投稿またはページ編集画面で、プラス（+）アイコンをクリックし、カスタムHTML WordPressブロックを見つけます。
次に、HTMLブロック内をクリックし、Facebookページプラグインツールからコピーした埋め込みコードを貼り付けます。
その後、投稿を保存または公開すると、プレビューしたときにFacebookイベントがウェブサイトに表示されます。
このフィードの表示方法を変更したい場合は、Facebookページプラグインに戻り、Facebookのwp埋め込みコードを再度生成する必要があります。ただし、変更できる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のページプラグインは、2016年以降、イベントのサポートに一貫性がありません。SeedProdまたはSmash Balloonを使用すると、より信頼性の高い結果が得られます。
Facebookイベントの埋め込みに関するよくある質問
WordPressサイトにFacebookイベントが表示されないのはなぜですか？
最も一般的な理由は、プライバシー設定（イベントまたはページは公開されている必要があります）、広告ブロッカーまたはセキュリティプラグインがFacebookスクリプトをブロックしている、またはiFrameバージョンではなくJavaScript SDK埋め込みを使用していることです。手動埋め込みでうまくいかない場合は、Facebookのページプラグインのイベントタブは2016年以降サポートに一貫性がありません。より信頼性の高い結果を得るには、SeedProdまたはSmash Balloonに切り替えてください。
プラグインなしでFacebookイベントを埋め込むことはできますか？
はい。Facebookページプラグインツールを使用してiFrame埋め込みコードを生成し、WordPressのカスタムHTMLブロックに貼り付けます。デザインの制御や自動更新はできません。結果はアカウントによって異なります。より信頼性の高い埋め込みについては、SeedProdまたはSmash Balloonの方が良いオプションです。
Facebookイベントを埋め込むとサイトが遅くなりますか？
方法によっては、遅くなる可能性があります。手動埋め込みは、Facebookから外部JavaScriptおよびiFrameコンテンツを読み込むため、ページの負荷が増加します。SeedProdやSmash Balloonのようなプラグインは、その負荷を最小限に抑えるように構築されています。サイトの速度が優先される場合は、SeedProdのFacebookページブロックを使用してください。私のテストでは、16件のHTTPリクエストで556ミリ秒で読み込まれました。
WordPressでFacebookグループのイベントを埋め込むことはできますか？
ほとんどの埋め込みツールは、公開されているページイベントのみをサポートしており、プライベートイベントやグループイベントはサポートしていません。Facebookグループを運営している場合は、iCal同期方法が最善の選択肢です。WordPressページにグループイベントを手動でリストし、FacebookイベントへのリンクをRSVP用に設定することもできます。
これで、WordPressにFacebookイベントを直接埋め込む方法がわかりました。完全なイベントフィード、単一のタブ、またはカレンダー同期のいずれを希望する場合でも、ここにあなたに合った方法があります。
イベントのコンバージョンを向上させたいですか？次に、SeedProdを使用してイベントランディングページを作成してみてください。
WordPressサイト向けの以下のガイドも役立つかもしれません。
- WordPressにFacebookページを追加する方法
- WordPressにFacebook動画を埋め込む方法
- WordPressサイトにFacebookいいねボタンを追加する方法
- Facebookグループのランディングページを簡単に作成する方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
