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