最終更新日 2022/12/08 投稿日 2021/05/11

Facebookページや投稿をウェブサイトやブログに埋め込む方法

フェイスブックページをPRツールの一つとして利用し、情報発信を行っている皆さんは多いと思いますが、ウェブサイトやブログと連携をとっていますか?
フェイスブックとウェブサイト等を自動で連携させれば、フェイスブックへの投稿一回でウェブサイト上のPRコンテンツの更新を行うことが出来て効率的です。
そこで今回はフェイスブックの投稿をウェブサイトに埋め込む方法、中でも専門知識が不要な、誰でも簡単にできる方法をご紹介します。

目次

  1. 公式コードを使って投稿を1つずつ埋め込む方法
  2. 公式ページプラグインを使ってフェイスブックページごと埋め込む方法
  3. SNS埋め込みツールを使って複数の投稿を一度に埋め込む方法
  4. SNSとウェブ連携でSNS非利用者にも同じメッセージを一度に届けることができる

それでは1つ1つ見ていきましょう。

公式コードを使って投稿を1つずつ埋め込む方法

公式アプリからフェイスブックの投稿ごとに埋め込みコードを取得・コピーして、ウェブサイトやブログに貼り付けて埋め込む方法です。フェイスブックページに投稿した中から一部だけを投稿したい場合に使える方法です。なお投稿はフェイスブックページの公開投稿のみです。個人アカウントのページの投稿は埋め込むことが出来ないのでご注意ください。

以下、パソコンを使ってワードプレスで作成したウェブサイトやブログに貼り付ける際の方法をステップごとにご紹介します。

投稿から埋め込み用のコードを取得する

フェイスブックページの各投稿の右上にある3つの点をクリックするとプルダウンメニューが出てきますので、「埋め込み」をクリックします。
three-dots-facebbok-post
クリックすると「外部へ埋め込む」というポップアップが出てきます。もし特にカスタマイズを行わない場合は、「コードをコピー」をクリックします。これで埋め込み用のコードを取得できました。もし埋め込む投稿の幅を変えるなどのカスタマイズを行う場合は、ポップアップ内の「詳細設定」をクリックしてください。
copy-code-facebook

埋め込み投稿のカスタマイズを行う(オプション)

「詳細設定」をクリックすると、自動的にMeta for Developersの「埋め込み投稿」ページに移動します。このページには「コードジェネレーター」というツールがあり、先ほど「埋め込み」をクリックした投稿のURLが自動的に入力されているのが確認できます。
このページでは、投稿の幅を調整したり、投稿全文を含めるかどうかを選択し、「コードを取得」をクリックします。
meta-dev-embed-facebook-code
なお、「埋め込み投稿」のページには、様々な埋め込み方法につてのガイドが載っていますので、ページ右上の目次を確認してみてください。

埋め込みコードを選び、コピーしてウェブサイトの掲載したい場所に貼り付ける

「コードを取得」をクリックすると、コードが2種類出てきます。どちらも基本的にはコピー&ペーストで埋め込みが完了して簡単です。埋め込んだ先での加工性を考えるとおすすめはJavascriptですが、ただ投稿画面を埋め込むだけという場合はiFrameでもよいでしょう。ここではiFrameを使った方法をご紹介します。
facebook-iframe-code
コードをコピーしたら、ウェブサイトやブログでフェイスブック投稿を埋め込みたいところに貼り付けます。ワードプレスではテキストエディタ画面にして貼り付けます。
wp-editor-embed-code
これで、フェイスブックページの投稿がウェブサイトやブログで表示されるようになりました。

フェイスブックページの公開範囲に制限があると埋め込みができない

ウェブサイトに埋め込みが可能な投稿はFacebookページとプロフィールの公開投稿のみです。フェイスブックページの投稿でも、公開範囲が非公開になっていたり、国別制限や年齢制限をかけていると、埋め込むことが出来ません。
自分のフェイスブックページの公開範囲の設定を確認する場合は、フェイスブックページのホーム画面右上のプロフィール写真をクリックして、「設定とプライバシー」>「設定」>「プライバシー設定」と進んでください。
facebook-page-privacy-setting

公式ページプラグインを使ってフェイスブックページごと埋め込む方法

フェイスブック公式のページプラグインを使って、フェイスブックページをウェブサイトやブログに埋め込む方法です。

以下、パソコンでワードプレスで作成したウェブサイトやブログに貼り付ける際の方法をステップごとにご紹介します。

フェイスブック公式プラグインページでコードを取得する

フェイスブックページを埋め込むにはまず、フェイスブックの開発者向けサイトFACEBOOK for Developers内の「ページプラグイン」ページを開きます。(もしページの途中が表示される場合は、「ページプラグイン」ページの一番上までスクロールします。)

FacebookページのURLの入力欄がありますので皆さんのFacebookページのURLを入力してください。埋め込んだページのプレビューが出てきます。既にお使いのパソコンでフェイスブックにログインしたことがあると、自動でURLが入力されていることもあります。

特に設定を変えない場合は、「コードを取得」をクリックします。なお、大きさを変えたり、投稿を含まない表示にしたりなどの変更をする場合は次のパートで説明します。
get-embed-code-on-page-plugin
「コードを取得」をクリックすると、埋め込みコードが2種類出てきます。どちらもコピー&ペーストでウェブサイトやブログに貼り付けるだけです。どちらを選択してもよいのですが、ここでは、Java Script SDKを選択します。
select-javascript-sdk-for-embedding

ページ埋め込みコードをコピーしてウェブサイトの埋め込みたい場所に貼り付ける

コードの部分をクリックすると全選択になりますので、右クリックでコピーをし、ウェブサイトやブログに貼り付けます。

ワードプレスを使ったブログの例では、編集画面をテキストエディタで開きコードを貼り付けます。

まず本文にステップ1のコードを貼り付けます。場所はどこでもよいのですが、コード取得画面で推奨されているので、本文のすぐ後が良いでしょう。ちなみにこのコードは本番画面上では見えません。

次に、埋め込みたい場所にステップ2のコードを貼り付けます。これで、ページの埋め込みは完了です。
paste-javascript-code-on-wordpress
以上のステップでフェイスブックページを埋め込むとこのようになります。

タブやサイズの変更などデフォルトの表示設定を変える方法

フェイスブックページの埋め込みは、いくつかカスタマイズが出来ます。ここではその方法をご紹介します。

タイムライン、イベント、メッセージタブの設定

埋め込んだフェイスブックページにはタイムラインだけでなく、イベントとメッセージのタブを表示することができます。タブはこのような感じで表示されます。
customize-tabs-embedded-facebook-page

「ページプラグイン」ページのタブ欄に、timeline,event,messageと入力すると、埋め込みコードにも反映されますので「コードを取得」をクリックして、先ほどと同じように埋め込みコードをコピー&ペーストしてください。
facebook-page-plug-in

(参考)もしこのタブ欄がうまく作動しない場合は、少しだけコードを編集する必要があります。コピー&ペーストで出来るので、コード知識がなくても簡単ですのでご安心ください。
方法は以下の通りです。

埋め込みコードを取得し(方法は上のパートでご確認下さい。)、メモ帳やワードプレスのテキストエディタ等、コードを編集できる場所に貼り付けます。
edit-embed-code-for-tabs
Javascript SDKのステップ2でコピーしたコードの中の「data-tabs=”timeline”」の箇所を編集します。タイムライン、イベント、メッセージで表示したいタブを、カンマ区切りで入力します。例えば3つのタブを表示したい場合は、

data-tabs="timeline,events,messages"

に変更します。

変更したコードをウェブサイトに貼り付けると、先ほどお見せしたように3つのタブが並んだ形で表示されます。

幅・高さ

埋め込んだフェイスブックページのウェブサイト上でのサイズを調整できます。
こちらはページプラグインの入力欄で設定できますので、コードを取得する前に希望するサイズを入力します。
change-size-facebook-plugin
入力するとプレビューが自動で変更されるので、確認しながら設定できます。

その他

その他にも「ページプラグイン」では、以下の設定が可能です。チェックのオン/オフで設定が可能です。

SNS埋め込みツールを使って複数の投稿を一度に埋め込む方法

公式機能を使えばフェイスブックページや投稿の埋め込むことは可能ですが、投稿を一つ一つ埋め込むなど作業が面倒であったり、拡張性やデザインに制限があります。

そこでこれらの難点を解決したい場合は、SNS埋め込みツールの利用をおすすめします。当社の製品「エンベッドソーシャル」もそんな埋め込みツールの一つです。

SNS埋め込みツール「エンベッドソーシャル」ならFacebookはもちろんほかのSNSの投稿も簡単に埋め込むことが出来ます

こちらが埋め込みツール「エンベッドソーシャル」を使ってフェイスブックページの投稿を埋め込んだ例です。デザインはこれ以外にもたくさんのオプションがあります。この例では、各投稿をクリックするとライトボックスで詳細が表示され、ヘッダーの「フォロー」ボタンをクリックすると当社のフェイスブックページにリンクするように設定してみました。

また、投稿内にCTAボタンを設置し、クリックすると関連したサイトにリンクさせることも可能です。ウェブサイト上に埋め込まれた投稿を見てすぐに、購入や問い合わせといったアクションにつなげやすくなります。

本製品の詳しい機能はこちらからご確認下さい。

もちろんほかにもたくさん埋め込みツールが出ています。価格帯も機能も様々ですので、ぜひ皆さんに合うツールを探してみてください。

SNSとウェブ連携でSNS非利用者にも同じメッセージを一度に届けることができる

フェイスブックをはじめとするSNSは、情報を幅広く届けるのに大変強力で、欠かせないツールになっています。一方で、今でもSNS(LINEを除く)を使わない人が多くいることも事実です。
そこでSNSの情報をウェブサイトやブログと連携しておけば、SNSを利用していないこれらの人々にも同じ情報を簡単に届けることが出来ます。しかもわざわざ別のコンテンツを作成したりウェブサイトを編集したりする必要もありません。

SNSとウェブサイトやブログの連携方法として有効な「埋め込み」テクニック。ぜひ皆さんの活動に役立ててみてください。

SNS埋め込みツール「エンベッドソーシャル」についてのお問い合わせはこちらまでぜひ!

embedsocial

SNS投稿埋め込みツール
- エンベッドソーシャル -

簡単な操作でSNSの投稿をWEBサイトに埋め込み。キャンペーンや口コミ・更新のいらないメディアとして活用できます。

お問い合わせ

関連記事

2月 01, 2023

Instagram APIとは?非エンジ…

Instagramでは変更などを経て複数のAPIが提供されているため、実際に業務で使用している場合を...

1月 24, 2023

今さら聞けない口コミマーケティング|成功…

商品やサービスの購入を検討する際、「口コミ」を確認することはありませんか?SNSや口コミサイトなどの...

1月 20, 2023

口コミの効果と注目を集める理由とは?注意…

口コミを集めると「売上アップに効果がある」と聞いたことはあっても、本当にそのような効果があるか疑問に...

1月 19, 2023

新機能追加記念!SNS ✕ WEB制作ツ…

SNS ✕ WEB制作ツール『EmbedSocial』では新機能のリリースにともない、過去利用履歴の...