「自分のWebサイトにFacebookのページを記載したい」と思ったことはありませんか？インターネットを検索してみると、ブログのプロフィール部分に自身のFacebookページを載せているのを度々見かけることでしょう。

「埋め込みには、なにか専門的な知識がいるのでは……」と思っている方もおられるでしょうがそうではありません。

この記事では、

  • Facebookの投稿をWebサイトに埋め込む手順
  • FacebookページをWebサイトに埋め込む手順

の2つを紹介します。

Facebookの投稿をWebサイトに埋め込む手順

まずは、Facebookの投稿をWebサイトに埋め込む手順を紹介します。難しいと思われがちな埋め込みですが、専用のコードを取得し、Webサイトに貼り付けることで対応可能です。

Facebookから埋め込みコードを取得

まずはFacebookにログインし、Webサイトに埋め込みたい投稿を表示します。右上をみると、「…」このようなアイコンがあるので、そちらをクリックします。

クリックすると、「リンクを保存」という表示の下に「埋め込み」という項目が表示されるので、そちらをクリックしてください。

そのあと、「このコードをコピーして、ウェブサイトに貼り付けてください」と表示されるので、すぐ下にあるコードをコピーしましょう。次の「埋め込みコードをHTMLに貼り付け」で使います。

埋め込みコードをHTMLに貼り付け

上記でコピーした埋め込みコードをWebサイトのHTMLに貼り付けましょう。

おそらく、Facebookの投稿はWebサイトの記事コンテンツに入れることが多いはず。Facebookの投稿を挿入したい箇所にコピーしたコードを貼り付けます。

この時に注意してほしいことは、ビジュアル画面で貼り付けをしないということです。

WordPressを使っている方は特に注意して欲しいのですが、文章の装飾がリアルタイムでできるビジュアルエディターと、コードを入力するコードエディターがあります。

埋め込みコードはHTMLコードなので、ビジュアルエディターで貼り付けしてもWebサイトに反映することはありません。必ず、コードエディターに貼り付けるようにしましょう。

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でそれぞれの箇所にコードを貼り付けましょう。もしも「うまく表示されない」ことがあれば、前述した内容をもう一度見直して下さい。

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

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

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

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

横幅制限に注意する

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

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

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

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

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

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

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

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

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

Facebookの埋め込みを活用してコンテンツを充実させよう

この記事では、Facebookの埋め込みについてご説明しました。Facebookの投稿とページについては、埋め込みの仕方が変わりますので、混合しないように注意してください。

また、Facebookページの埋め込みについて、「IFrame」でコードを発行しても、Webサイトで表示できないというエラーが発生することがあります。その場合は、「Javascript SDK」で対応しましょう。

基本はWordPressを利用している方がほとんどでしょう。もちろん、独自CMSでも対応可能です。Facebookのページは専門的な知識も必要なく、やり方さえ分かっていればものの数分でWebサイトに埋め込むことができますので、ぜひ試してみてください。

Facebookの活用についてもっと知る

FacebookのOGPの設定・確認方法

FacebookのOGPの設定・確認方法

世界最大のSNSであるFacebookはユーザーが実名であることに加えて、「いいね！」や「シェア」による情報拡散力が大きな強みです。FacebookユーザーがWebページをシェアした際、その情報に訴求力があると、さらなるシェアが期待できます。SNSの特性を最大限に活用した情報拡散には、ユーザーからの「いいね！」や「シェア」をいかに有効利用できるかが、重要なポイントです。 今回は、Facebookにユーザーが「いいね！」や「シェア」をした場合の表示設定であるOGPについて解説します。OGPの設定次第で、マーケティングの成果をぐっと高められますので、ぜひご参考ください。
Facebookビジネスマネージャとは？アカウントの作成方法やメリットを紹介

Facebookビジネスマネージャとは？アカウントの作成方法やメリットを紹介

Facebookにはビジネスマネージャというツールがあり、複数の広告アカウントや複数の人によるFacebookを使ったマーケティング活動が円滑に進められます。記事ではFacebookビジネスマネージャのアカウント作成方法から設定の仕方、メリットについて紹介していきます。