フェイスブックページをPRツールの一つとして利用し、情報発信を行っている皆さんは多いと思いますが、ウェブサイトやブログと連携をとっていますか？
フェイスブックとウェブサイト等を自動で連携させれば、フェイスブックへの投稿一回でウェブサイト上のPRコンテンツの更新を行うことが出来て効率的です。
そこで今回はフェイスブックの投稿をウェブサイトに埋め込む方法、中でも専門知識が不要な、誰でも簡単にできる方法をご紹介します。
公式アプリからフェイスブックの投稿ごとに埋め込みコードを取得・コピーして、ウェブサイトやブログに貼り付けて埋め込む方法です。フェイスブックページに投稿した中から一部だけを投稿したい場合に使える方法です。なお投稿はフェイスブックページの公開投稿のみです。個人アカウントのページの投稿は埋め込むことが出来ないのでご注意ください。
以下、パソコンを使ってワードプレスで作成したウェブサイトやブログに貼り付ける際の方法をステップごとにご紹介します。
フェイスブックページの各投稿の右上にある3つの点をクリックするとプルダウンメニューが出てきますので、「埋め込み」をクリックします。
クリックすると「外部へ埋め込む」というポップアップが出てきます。もし特にカスタマイズを行わない場合は、「コードをコピー」をクリックします。これで埋め込み用のコードを取得できました。もし埋め込む投稿の幅を変えるなどのカスタマイズを行う場合は、ポップアップ内の「詳細設定」をクリックしてください。
「詳細設定」をクリックすると、自動的にMeta for Developersの「埋め込み投稿」ページに移動します。このページには「コードジェネレーター」というツールがあり、先ほど「埋め込み」をクリックした投稿のURLが自動的に入力されているのが確認できます。
このページでは、投稿の幅を調整したり、投稿全文を含めるかどうかを選択し、「コードを取得」をクリックします。
なお、「埋め込み投稿」のページには、様々な埋め込み方法につてのガイドが載っていますので、ページ右上の目次を確認してみてください。
「コードを取得」をクリックすると、コードが2種類出てきます。どちらも基本的にはコピー&ペーストで埋め込みが完了して簡単です。埋め込んだ先での加工性を考えるとおすすめはJavascriptですが、ただ投稿画面を埋め込むだけという場合はiFrameでもよいでしょう。ここではiFrameを使った方法をご紹介します。
コードをコピーしたら、ウェブサイトやブログでフェイスブック投稿を埋め込みたいところに貼り付けます。ワードプレスではテキストエディタ画面にして貼り付けます。
これで、フェイスブックページの投稿がウェブサイトやブログで表示されるようになりました。
ウェブサイトに埋め込みが可能な投稿はFacebookページとプロフィールの公開投稿のみです。フェイスブックページの投稿でも、公開範囲が非公開になっていたり、国別制限や年齢制限をかけていると、埋め込むことが出来ません。
自分のフェイスブックページの公開範囲の設定を確認する場合は、フェイスブックページのホーム画面右上のプロフィール写真をクリックして、「設定とプライバシー」＞「設定」＞「プライバシー設定」と進んでください。
フェイスブック公式のページプラグインを使って、フェイスブックページをウェブサイトやブログに埋め込む方法です。
以下、パソコンでワードプレスで作成したウェブサイトやブログに貼り付ける際の方法をステップごとにご紹介します。
フェイスブックページを埋め込むにはまず、フェイスブックの開発者向けサイトFACEBOOK for Developers内の「ページプラグイン」ページを開きます。（もしページの途中が表示される場合は、「ページプラグイン」ページの一番上までスクロールします。）
FacebookページのURLの入力欄がありますので皆さんのFacebookページのURLを入力してください。埋め込んだページのプレビューが出てきます。既にお使いのパソコンでフェイスブックにログインしたことがあると、自動でURLが入力されていることもあります。
特に設定を変えない場合は、「コードを取得」をクリックします。なお、大きさを変えたり、投稿を含まない表示にしたりなどの変更をする場合は次のパートで説明します。
「コードを取得」をクリックすると、埋め込みコードが2種類出てきます。どちらもコピー＆ペーストでウェブサイトやブログに貼り付けるだけです。どちらを選択してもよいのですが、ここでは、Java Script SDKを選択します。
コードの部分をクリックすると全選択になりますので、右クリックでコピーをし、ウェブサイトやブログに貼り付けます。
ワードプレスを使ったブログの例では、編集画面をテキストエディタで開きコードを貼り付けます。
まず本文にステップ1のコードを貼り付けます。場所はどこでもよいのですが、コード取得画面で推奨されているので、本文のすぐ後が良いでしょう。ちなみにこのコードは本番画面上では見えません。
次に、埋め込みたい場所にステップ2のコードを貼り付けます。これで、ページの埋め込みは完了です。
以上のステップでフェイスブックページを埋め込むとこのようになります。
フェイスブックページの埋め込みは、いくつかカスタマイズが出来ます。ここではその方法をご紹介します。
埋め込んだフェイスブックページにはタイムラインだけでなく、イベントとメッセージのタブを表示することができます。タブはこのような感じで表示されます。
「ページプラグイン」ページのタブ欄に、timeline,event,messageと入力すると、埋め込みコードにも反映されますので「コードを取得」をクリックして、先ほどと同じように埋め込みコードをコピー&ペーストしてください。
(参考）もしこのタブ欄がうまく作動しない場合は、少しだけコードを編集する必要があります。コピー＆ペーストで出来るので、コード知識がなくても簡単ですのでご安心ください。
方法は以下の通りです。
埋め込みコードを取得し（方法は上のパートでご確認下さい。）、メモ帳やワードプレスのテキストエディタ等、コードを編集できる場所に貼り付けます。
Javascript SDKのステップ2でコピーしたコードの中の「data-tabs=”timeline”」の箇所を編集します。タイムライン、イベント、メッセージで表示したいタブを、カンマ区切りで入力します。例えば3つのタブを表示したい場合は、
data-tabs="timeline,events,messages"
に変更します。
変更したコードをウェブサイトに貼り付けると、先ほどお見せしたように3つのタブが並んだ形で表示されます。
埋め込んだフェイスブックページのウェブサイト上でのサイズを調整できます。
こちらはページプラグインの入力欄で設定できますので、コードを取得する前に希望するサイズを入力します。
入力するとプレビューが自動で変更されるので、確認しながら設定できます。
その他にも「ページプラグイン」では、以下の設定が可能です。チェックのオン/オフで設定が可能です。
公式機能を使えばフェイスブックページや投稿の埋め込むことは可能ですが、投稿を一つ一つ埋め込むなど作業が面倒であったり、拡張性やデザインに制限があります。
そこでこれらの難点を解決したい場合は、SNS埋め込みツールの利用をおすすめします。
SNS埋め込みツールEmbedFeedを使うと簡単にFacebookページの投稿をウェブサイトに埋め込み・表示することができます。以下にそのステップをご紹介します。
まずスタートする前に、EmbedFeedアカウントを持っていることを確認してください。まだお持ちでない場合は、7日間無料トライアルを始めて、以下のステップに進んでください。
ログインすると、Facebookをソースとして追加するためのソースセクションに移動します。
ソース（収集元）選択画面で、Facebookを選びます。
Facebookから投稿を収集するためには、FacebookアカウントとEmbedSocialを接続する必要があります。
Facebookを接続するをクリックして、画面の指示に従ってください。
EmbedFeedはFacebookから、みなさんが管理するFacebookページからアップされた投稿、皆さんにメンションされた投稿、ビジターの投稿、3つの方法で投稿を収集することができますので、お好みのソースを入力してください。
Facebookの投稿をウェブサイトに表示させるレイアウトをテンプレートから選びます。テンプレートを使わないで自分でデザインを一から作ることもできます
テンプレートを選択すると、ウィジェット（Facebookの埋め込みパーツ）の編集画面に進みます。ここで、Facebookの投稿をウェブサイトに埋め込むデザインのカスタマイズや投稿の並べ替えなどをします。
ウェブページのコードを編集できるプラットフォームを使用している場合、Facebookウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。
WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます：
設定は以上です。これで以下の様にFacebookの投稿をWebサイトに埋め込み表示することができます。
こちらが埋め込みツール「エンベッドソーシャル」を使ってフェイスブックページの投稿を埋め込んだ例です。デザインはこれ以外にもたくさんのオプションがあります。この例では、各投稿をクリックするとライトボックスで詳細が表示され、ヘッダーの「フォロー」ボタンをクリックすると当社のフェイスブックページにリンクするように設定してみました。
また、投稿内にCTAボタンを設置し、クリックすると関連したサイトにリンクさせることも可能です。ウェブサイト上に埋め込まれた投稿を見てすぐに、購入や問い合わせといったアクションにつなげやすくなります。
本製品の詳しい機能はこちらからご確認下さい。
もちろんほかにもたくさん埋め込みツールが出ています。価格帯も機能も様々ですので、ぜひ皆さんに合うツールを探してみてください。
フェイスブックをはじめとするSNSは、情報を幅広く届けるのに大変強力で、欠かせないツールになっています。一方で、今でもSNS（LINEを除く）を使わない人が多くいることも事実です。
そこでSNSの情報をウェブサイトやブログと連携しておけば、SNSを利用していないこれらの人々にも同じ情報を簡単に届けることが出来ます。しかもわざわざ別のコンテンツを作成したりウェブサイトを編集したりする必要もありません。
SNSとウェブサイトやブログの連携方法として有効な「埋め込み」テクニック。ぜひ皆さんの活動に役立ててみてください。
SNS埋め込みツール「エンベッドソーシャル」についてのお問い合わせはこちらまでぜひ！
【2023年6月更新】インスタグラム新機能・アップデート情報まとめ
WordPressウェブサイトにインスタグラムを埋め込む方法まとめ
インスタグラムをウェブサイトやブログに埋め込み表示する方法
FeedlinkがSNS運用＆ブログ作成ツールとして進化
UGCツール詳細比較！目的別おすすめ製品や選び方を解説
【弁護士監修】X（旧Twitter）投稿のWEBサイト掲載は違反になる？コンテンツの著作権について詳しく解説
