WordPressで作られたホームページにFacebookページを埋め込む方法

こんにちは。銀河（@ginga_noguchi）です。

この記事ではFacebookページをWordPressサイトへ埋め込む方法を解説します。「サイドバーやフッターに自社のFacebookページを表示させたい」などといったときに設定してみてください。

WordPressサイトにFacebookを埋め込む方法

1. 埋め込み用のコードを取得する

2. WordPressサイトに設置する

Facebookページプラグインのページは閉じずに、設置したいWordPressを「別タブで」開いてください。

満足のいく表示になっていればOKです。

埋め込みデザインの調整

ここからは「もう少しこうしたい」という希望がある場合の設定です。それぞれの設定箇所の細かな説明と合わせて解説します。

FacebookページのURL

ここは特筆することはありません。埋め込みたいFacebookページのURLを入力してください。

タブ

埋め込みでは以下の3つをタブで切り替えて表示させることができます。

それぞれ timeline、events、messages と入力することで指定した機能を表示させられます。

複数必要な場合は、
timeline, events, messages
と半角のカンマ（,）で区切りながら入力するとタブで切り替えることができるようになります。

幅

WordPressに埋め込んだときの横幅を180pxから500pxまでの間で指定できます。後述する「plugin containerの幅に合わせる」の設定で可変のレスポンシブ幅に設定できますので、特別な理由がない限りは最大の500pxで指定しておけばOKです。

高さ

幅と同様に高さを指定できます。高さの上限はありませんが、最小は70pxです。

幅と違って高さの指定は完全にあなたのサイトの埋め込みたい場所によります。わからない場合は、とりあえず「500」に設定しておきましょう。

場所や希望に合わせて次の設定をしてみてください。

高さをその他のウィジェットと揃えたい

隣のウィジェットと高さがずれていると気持ち悪いですよね。表示させるFacebookページの高さを指定できますが、それには「合わせたい高さはいくつなのか」を調べる必要があります。

サイトを開いて確認し、揃っていればOKです

サイドバーに必要最低限を表示させたい

サイドバーの上部などでは、あまり大きいとスペースを圧迫して他に表示させたいものが表示できないことがあります。そういった場合は次のように設定するとすっきりとさせられます。

• タブ：空欄
• 幅：500
• 高さ：空欄
• plugin containerの幅に合わせる：チェックをいれる

スモールヘッダーを使用

チェックをいれるとヘッダー画像の表示が小さくなります。

plugin containerの幅に合わせる

必ずチェックを入れましょう。

PC、タブレット、スマホなどあらゆるデバイスに対してサイズを最適化する「レスポンシブデザイン」で表示できます。可変サイズにさせず、固定幅で表示させたい場合はチェックをはずしてください。

カバー写真を非表示にする

チェックをはずすとカバー画像が非表示になり、シンプルな白背景になります。

友達の顔を表示する

Facebookページに「いいね！」をしてくれている自分の友達を表示させられる機能です。「自分の」というとわかりにくいかもしれませんね。

つまり、ユーザーAさんがサイトにアクセスしたときに、「AさんのFacebook上の友達で『いいね！』している友達を表示させられる機能」です。

例えば、AさんはあなたのFacebookページに「いいね！」していないとして、Aさんに対して「このFacebookページにはAさんの友達のこんな人たちが『いいね！』していますよ」と表示できるのでAさんの「いいね！」を促せるかもしれないということですね。

まとめ

この記事ではWordPressで作ったホームページにFacebookページを埋め込む方法を解説しました。無事に埋め込むことはできましたか？

HTMLコードが出てきて「難しそう」と思った人もいるかもしれませんが、実際にやることはコピペだけです。あとは高さだけ調整すればいい感じにできるはずです。

いろいろと挑戦して最高のホームページを作ってください。