【WordPress】Facebookページを自分のWEBサイトに表示させる【ページプラグイン】

HTML/CSS/PHP
スポンサーリンク

どうもnakattyです。

よくホームページや自身のブログにFacebookページを表示させている方がいると思います。
私も自分で立ち上げた会社のホームページに、Facebookページを表示させています。

Facebookページは「ページプラグイン」というものを使って簡単に、ホームページやブログに表示させることができます。

今回はページプラグインを使ってFacebookページを自分のWebサイトに表示させる方法を解説していきます。

↓の画像見たいなやつです。

まず、前提としてページプラグインで表示させることができるのはFacebookページになります。
個人アカウントは表示させることはできません

スポンサーリンク

ページプラグインからコードを取得する

まずは、ページプラグインにアクセスします。

URLは「https://developers.facebook.com/docs/plugins/page-plugin」になります。

アクセスすると↓の様な画面にります。

そしたら、ちょっとだけ下にスクロールしてください。

↓のような項目があります。

この項目に入力したり、チェックボックスにチェックを入れたりしてホームページにFacebookページを表示させるためのコードを作っていきます。

FacebookページのURL 表示させたいFacebookページのURLを入力。
タブ デフォルトはtimelineです。他にもeventsmessagesも表示させることができます。
表示させるページの横幅
高さ 表示させるページの縦幅

次に、各チェックボックスについてです。
※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ページを表示させる方法をまとめました。

やってみたら意外と簡単にできます。

タイトルとURLをコピーしました