2019年03月10日更新

Facebookページの埋め込み方法！サイトでタイムラインをレスポンシブ反応させる

Facebookページの埋め込み方法を説明します。埋め込み方法はコードを取得して貼り付けるだけです。プラグイン・htmlの設定方法、またレスポンシブの設定もご紹介します。Facebookのタイムラインに投稿し、ホームページを更新していきましょう。

LINE

1Facebookページをサイトに埋め込む方法
・貼り付け用のコードをページプラグインから取得
・埋め込みコードをサイトに貼り付ける
・WordPressはウィジェットやプラグインに貼り付ける
・ホームページへコードを埋め込む
2Facebookのページをレスポンシブ対応させる
・プラグインを作成
・コード取得
・html
・CSS
3Facebookページをサイトに埋め込むメリット
・埋め込むメリット
4Facebookのページをサイドバーに埋め込めるサイト
・アメブロ
・WordPress
・ホームページ
5Facebookページの埋め込みを利用して、集客をしよう！
・Facebookの記事が気になった方にはこちらもおすすめ！

Facebookページをサイトに埋め込む方法

Facebookページをサイトに埋め込み方法について説明します。

貼り付け用のコードをページプラグインから取得

ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

サイトに貼り付ける用のコードを上のリンクより取得します。

リンクをクリックすると、ソーシャルプラグインのページプラグインの画面が表示されます。FacebookページのURLを入力してください。

URL

FacebookページのURLはFacebookページのホーム画面を開いたときに表示されるURLです。

URLを入力するとその下にサイトに貼り付けた際のFacebookページのプレビューが表示されます。

タブ

タイムライン・イベント・メッセージの三種類が設定でます。入力する場合は”timeline””events””messages"で入力し、複数使う場合は,(カンマ)で区切り、入力してください。

幅、高さ

幅のサイズは180〜500px設定できます。

高さのサイズは70px〜設定できます。

表示オプション

表示オプションには"スモールヘッダーを使用"・"plugin containerの幅に合わせる"・"カバー写真を非表示にする"・"友達の顔を表示する"の4つがあり、それぞれチェックを入れることで設定できます。

スモールヘッダーを使用	スモールヘッダーにチェックを入れると、上の画像のようにヘッダーの高さが低くなります。
plugin containerの幅に合わせる	ページに幅を合わせるので、レスポンシブWebデザインを導入しているホームページなど、デバイスにより横幅が変わるサイトの場合はチェックを入れると便利です。
カバー写真を非表示にする	カバー写真が表示されなくなります。
友達の顔を表示する	「いいね！」をした友達のプロフィール写真が表示されます。

埋め込みコードをサイトに貼り付ける

ページプラグインで取得したコードをサイトの指定の場所に貼り付けることで簡単にFacebookページをサイトに埋め込めます。コードの取得方法とサイトへの貼り付け方法についてこれからご紹介します。

”Facebookの公開ページのURL”・”タブ”・”幅”・”高さ”・”表示オプション”の入力設定が完了したら、レビューの右下にある”コード取得”をクリックしてください。

JavaScript SDKではコードが二つ表示されます。htmlの場合、コード①は<body> の直後に、コード②は表示したい場所に貼り付けます。設定の方法に関しては後ほど詳しく説明します。

IFrameはJavaScript SDKと違い1つのコードで表示したい場所に貼り付けます。

WordPressはウィジェットやプラグインに貼り付ける

WordPressに Facebookページを埋め込み方法を紹介します。

サイトの編集画面より”ウィジェット”をクリックしてください。

”ウィジェットを追加”をクリックし、”テキスト”をクリックしてください。

”ビジュアル”と”テキスト”がありますので”テキスト”を選択し、先ほどページプラグインで取得したコードを貼り付けます。JavaScript SDKの場合はコード①＋コード②を、IFrameの場合はコード③をコピー&ペーストしてください。

以上でWordPressの Facebookページ埋め込みは以上です。この方法であれば、WordPress無料版でも設定可能です。

ホームページへコードを埋め込む

ホームページへコードを埋め込む方法はWordPressと一緒です。JavaScript SDKの場合はコード①＋コード②を、IFrameの場合はコード③を表示したい場所にコピー&ペーストしてください。ホームページの埋め込みは以上です。

htmlソース内に貼り付ける

htmlで埋め込み方法を説明します。JavaScript SDKとIFrameでhtml内の設定方法は違いますが、どちらもコピー＆ペーストで簡単に設定できます。

JavaScript SDKの場合	コード①を<body> の直後に貼り付けます。コード②をhtml内の表示したい位置に貼り付けます。
IFrameの場合	コード③をhtml内の表示したい位置に貼り付けます。

以上で設定完了です。レスポンシブさせたい場合は後ほど詳しく説明します。

Facebookのページをレスポンシブ対応させる

Facebookページをレスポンシブ対応の設定方法を紹介します。ページプラグインの表示オプションに”plugin containerの幅に合わせる”にチェックを入れると、幅をレスポンシブ対応してくれますが、これはページ読み込み時にプラグインの幅が決まってしまう設定のため、スマホの画面を横にしたときなどにレスポンシブ対応できません。

プラグインを作成

Facebookページのプラグインの作成は先ほどご紹介した”ページプラグイン”より作成してください。

コード取得

コードを取得する際、表示オプションの”plugin containerの幅に合わせる”に必ずチェックを入れてください。コードを取得したら、JavaScript SDKのコード①と②をコピーしてください。

html

htmlで先ほど取得したコードを使い、入力していきます。

<body>の後にコード①を貼り付けてください。
コード②をhtml内の表示したい場所に貼り付けてください。
表示するところを調整するため、classを使用します。<div class="class名">コード②<div>となるように入力してください。上の画像ではclass名を” Facebook”としています。

CSS

CSSで先ほどのclassの設定をします。

スマホは画面幅が400px未満の場合は画面に合わせて、400px以上の場合は400pxで表示するように指定し、パソコンは400pxで表示するように指定した場合は下のように入力します。

スマホの設定（767px以下）	/767px以下（スマホ用）/ @media screen and (max-width: 767px) { class名{width: 100%; max-width: 400px;} }
パソコンの設定（768px以上）	/* 768px以上（PC用）*/ @media screen and (min-width: 768px) { class名 { width: 400px;} }

今回幅を400pxに設定していたのでwidthを400にしていますが、180〜500の間で設定できます。（プラグインでの幅のサイズ設定が180〜500pxのため）レスポンシブ対応の設定は以上です。

Facebookページをサイトに埋め込むメリット

Facebookページをサイトに埋め込むメリットを説明します。

埋め込むメリット

Facebookをサイトに埋め込むメリットとして大きく3つあります。

SEOに効果がある

サイトにFacebookのページを埋め込むとFacebookページのタイムラインなどの投稿が埋め込まれたページのテキストとして扱われるのでSEOに効果があります。

タイムリーに情報提供できる

Facebookページを埋め込むとサイトでもFacebookの情報を共有できます。それにより、Facebookのタイムラインを投稿することでタイムリーな情報をFacebookとサイトの2つから情報を提供できます。

エンゲージメントが上がる

Facebookには”フォロー”・”いいね！”・”コメント”・”シェア”の4つの機能があり、それぞれが友達に反映されるため、この機能をうまく利用すればエンゲージメントをあげられます。エンゲージを上げるために回数や時間、相手が興味を持つような内容を意識してタイムラインに投稿し、エンゲージメントをあげましょう。