【保存版】簡単！Facebookページをホームページに埋め込む方法

せっかくブログを書いているので色々な人に見て欲しいですよね？
会社で行っている取り組み、イベントを色々な人に知ってほしいですよね？

ソーシャルメディアに投稿してソーシャルメディアユーザーにも見てもらいましょう！！
ソーシャルメディアと言えばじゃないですけど、Facebookはなんだかんだでユーザー数が多いソーシャルメディアだと思います。

いろいろなブログを見ると、プロフィール部分に自身のFacebookページを載せているのを見たことがあると思います。
Facebookページをホームページに埋め込む方法について記載します。

ホームページに埋め込むの大変そう… 専門の知識が必要なのでは…？と思っている方もいるかもしれませんが、 そんなことはありません！
簡単にホームページに埋め込むことが出来ます。

Facebookページは会社や個人にとって、簡単に宣伝することが出来るポピュラーな手法の一つです。
Facebookページからホームページへの流入、ホームページからFacebookページへの流入を増やすことで、 会社、個人をアピールすることが出来ます。
もちろん、FacebookページはGoogleインデクスされますので、オーガニック検索にも効果を発揮します。

Twitter タイムラインの埋め込みはこちらから

では、Facebookページをホームページに埋め込む手順を進めていきましょう！！

1．Facebookページ表示用のページコードの取得

Facebookページをホームページに埋め込むために、埋め込み用のページコードを取得する必要があります。
ページコードはFacebookのページプラグインから取得することが出来ます。

以下から、Facebook ページプラグインにアクセスしてください。

ページプラグイン

以下の画面が表示されたと思いますので、必要な情報を入力していきましょう。

FacebookページのURL

埋め込みをしたいFacebookページを指定します。
以下の「FacebookページのURL」に埋め込みをしたいFacebookページURLを入力しましょう。

埋め込みをしたいFacebookページのURLを入力すると、そのページが表示されます。

タブの設定

埋め込みをしたFacebookページの何を表示するかを変更できます。
デフォルトでは、「timeline」が設定されているかと思います。

timeline ： 投稿を新しい順に表示します
events ： 投稿しているイベント情報を表示します
messages ： Facebookメッセージを送信する画面を表示します

全て設定すると以下のようにFacebookページにタブが表示されます。

幅の設定

埋め込みをしたFacebookページを表示するときの横幅を指定します。
幅は180px ～ 500px までとなります。
500px以上を設定しても500px以上大きくなりませんので、注意してください。

高さの設定

埋め込みをしたFacebookページを表示するときの高さを指定します。
最低の高さは70pxとなります。

表示オプションの設定

表示オプションの設定を実施します。
以下の内容を確認して表示したいオプションを指定してください。

スモールヘッダーを使用 ： 表示しているヘッダーの高さが低くなります
カバー写真を非表示にする ： カバー写真を設定している場合、非表示になります
plugin containerの幅に合わせる ： 幅が可変になるようなレスポンシブデザインで表示する場合にチェックをいれます
友達の顔を表示する ： Facebookページにいいね！をしてくれている人のプロフィール写真を表示します

ページコードの取得

ここまでの設定が完了し、表示内容に問題がなければ、ページコードの取得を行いましょう。
「コードを取得」ボタンをクリックしてください。

「Java Script SDK」 と 「IFrame」のソースコードが記載された画面がホップアップで表示されたと思います。
それぞれの設定方法について説明します。

2．Wordpress(ホームページ)にページコードを埋め込む

「Java Script SDK」を使用した埋め込み

「コードを取得」ボタンをクリックすると、ホップアップで表示された、「Java Script SDK」タブの「Step2」のコードをコピーして、 ＜body＞タグの直後に貼り付けます。
＜body＞タグの直後となっていますが、次に説明する、「Step3」とまとめて貼り付けても大丈夫です。

次に「Step3」のコードをコピーして、Facebookページを表示したい箇所（HTMLのソース内）に貼り付けます。

以下のように表示されればＯＫです！

「IFrame」を使用した埋め込み

「コードを取得」ボタンをクリックすると、ホップアップで表示された画面の「IFrame」タブを選択します。
「Step2」のコードをコピーして、Facebookページを表示したい箇所（HTMLのソース内）に貼り付けます。

以下のように表示されればＯＫです！

3．さいごに

いかがでしょうか。
専門的な知識がなくても簡単にホームページにFacebookを表示出来たと思います！
Facebookページを使用して、ホームページへのアクセス数向上、マーケティングに有効活用してみましょう！！

Facebookページをホームページに表示していない方は、是非お試し下さい！！

にほんブログ村・人気ブログランキングに登録しています。
記事が気に入ったらポチッとお願い致します。

では！