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

続いては、FacebookページをWebサイトに埋め込む方法を紹介します。Facebookページの埋め込みは仕様が違うので、注意してください。

Facebookのページプラグインにアクセス

まずはFacebookの「ページプラグイン」にアクセスしましょう。

ページプラグインを確認すると、「FacebookページのURL」や「タブ」といった入力フォームが表示されます。

ここで入力するのは、「FacebookページのURL」のみです。この項目を入力するために、FacebookのマイページURLをコピーしましょう。

FacebookページのURLをコピー・貼り付け

まずはFacebookページのURLをコピーします。URLをコピーしたら、「FacebookページのURL」に貼り付けしましょう。

すると、すぐ下にプレビュー画面が表示されるので、埋め込みたいページが表示されているかを確認してください。

間違ったURLを入力している場合は何も表示されないので、その際にはもう1度URLを貼り付けるといったように、内容を見直しましょう。プレビュー画面で表示が確認できたら、プレビュー画面のすぐ下にある「コードを取得」を選択してください。

IFrameをタブを選択してコードをコピー

「コードを取得」を選択すると「JavaScript SDK」と「IFrame」が表示されるますが後者をクリック。

「＜iframe＞」から始まるコードをコピーしましょう。この時に、前者の「JavaScript SDK」をコピーしてしまうと正しく表示されませんので、注意して下さい。

HTMLにコードを貼り付け

上記で取得したコードをHTMLに貼り付けましょう。記事中に貼り付けたい場合はコードエディターで編集し、挿入したい箇所に貼り付けすれば完了です。

Webサイトのサイドバーやフッターに挿入したい場合は、Webサイト本体のHTMLでそれぞれの箇所にコードを貼り付けましょう。もしも「うまく表示されない」ことがあれば、前述した内容をもう一度見直して下さい。

Facebookページがうまく表示されない場合

上記の方法でFacebookページがうまく表示できない場合は、Facebookページの「公開範囲」の設定を確認してみてください。Facebookページの設定から「一般」を確認すると、公開範囲の設定が可能です。

ここで

  • 公開範囲：「このページは公開されています」
  • 国別制限：「誰でも見ることができます」
  • 年齢制限：「誰でも見ることができます」

上記の設定になっていない場合は、変更してください。Facebookページは誰にでも公開できる状態になっていないとWebサイトに埋め込みができないと覚えておきましょう。

WebサイトにFacebook投稿・ページを埋め込む際の注意点

Facebook投稿やページを埋め込む際の注意点として、以下の2つが挙げられます。

  • 横幅制限
  • 個人情報の漏洩

Facebookの埋め込み機能はWebサイトへアクセスしたユーザーをFacebookに誘導することもできますし、Facebook上で投稿したコンテンツをコピペできるので非常に便利です。しかし、いくつか注意点があるので注意する必要があります。

横幅制限に注意する

まず1つ目は横幅制限に注意するということです。

Facebookの埋め込みサイズが横幅が180px~500pxという制限があります。制限内であればサイズをカスタマイズできますが、それ以上のサイズには対応不可。

「横幅を800pxに設定して、コンテンツの視認性をあげよう」とデザインをカスタマイズしても、うまく表示されないのであれば意味がありません。そのため、Facebookの埋め込みには横幅制限があることを理解しておきましょう。

個人情報の表示に注意する

2つ目は個人情報の表示に注意することです。Facebookページにいいね！がつけられている場合、いいね！を押したユーザーのアイコンが表示されてしまいます。

ページを埋め込む側は気にすることがなかったとしても、アイコンが表示される本人は「見られたくない」と感じるかもしれません。

またトラブルにも発展しかねないので、いいね！ユーザーを表示しない設定が必要です。

その方法は、Facebookのアカウント画面で「アプリ」をクリックします。すると、「アプリ、ウェブビュー、プラグイン」という文言の後に「編集」というボタンリンクがあるので、そちらをクリック。

「Tum Platform Off」と表示されるので、スクロールして「Disable Platform」をクリックすれば、Facebookページでいいね！を非表示ににすることができます。