Facebookのイベントを表示する

Custom Facebook Feed WordPressプラグインを使用すると、Facebookページやグループから直接イベントを簡単に表示できます。

イベントの表示方法

プライマリフィードでFacebookイベントを表示する場合は、投稿タイプセクション（カスタマイズページ > 一般）で他の投稿タイプのチェックをすべて外してください。そうすることで、イベント投稿タイプのみを表示する場合にのみ利用できるオプションが表示されます。

また、自分のサイトに複数のFacebookフィードを表示していて、セカンダリフィードにイベントを表示させたい場合は、プラグインのショートコードオプションを使って、ショートコードで直接投稿タイプを指定することもできます：

---

過去のイベントの表示

デフォルトでは、近日／将来のイベントのみが表示されます。以下のショートコードを使用すると、Facebookページの過去のイベントのフィードを表示することができます：

今後のイベントと過去のイベントの両方を表示したい場合は、次のように2つのショートコードを使用する必要があります：

No upcoming events

No more posts

このように分割されているのは、イベントを日付順に1つのフィードにまとめて表示するのではなく、表示方法をより自由にコントロールできるようにするためです。

---

複数の異なるFacebookページからのイベント

複数の異なるFacebookページのイベントを1つのフィードにまとめるには、Multifeedエクステンションを使用する必要があります。これを使うと、複数のFacebook IDを指定して、すべてのイベントを日付順にひとつのフィードにまとめることができます：

---

特定の単一イベントの表示

特定のイベントを表示するには、Featured Postエクステンションを使用する必要があります。このエクステンションを使用すると、IDに基づいて単一の投稿やイベントを表示することができます：

---

イベント設定

このプラグインには、イベントの表示方法をコントロールするための様々な設定が含まれています。これらのオプションはWordPress管理画面のプラグインのカスタマイズページとショートコードオプションの両方で利用できます。

表示するイベント数

これは、Facebookの投稿を表示する数を選択するときに使用される設定と同じです。
場所設定
ショートコードオプション： num

イベントページまたはFacebookタイムラインからイベントを表示する

イベントを表示するには、イベントページからイベントを表示するのがベストですが、代わりにFacebookのタイムラインから投稿を表示することもできます。
場所は以下の通りです：カスタマイズ > 一般 > 投稿タイプ
ショートコードオプション：eventsource=timeline

開始時間から__時間後のイベントを表示する

これは、Facebookでイベントが開始されてから表示されるまでの時間を設定することができます。デフォルトは6時間ですが、最大168時間（1週間相当）まで設定できます。
場所はこちら：カスタマイズ > 一般 > 投稿タイプ
ショートコードオプション：eventoffset=6

イベント画像サイズ

フル画像を表示するか、正方形にトリミングした画像を表示するかを選択できます。
場所カスタマイズ > 一般 > 投稿タイプ
ショートコードオプション： eventimage

特定のハッシュタグまたは文字列を含むイベントを表示する

イベントをフィルタリングし、特定のハッシュタグや文字列を含むイベントのみを表示することができます。また、特定のハッシュタグや文字列を含まないイベントを表示することもできます。
場所カスタマイズ > 一般 > 文字列でフィルター
ショートコードオプション：フィルター、エクスフィルター

イベントのレイアウト

サムネイル、半角、全角のレイアウトからお選びいただけます。
場所はこちらカスタマイズ > 投稿レイアウト
ショートコードオプション：レイアウト

レイアウト内の画像のサイズをより細かくコントロールしたい場合は、プラグインのカスタマイズページの「その他」タブにあるプラグインのカスタムCSSセクションで、以下のスニペットを使用することができます：

#cff .cff-photo{ width: 40% !important; }
#cff .cff-details { width: 57% !important; }

それに応じてパーセンテージを調整することができます。最初の行は画像の幅をコントロールし、2番目の行はイベントの詳細の幅をコントロールします。

イベントの一部の表示/非表示

イベント画像、タイトル、詳細、「Facebookで見る」リンクの表示・非表示を選択できます。注：「カスタムテキスト/翻訳」ページでテキストを変更したり、「Facebookで見る」リンクを翻訳することもできます。
場所はこちら：カスタマイズ > 投稿レイアウト > 表示/非表示
ショートコードオプション：インクルード

イベント外観のカスタマイズ

プラグインに組み込まれた一般的なスタイリング・オプション（高さ、幅、背景色、ヘッダーなど）だけでなく、イベントの特定の部分をカスタマイズすることもできます。

イベント名

タイトル形式

h3、h4、h5、h6、段落タグなど、タイトルを表示するHTMLフォーマットを選択できます。
場所カスタマイズ > 投稿のスタイル（タイポグラフィ） > イベントタイトル
ショートコードオプション：eventtitleformat

タイトル・サイズ

イベントタイトルのサイズ。
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベントタイトル
ショートコードオプション：eventtitlesize

タイトル重量

イベントタイトルのフォントの太さ。
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベントタイトル
ショートコードオプション：eventtitleweight

タイトルカラー

イベントタイトルの色。
場所カスタマイズ > 投稿のスタイル（タイポグラフィ） > イベントタイトル
ショートコードオプション：eventtitlecolor

Facebookイベントページへのリンクタイトル

イベントタイトルをFacebook上のイベントに直接リンクするかどうか。
場所カスタマイズ > スタイル投稿（タイポグラフィ） > イベントタイトル
ショートコードオプション：eventtitlelink

開催日

開催日 サイズ

イベントの日付の大きさ
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベント日付
ショートコードオプション：eventdatesize

開催日 重量

イベント日付のフォントの太さ。
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベント日付
ショートコードオプション：eventdateweight

開催日 カラー

イベントの日付の色。
場所カスタマイズ > 投稿のスタイル（タイポグラフィ） > イベント日付
ショートコードオプション：eventdatecolor

開催日 ポジション

イベントタイトルの上または下にイベント日付を表示するかどうか。
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベント日付
ショートコードオプション：eventdatepos

イベントの日付フォーマット

イベントの日付を表示する日付フォーマット。例については、「日付書式リファレンス」を参照してください。
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベント日付
ショートコードオプション：eventdateformat

イベント日付カスタムフォーマット

イベントの日付には、独自の書式を使用します。例については、「日付書式リファレンス」を参照してください。
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベント日付
ショートコードオプション： eventdatecustom

イベント詳細

イベント詳細 サイズ

イベント詳細テキストのサイズ。
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベント詳細
ショートコードオプション：eventdetailssize

イベント詳細 体重

イベント詳細テキストのフォントの太さ。
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベント詳細
ショートコードオプション：eventdetailsweight

イベント詳細 カラー

イベント詳細テキストの色。
場所カスタマイズ > 投稿スタイル（タイポグラフィ） > イベント詳細
ショートコードオプション：eventdetailscolor

イベント詳細 リンクカラー

イベント詳細テキストのリンクの色。
場所カスタマイズ > 投稿のスタイル（タイポグラフィ） > イベントの詳細
ショートコードオプション：eventlinkcolor

フェイスブックで見る」リンク

リンクテキストのサイズ

Facebookで見る」テキストのサイズ。
場所カスタマイズ > 投稿のスタイル（タイポグラフィ） > Facebookへリンク
ショートコードオプション：リンクサイズ

リンクテキストの重み

Facebookで表示」テキストのフォントの太さ。
場所カスタマイズ > 投稿のスタイル（タイポグラフィ） > Facebookへリンク
ショートコードオプション：linkweight

リンクテキストの色

Facebookで見る」テキストの色。
場所カスタマイズ > 投稿のスタイル（タイポグラフィ） > Facebookへのリンク
ショートコードオプション： linkcolor

カスタムリンクテキスト

デフォルトの「Facebookで表示」テキストの代わりに使用するテキスト
場所カスタマイズ > 投稿のスタイル（タイポグラフィ） > Facebookへのリンク
ショートコードオプション：facebooklinktext