2021-05-11

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

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

目次

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

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

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

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

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

投稿からコードジェネレーターに移動しコードを取得する

フェイスブックページの各投稿の右上にある3つの点をクリックするとプルダウンメニューが出てきますので、「埋め込み」をクリックします。
facebook-post-select-embed-option
クリックすると自動的にFACEBOOK for Developersの「埋め込み投稿」ページに移動します。このページには「コードジェネレーター」というツールがあり、先ほど「埋め込み」をクリックした投稿のURLが自動的に入力されているのが確認できます。

埋め込んだ際のイメージを確認しながら投稿の幅を設定したり、投稿全文を含めるかどうかを設定できます。

設定が終了したら、「コードを取得」をクリックします。
code-generator-settings

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

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

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

なお、フェイスブックページの投稿でも、公開範囲が非公開になっていたり、国別制限や年齢制限をかけていると、埋め込むことが出来ません。制限がかかっているページの投稿を埋め込もうとすると、コードジェネレーターに移動した際にエラーメッセージが出ます。
not-available-post-message
フェイスブックページの設定を確認する場合は、フェイスブックページのホーム画面左の「ページ設定」バーを下にスクロールして「設定」をクリックしてください。
facebook-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

「ページプラグイン」ページにもタブ欄があり、ここでタイムライン、イベント、メッセージの3つのタブを設定できる…はずなのですが、筆者がこのタブ欄を試したところ、現時点でこのタブ欄を使って設定できるのは、「timeline」(タイムライン、英語表記のみ)だけでした。
enter-tab-on-page-plugin
ということで、もし筆者と同じようにこのタブ欄がうまく作動しない場合は、少しだけコードを編集する必要があります。コピー&ペーストで出来るので、コード知識がなくても簡単ですのでご安心ください。

方法は以下の通りです。

埋め込みコードを取得し(方法は上のパートでご確認下さい。)、メモ帳やワードプレスのテキストエディタ等、コードを編集できる場所に貼り付けます。
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の投稿も簡単に埋め込むことが出来ます

こちらが埋め込みツール「エンベッドソーシャル」を使ってフェイスブックページの投稿を埋め込んだ例です。デザインはこれ以外にもたくさんのオプションがあります。フェイスブックページの名前(EmbedSocial Japan)をクリックするとフェイスブックページにリンクし、投稿の画像やテキストをクリックするとその詳細が表示さるので、ぜひクリックして試してみてください。

また、投稿内の「お問い合わせ」をクリックすると当社のお問い合わせページにリンクするように設定しています。ボタンのテキストは変えることができます。このようにリンクボタンを設置できるので、ウェブサイト上に埋め込まれた投稿を見てすぐに、購入や問い合わせといったアクションにつなげやすくなります。

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

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

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

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

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

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

embedsocial

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

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

お問い合わせ

関連記事

9月 21, 2021

【Googleマイビジネス】インサイト機…

無料で口コミや店舗写真、最新情報の掲出などにも活用することができ、今ではあらゆる規模のビジネスで欠か…

9月 07, 2021

【2021年9月更新】最新ハッシュタグキ…

全世界15万ユーザー 全国400社以上の導入実績のハッシュタグキャンペーンツール Embedsoci…

9月 06, 2021

UGCツールに『EmbedSocial』…

ソーシャルメディアの普及により、お店を選ぶ際にWEBサイトでの情報だけでなくSNSの口コミを参考にす…

8月 18, 2021

Googleの口コミを増やすアイデアとそ…

国内でも月間4,000万人以上が利用し、目的地を探す地図アプリから行きたいお店のレビューを探す口コミ…