Elementor Pro『Facebook Page』ウィジェットの使い方

『Facebook Page』ウィジェットは、Facebookのページ、つまりヘッダーやカバーフォト、投稿を含めたFacebookのページ全体を表示させることのできるウィジェットです。

この記事では、Elementor Proにのみ搭載された Facebook Pageウィジェットの使い方を詳しく説明していきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementor Pro『Facebook Page』ウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ！

Facebook Pageウィジェットの挿入

『Facebook Page』ウィジェットをドラッグ＆ドロップでカラムに挿入します。

こちらはFacebook Pageウィジェット挿入後の表示画面です。

Facebook App IDをサイトに紐付けする

サイト上でこのFacebook PageウィジェットとFacebookをリンクさせるには、まずWordPress内の設定にFacebookのApp IDを入力し、サイトとFacebookを紐付けする作業をしなくてはなりません。

編集タブの一番上に『Set your Facebook App ID in the Integrations Settings』（連携設定でFacebook App IDを設定する）とありますので『Integrations Settings』をクリックします。

この一連の説明は【Elementor Pro『Facebookボタン』ウィジェットの使い方】の記事の同セクションで説明をしていることと全く同じですのでそちらを参考にしてください。

リンク

リンクにはデフォルトでElementor社のFacebookページの URLが記載されているため Elementor社のFacebookページが表示されています。

こちらはTOYOTAのFacebookページです。
例えばこちらのURLをコピーし、Linkに貼り付けると…

TOYOTAのFacebookページが上記画面の様に表示されます。

レイアウト

『レイアウト』ではデフォルトで既に『Timeline』が入っています。
TimelineとはこのFacebookページの投稿の部分です。
レイアウトでは以下のオプションを追加・削除が可能です。

• Timeline（デフォルト）
• Events
• Messages

Events

レイアウトに『Events』を追加するとFacebookページの画面上記の様にTimelineの右横にEventsというカテゴリーが追加されます。

Message

レイアウトに『Message』を追加するとFacebookページ画面上のTimeline、Eventsに並んで『Message』の項目も追加されます。
表示させているFacebookページと閲覧者（個人）がメッセージ機能を使ってやり取りをしている場合は、Messageをクリックするとそのメッセージが表示される仕組みです。

Small Header

『Small Header』はデフォルトでは『いいえ』に設定されていますが、『はい』に設定すると上記画面右側の様にヘッダー部分の画像が小さくなります。

Cover Photo

『Cover Photo』はデフォルトでは『はい』に設定されていますが『いいえ』にすると上記画面右側の様にヘッダー部分の画像がなくなります。

Profile Photos

『Profile Photos』は表示中のFacebookページに『いいね』をした人のプロフィール写真がFacebook ページのかバーフォト上の『Like Page』の右横に表示されます。
『いいね』を選択すれば、プロフィール写真の表示はなくなります。

Custom CTA Button

『Custom CTA Button』はデフォルトでは『はい』に設定されていますが『いいえ』にするとカバーフォトの右下に『Share』ボタンが追加されます。

高さ

『高さ』はFacebookページの高さを最小70から最大1000の値の範囲で変更することが可能です。
※デフォルトの高さの値は『500』に設定されています。

---

Facebook Pageウィジェットは、Timelineやヘッダー、カバーフォトのなどFacebookページの全貌が表示させられるウィジェットです。
Facebookページ自体を閲覧者に宣伝したい時にはうってつけのウィジェットですね！
このFacebook Pageウィジェットの他にもFacebookと関連したウィジェットに

• 【Elementor Pro『 Facebookボタン』ウィジェットの使い方】
• 【Elementor Pro『Facebook Embed』ウィジェットの使い方】
• 【Elementor Pro『Facebook Comments』ウィジェットの使い方】

がありあますのでサイトにFacebookの埋め込みを検討している方は是非参考にしてくださいね！