どうもnakattyです。
よくホームページや自身のブログにFacebookページを表示させている方がいると思います。
私も自分で立ち上げた会社のホームページに、Facebookページを表示させています。
Facebookページは「ページプラグイン」というものを使って簡単に、ホームページやブログに表示させることができます。
今回はページプラグインを使ってFacebookページを自分のWebサイトに表示させる方法を解説していきます。
↓の画像見たいなやつです。
まず、前提としてページプラグインで表示させることができるのはFacebookページになります。
個人アカウントは表示させることはできません。
ページプラグインからコードを取得する
まずは、ページプラグインにアクセスします。
URLは「https://developers.facebook.com/docs/plugins/page-plugin」になります。
アクセスすると↓の様な画面にります。
そしたら、ちょっとだけ下にスクロールしてください。
↓のような項目があります。
この項目に入力したり、チェックボックスにチェックを入れたりしてホームページにFacebookページを表示させるためのコードを作っていきます。
| FacebookページのURL | 表示させたいFacebookページのURLを入力。 |
|---|---|
| タブ | デフォルトはtimelineです。他にもeventsやmessagesも表示させることができます。 |
| 幅 | 表示させるページの横幅 |
| 高さ | 表示させるページの縦幅 |
次に、各チェックボックスについてです。
※timelineを非表示にしてます。
| チェック無し | チェック無しの状態です。 |
|---|---|
| スモールヘッダーを使用 | ヘッダーがちょっとだけ小さくなります。 |
| plugin containerの幅に合わせる | 親要素のwidthに合わせて幅が変わります。 |
| カバー写真を非表示にする | カバー画像が非表示になり背景が白くなります。 |
| 友達の顔を表示する | 「いいね」をくれた人の写真を表示します。 |
表示設定ができたら「コードを取得」をクリックして、表示用のコードを取得します。
↓の画像の様な感じでコードが2種類表示されると思います。
Step1のコードはサイト内のbodyタグの直後に一回だけ貼り付ければ良いみたいです。
Step2のコードはfacebookページを表示させたい場所に貼り付けます。
ちなみにStep1のコードはStep2のコードと一緒に貼り付けても問題ないそうです。
どこに貼り付けたら良いかわからない場合は、Step2のコードを貼り付ける時に一緒に貼り付けちゃえばいいと思います。
iframe(インラインフレーム)をつかう方法
HTMLをいじるのは少し不安という方は、iframe(インラインフレーム)をつかうやり方もあります。
コードが表示されてる画面のiframeというタブをクリックします。
iframe(インラインフレーム)用のコードが表示されますので、コピーして表示させたい場所に貼り付けるだけとなります。
WordPressに表示させてみる
WordPress内のページに表示させる場合ですがウィジェットか固定ページ内とかになるかと思います。
WordPressダッシュボードに移り、外観→ウィジェットと進みます。
カスタムHTMLかテキストのウィジェットにStep1とStep2のコードを貼り付けます。
これで、↓の様な感じでウィジェットにFacebookページが表示されます。
Facebookページが表示されない
コードも、コードを貼り付ける場所も間違ってないのに何故がホームページにFacebookページが表示されない。
という場合があります。
もし、コードもコードを貼り付ける場所も間違ってない場合は、Facebookページの設定に問題がある可能性があります。
ページプラグインでFacebookページを表示させる場合は、公開範囲、国別制限、年齢制限を誰でも見れる状態にしなくてはいけません。
Facebookページの設定をクリックします。
一般の項目にある↓の画像の箇所を確認してみてください。
画像の赤枠の部分を以下の様にすれば、Facebookページが表示されるはずです。
公開範囲・・・このページは公開されています
国別制限・・・誰でも見ることができます
年齢制限・・・誰でも見ることができます
まとめ
ページプラグインを使ってホームページにFacebookページを表示させる方法をまとめました。
やってみたら意外と簡単にできます。