WordPressサイトにFacebookのイベントカレンダーを表示する方法

Facebookのイベントカレンダーをウェブサイトに表示する簡単な方法をお探しですか？

FacebookページのイベントカレンダーをWordPressサイトに表示することで、製品の発売や今後のプロモーションなど、重要な日程を訪問者に知らせることができます。

しかし、ソーシャルメディア・マーケティングに長年携わってきた経験から、フェイスブックのイベントカレンダーをウェブサイトに埋め込むのは複雑であることを知っている。

この記事では、2つの異なる方法を使ってWordPressにFacebookのイベントカレンダーを表示する方法を紹介します：

• Facebookイベントをウェブサイトに埋め込む理由
• Facebookページプラグインウィジェットでイベントを表示する
  • ステップ1：Facebookページプラグインコード生成ツールを使う
  • ステップ2：Facebookイベントコードを生成する
  • ステップ3：Facebookイベントコードをウェブサイトに貼り付ける
• WordPressプラグインでFacebookイベントを表示する【最良の方法
  • ステップ1: Smash Balloon Facebook Feed Proをインストールする
  • ステップ2: Facebookイベントカレンダーフィードを作成する
  • ステップ3：Facebookページに接続する
  • ステップ4：Facebookイベントカレンダーフィードをカスタマイズする
  • ステップ5：Facebookのイベントカレンダーを表示する

Facebookイベントをウェブサイトに埋め込む理由

Facebookイベントをウェブサイトに埋め込む最大の理由は、サイト訪問者に今後のイベントを伝え、参加してもらうことです。

Facebookイベントをウェブサイトに埋め込む理由は他にもあります。

• ウェブサイトの訪問者に興味深いイベントを見せることで、Facebookページをフォローしてもらうことができる。
• Facebookに関連するコンテンツをサイトに追加することで、訪問者に、あなたがコミュニティと積極的に関わっていることを示すことができます。
• WordPressでFacebookのイベントを表示することで、人々があなたのサイトに長く留まり、サイトのSEO対策にもなります。
• Facebookページのエンゲージメントを高め、あなたのコンテンツがニュースフィードの上位に表示されるようにすることで、認知度を高め、ページへのトラフィックを増やすことができます。

Facebookページプラグインウィジェットでイベントを表示する

1つ目の方法は、Facebookの公式開発者ツールを使って、Facebookページの一部をウェブサイトに埋め込む方法です。

この方法の欠点は、WordPressにコードスニペットをコピー＆ペーストする必要があることだ。さらに、あなたを助けてくれる専任のサポートチームがいない。

コーディングをしたくない場合は、この記事にある他の埋め込みテクニックを試してみてください。

ステップ1：Facebookページプラグインコード生成ツールを使う

あなたのウェブサイトにFacebookイベントカレンダーウィジェットを追加する最初のステップは、こちらのページプラグインコードジェネレータツールにアクセスすることです。

次に、FacebookページのURLフィールドにあなたのページへのリンクを入力します。

次に、タブ欄に「events」と記入してから、「Get Code」ボタンをクリックする。

ステップ2：Facebookイベントコードを生成する

イベントを埋め込むのに役立つさまざまなコードがポップアップで表示されます。

とりあえず、上部のiFrameタブをクリックする。

コードを紛失しないように、パソコンの空白のテキストファイルかメモ帳に貼り付けておくとよいだろう。

ステップ3：Facebookイベントコードをウェブサイトに貼り付ける

次のステップは、Facebookのイベントコードをウェブサイトに埋め込むことです。

ウェブサイトの管理エリアにアクセスし、Facebookのイベントカレンダーを表示する場所を決めます。

このチュートリアルでは、カレンダーをサイドバーのウィジェットに追加します。

まず、WordPressの管理画面から「外観」メニューの「ウィジェット」を開きます。

次に、サイドバーか フッターのどちらかを選択します。このチュートリアルではサイドバーを使用します。

その後、プラス（+）アイコンをクリックして、ウェブサイトに新しいウィジェットを追加します。そして、オプションからカスタムHTML ウィジェットを選択します。

最後に、先ほどのiFrameコードスニペットを新しいウィジェットに貼り付けます 。

メインサイトに移動すると、サイドバーにFacebookのイベントが表示されます。

お分かりのように、すべての埋め込みコードを処理するのは少し煩わしいかもしれません。さらに、他にもいくつかの欠点があります：

• Facebookウィジェットはカスタマイズできないし、ウェブサイトのデザインとぶつかるかもしれない。
• ウィジェットはフェイスブックに依存しているため、フェイスブックが技術的な問題に対処している場合はオフラインになる。
• このイベントウィジェットは一般的なデザインなので、あなたのサイトを目立たせるチャンスを逃しています。
• 複数のFacebookウィジェットを表示したい場合は、たくさんの埋め込みコードを管理する必要があります。
• この方法では、WordPressウェブサイトに表示される投稿やイベントをコントロールすることはできません。

WordPressプラグインでFacebookイベントを表示する【最良の方法

次の方法では、フェイスブックのフィード・プラグインを使って、フェイスブックのイベントをウェブサイトに表示する。

そうすれば、Facebookプラグインが自動的にイベントを取得し、美しいフィードとしてウェブサイトに追加してくれる！

そして、あなたのサイトに魅力的なFacebookイベントフィードを表示するために使用できる最良のオプションは、Smash Balloon Facebook Feed Proプラグインです。

WordPressのための最高のFacebookフィードプラグインとして、それはあなたがわずか数分でWordPressでイベントフィードのようなFacebookのコンテンツをシームレスに統合するのに役立ちます。

Facebookのイベントをあなたのサイトに表示するだけでなく、このFacebookフィードWordPressプラグインには以下の機能があります：

• Facebookの投稿、写真、ビデオフィード、Facebookライブストリームなど、複数のFacebookフィードタイプをサイトに表示できます。
• ヘッダー、日付、説明など、フィードに表示される情報をコントロールできます。
• 複数のFacebookアカウントのフィードを1つのウェブサイトで簡単に管理・表示できます。
• スライダーなどのFacebookフィードテンプレートや、ウェブサイトのブランディングに合わせたスタイリングオプションを使って、フィードのルック＆フィールを完全にカスタマイズできます。
• 多くのフィードタイプをサポートしているので、Facebookのアルバムフィードやビデオフィードなどを作成することができます。
• モバイルフレンドリーなデザインで、フィードをモバイルデバイスに美しく表示します。
• Facebookのレビューをウェブサイトに表示することで、社会的証明を確立し、ビジネスの売上を増やす ことができます。

さらに良いことに、コードを1行も書くことなくこれらすべてを行うことができるので、初心者でも超簡単に使い始めることができる。

WordPressにFacebookイベントを埋め込む最も簡単な方法をビデオチュートリアルでご紹介します。

テキストガイドが必要ですか？Facebookのイベントを埋め込むためのステップバイステップガイドを以下に説明します！

ステップ1: Smash Balloon Facebook Feed Proをインストールする

Facebook Feed Proを入手し、プラグインをインストール、有効化して始めましょう。

WordPressプラグインのインストール方法については、ステップバイステップのガイドをご覧ください。

ステップ2: Facebookイベントカレンダーフィードを作成する

サイトにプラグインをインストールして有効化したら、ダッシュボードからFacebookフィード " すべてのフィード メニューに移動します。

Facebookイベントカレンダーの作成を開始するには、「新規追加」をクリックします。

その後、タイムラインフィード、写真フィード、ビデオフィード、イベントフィード、レビューフィードなど、9種類のフィードが利用できることがわかる。

次に、オプションのリストからイベントを 選択し、「Next」ボタンをクリックして次に進みます。

ステップ3：Facebookページに接続する

フィードを作成したら、イベントのソースを選択できます。これはあなたがイベントを計画したFacebookページになります。

そのためには、新規追加 ボタンをクリックする。

新しいポップアップが表示され、3つの項目を追加する必要があります：

• FacebookページID
• イベント・アクセス・トークン
• イベント iCal URL

これら3つを手に入れる方法を以下に紹介しよう：

FacebookページIDの取得

Facebookページを開き、上部にある「About」 タブをクリックします。

その後、ページの透明度オプションをクリックすると、右側にページIDが表示されます。

ページIDを取得したら、次に進む前に安全な場所に保存してください。

イベント・アクセストークンを入手する

次のステップは、イベント・アクセストークンを取得することです。

まだお持ちでない方は、Facebookイベントアクセストークンの作成方法をステップバイステップでご覧ください。

このビデオガイドに従うこともできる：

イベントiCalのURLを取得する

iCalのURLを取得するには、Facebookのホームページを開き、Facebookページとしてログインしていることを確認してください。

次に、左側の「イベント」オプションをクリックして続行します。

次に、左側の「Your Events」オプションをクリックして、あなたが計画したアクティブなイベントを表示します。

あとは右上のカレンダーに追加ボタンのURLをコピー するだけです。

それが終わったら、ウェブサイトに戻り、ページID、イベント・アクセストークン 、iCalのURLを入力します。

最後に、下の「ソースを追加」ボタンをクリックします。

このソースをつなげば、今後のFacebookフィードに自由に再利用することができる。

続行するには、新しく追加したソースを選択し、「Next」をクリックします。

ステップ4：Facebookイベントカレンダーフィードをカスタマイズする

これで、イベントカレンダーをカスタマイズすることができます。まず、新しいFacebookフィードのテーマを選びます。

Facebookのテーマは5種類から選ぶことができる：

• デフォルト
• モダン
• ソーシャルウォール
• 概要
• オーバーラップ

自由にテーマを選択し、「次へ 」をクリックして次に進む。

次に、このプラグインは7種類のフィードテンプレートから選ぶことができます。これらのテンプレートはそれぞれ独自のレイアウトを持っており、インポートすることができます：

• デフォルト
• シングル・メーソンリー
• ウィジェット
• 大型グリッド
• 最新アルバム
• ショーケース・カルーセル
• シンプルなカルーセル

ここでテンプレートを選択し、「次へ」ボタンをクリックします。

右側にフィードのライブプレビューが表示され、左側にカスタマイズオプションが表示されます。

これらのオプションで、フィードの種類、レイアウト、色、ヘッダーデザイン、投稿デザイン、その他多くのことをカスタマイズすることができます。

まず、左側のフィードレイアウトオプションを選択します。

イベントカレンダーには3種類のレイアウトがあります：リスト、メイソンリー、カルーセルです。

イベントを次々にリストアップしたい場合は、リストレイアウトを 選ぶことができます。

Facebookのイベントをカラムで表示するには、メイソンレイアウトを試してみて ください。

また、美しいカルーセルスライダーでイベントを表示できるカルーセルレイアウトもあります。

フィードレイアウトを選んだら、上部のカスタマイズ オプションをクリックして、以前のカスタマイズオプションに戻ります。

次に、Facebookフィードの配色を選ぶことができます。そのためには、左側の配色 オプションを選択します。

フィードの色は4種類から選べる。

• テーマから継承する：ウェブサイトの配色をコピーする
• Light：背景が明るく、文字色が濃い。
• 暗い:明るい色のテキストで背景を暗くします。
• カスタム：すべての色を自分で入力

そして、ヘッダーデザイン、フィードサイズ、余白など、イベントカレンダーの他の部分をカスタマイズすることができます。

Facebookイベントカレンダーのデザインに満足したら、保存 ボタンをクリックしてください。

最後に、Facebookイベントをウェブサイトのページ、サイドバー、フッターに埋め込む方法を紹介します。

ステップ5：Facebookのイベントカレンダーを表示する

カスタマイズが完了したら、Facebookのイベントカレンダーをウェブサイトに表示することができます。FacebookページのイベントをWordPressに表示するには、2つのオプションがあります。

Facebookイベントカレンダーをページに埋め込む

WordPressにFacebookのイベントを埋め込むには？FacebookのイベントカレンダーをWordPressのページに掲載するには、まず、ライブエディタの右上にある埋め込み ボタンをクリックしてください。

Facebookのイベントカレンダーを掲載する場所を選択するための新しいポップアップが表示されます。そこで、「ページに追加」ボタンをクリックして次に進みます。

そうしたら、今度はウェブページのリストから選ぶことができます。Facebookのイベントカレンダーを掲載したいページを選択し、「追加」をクリックしてください。

これで、プラグインはあなたが選んだページにあなたを送ります。

このページで、小さなプラスアイコン（+）を クリックし、ドロップダウンメニューから Facebookフィードウィジェットを 選択して、Facebookイベントカレンダーを追加します。

これで、Facebookのイベントカレンダーがウェブサイトに追加されました！Facebookページのイベントカレンダーフィードがどのように見えるか、あなたのウェブサイトにアクセスしてみてください。

次に、このプラグインを使ってFacebookのイベントフィードをウェブサイトのサイドバーやフッターに埋め込む方法をご紹介します。

それでは、facebookイベントウィジェットをウェブサイトに配置する方法を見てみましょう。

Facebookのイベントカレンダーをサイドバーやフッターに表示する

2つ目の方法は、サイドバーやフッターなど、ウェブサイトのウィジェット対応エリアにFacebookイベントを埋め込むことです。

始めるには、まずライブエディターでフィードを開く必要があります。

WordPressのダッシュボードからFacebookフィードメニューを開くと、すべてのFacebookフィードが表示されます。

そのリストから、フェイスブックのイベント・フィードをクリックする。

Facebookフィードプラグインのビジュアルカスタマイザーに戻ります。ここで、一番上の埋め込み ボタンをクリックしてください。

このプラグインは、Facebookイベントウィジェットの場所を選択できるポップアップを表示します。ウィジェットに追加 ボタンをクリックするだけで続行できます。

そうすると、プラグインが自動的にウィジェットページに移動します。ここで、Facebookカレンダーウィジェットをサイドバーまたはフッターに追加できます。すべてのウィジェットオプションのリストから、サイドバーをクリックします。

Facebookイベントカレンダーウィジェットをフッターに表示するには、代わりにフッターオプションを クリックしてください。

とりあえず、フェイスブックのイベント・ウィジェットをサイドバーに掲載する。

サイドバーかフッターのどちらかをクリックすると、ドロップダウンメニューにアクティブなウィジェットが表示されます。

そこで、プラス・アイコン（＋）を クリックして、新しいウィジェットを追加することができる。

Facebookのカレンダーウィジェットをウェブサイトのサイドバーに表示するには、オプションから Facebookフィードウィジェットを 選択します。

これで完了です！あなたのウェブサイトのフロントエンドで、Facebookイベントカレンダーウィジェットがどのように見えるか、自由にチェックしてみてください。

それで終わりだ！

Facebookのイベントカレンダーをウェブサイトに表示する方法について、この記事がお役に立てれば幸いです。Facebook Feed Proを使えば、数クリックでサイトにイベントカレンダーを表示できます。

わずか数分で、Facebookのイベントを盛り上げたり、フォロワーを増やしたり、ウェブサイトの訪問者を引き込んだり、その他いろいろなことができます。

イベントカレンダーを埋め込む準備はできましたか？今すぐFacebook Feed Proを始めましょう！

フォロワーを増やし、イベントに参加する人を増やしたいですか？Facebookのフォロワーを増やす方法について、こちらのガイドをご覧ください。

Facebookマーケティングのヒントとガイド

• Facebookフィードをウェブサイトに：参考にしたい事例
• フェイスブックのレビューをウェブサイトに埋め込む方法（初心者ガイド）
• ウェブサイトにInstagramチャットを追加する方法（ステップバイステップガイド）
• 今年ビジネスを成長させる最高のFacebookプラグイン
• エンゲージメントを高めやすいFacebook投稿の種類