2022/12/08Facebookページや投稿をウェブサイトやブログに埋め込む方法フェイスブックページをPRツールの一つとして利用し、情報発信を行っている皆さんは多いと思いますが、ウェブサイトやブログと連携をとっていますか?フェイスブックとウェブサイト等を自動で連携させれば、フェイスブックへの投稿一回でウェブサイト上のPRコンテンツの更新を行うことが出来て効率的です。そこで今回はフェイスブックの投稿をウェブサイトに埋め込む方法、中でも専門知識が不要な、誰でも簡単にできる方法をご紹介します。公式ページプラグインを使ってフェイスブックページごと埋め込む方法SNS埋め込みツールを使って複数の投稿を一度に埋め込む方法SNSとウェブ連携でSNS非利用者にも同じメッセージを一度に届けることができるそれでは1つ1つ見ていきましょう。公式アプリからフェイスブックの投稿ごとに埋め込みコードを取得・コピーして、ウェブサイトやブログに貼り付けて埋め込む方法です。フェイスブックページに投稿した中から一部だけを投稿したい場合に使える方法です。投稿はフェイスブックページの公開投稿のみです。個人アカウントのページの投稿は埋め込むことが出来ないのでご注意ください。以下、パソコンを使ってワードプレスで作成したウェブサイトやブログに貼り付ける際の方法をステップごとにご紹介します。投稿から埋め込み用のコードを取得するフェイスブックページの各投稿の右上にある3つの点をクリックするとプルダウンメニューが出てきますので、「埋め込み」をクリックします。クリックすると「外部へ埋め込む」というポップアップが出てきます。カスタマイズを行わない場合は、「コードをコピー」をクリックします。これで埋め込み用のコードを取得できました。埋め込む投稿の幅を変えるなどのカスタマイズを行う場合は、ポップアップ内の「詳細設定」をクリックしてください。Developersの「埋め込み投稿」ページに移動します。このページには「コードジェネレーター」というツールがあり、先ほど「埋め込み」をクリックした投稿のURLが自動的に入力されているのが確認できます。このページでは、投稿の幅を調整したり、投稿全文を含めるかどうかを選択し、「コードを取得」をクリックします。「埋め込み投稿」のページには、様々な埋め込み方法につてのガイドが載っていますので、ページ右上の目次を確認してみてください。埋め込みコードを選び、コピーしてウェブサイトの掲載したい場所に貼り付ける「コードを取得」をクリックすると、コードが2種類出てきます。どちらも基本的にはコピー&ペーストで埋め込みが完了して簡単です。埋め込んだ先での加工性を考えるとおすすめはJavascriptですが、ただ投稿画面を埋め込むだけという場合はiFrameでもよいでしょう。ここではiFrameを使った方法をご紹介します。コードをコピーしたら、ウェブサイトやブログでフェイスブック投稿を埋め込みたいところに貼り付けます。ワードプレスではテキストエディタ画面にして貼り付けます。これで、フェイスブックページの投稿がウェブサイトやブログで表示されるようになりました。フェイスブックページの公開範囲に制限があると埋め込みができないウェブサイトに埋め込みが可能な投稿はFacebookページとプロフィールの公開投稿のみです。フェイスブックページの投稿でも、公開範囲が非公開になっていたり、国別制限や年齢制限をかけていると、埋め込むことが出来ません。自分のフェイスブックページの公開範囲の設定を確認する場合は、フェイスブックページのホーム画面右上のプロフィール写真をクリックして、「設定とプライバシー」>「設定」>「プライバシー設定」と進んでください。公式ページプラグインを使ってフェイスブックページごと埋め込む方法フェイスブック公式のページプラグインを使って、フェイスブックページをウェブサイトやブログに埋め込む方法です。以下、パソコンでワードプレスで作成したウェブサイトやブログに貼り付ける際の方法をステップごとにご紹介します。Developers内の「ページプラグイン」ページを開きます。(もしページの途中が表示される場合は、「ページプラグイン」ページの一番上までスクロールします。)FacebookページのURLの入力欄がありますので皆さんのFacebookページのURLを入力してください。埋め込んだページのプレビューが出てきます。お使いのパソコンでフェイスブックにログインしたことがあると、自動でURLが入力されていることもあります。設定を変えない場合は、「コードを取得」をクリックします。大きさを変えたり、投稿を含まない表示にしたりなどの変更をする場合は次のパートで説明します。「コードを取得」をクリックすると、埋め込みコードが2種類出てきます。どちらもコピー&ペーストでウェブサイトやブログに貼り付けるだけです。ページ埋め込みコードをコピーしてウェブサイトの埋め込みたい場所に貼り付けるコードの部分をクリックすると全選択になりますので、右クリックでコピーをし、ウェブサイトやブログに貼り付けます。ワードプレスを使ったブログの例では、編集画面をテキストエディタで開きコードを貼り付けます。本文にステップ1のコードを貼り付けます。場所はどこでもよいのですが、コード取得画面で推奨されているので、本文のすぐ後が良いでしょう。ちなみにこのコードは本番画面上では見えません。次に、埋め込みたい場所にステップ2のコードを貼り付けます。これで、ページの埋め込みは完了です。以上のステップでフェイスブックページを埋め込むとこのようになります。Japanタブやサイズの変更などデフォルトの表示設定を変える方法フェイスブックページの埋め込みは、いくつかカスタマイズが出来ます。ここではその方法をご紹介します。埋め込んだフェイスブックページにはタイムラインだけでなく、イベントとメッセージのタブを表示することができます。タブはこのような感じで表示されます。(timeline):フェイスブックページのタイムライン上の投稿が表示されます。デフォルトではtimeline(タイムライン)が入力されていますので、タイムライン投稿を表示したくない場合は、タブ欄から消すと表示されません。(event):タブをクリックすると予定されているイベントが表示され、そこからイベント詳細ページにリンクすることが出来ます。メッセージ(messages):タブをクリックするとフェイスブックページを埋め込んだウェブサイトから直接メッセージを送信できます。「ページプラグイン」ページのタブ欄に、timeline,event,messageと入力すると、埋め込みコードにも反映されますので「コードを取得」をクリックして、先ほどと同じように埋め込みコードをコピー&ペーストしてください。(参考)もしこのタブ欄がうまく作動しない場合は、少しだけコードを編集する必要があります。コピー&ペーストで出来るので、コード知識がなくても簡単ですのでご安心ください。方法は以下の通りです。埋め込みコードを取得し(方法は上のパートでご確認下さい。)、メモ帳やワードプレスのテキストエディタ等、コードを編集できる場所に貼り付けます。SDKのステップ2でコピーしたコードの中の「data-tabs=”timeline”」の箇所を編集します。タイムライン、イベント、メッセージで表示したいタブを、カンマ区切りで入力します。3つのタブを表示したい場合は、data-tabs="timeline,events,messages"に変更します。変更したコードをウェブサイトに貼り付けると、先ほどお見せしたように3つのタブが並んだ形で表示されます。Japan幅・高さ埋め込んだフェイスブックページのウェブサイト上でのサイズを調整できます。こちらはページプラグインの入力欄で設定できますので、コードを取得する前に希望するサイズを入力します。入力するとプレビューが自動で変更されるので、確認しながら設定できます。その他その他にも「ページプラグイン」では、以下の設定が可能です。チェックのオン/オフで設定が可能です。containerの幅に合わせる:プラグイン(埋め込みページ)の可変幅が親コンテナの幅(最小180px/最大500px)に合わせて設定されます。オフにすると親コンテナの幅に関係なく、埋め込んだプラグインは指定した幅で表示されます。友達の顔を表示する:ページのヘッダーの下にフェイスブックページの友達のプロフィールを表示します。公式機能を使えばフェイスブックページや投稿の埋め込むことは可能ですが、投稿を一つ一つ埋め込むなど作業が面倒であったり、拡張性やデザインに制限があります。そこでこれらの難点を解決したい場合は、SNS埋め込みツールの利用をおすすめします。当社の製品「エンベッドソーシャル」もそんな埋め込みツールの一つです。SNS埋め込みツール「エンベッドソーシャル」ならFacebookはもちろんほかのSNSの投稿も簡単に埋め込むことが出来ますこちらが埋め込みツール「エンベッドソーシャル」を使ってフェイスブックページの投稿を埋め込んだ例です。デザインはこれ以外にもたくさんのオプションがあります。この例では、各投稿をクリックするとライトボックスで詳細が表示され、ヘッダーの「フォロー」ボタンをクリックすると当社のフェイスブックページにリンクするように設定してみました。投稿内にCTAボタンを設置し、クリックすると関連したサイトにリンクさせることも可能です。ウェブサイト上に埋め込まれた投稿を見てすぐに、購入や問い合わせといったアクションにつなげやすくなります。本製品の詳しい機能はこちらからご確認下さい。ほかにもたくさん埋め込みツールが出ています。価格帯も機能も様々ですので、ぜひ皆さんに合うツールを探してみてください。SNSとウェブ連携でSNS非利用者にも同じメッセージを一度に届けることができるフェイスブックをはじめとするSNSは、情報を幅広く届けるのに大変強力で、欠かせないツールになっています。一方で、今でもSNS(LINEを除く)を使わない人が多くいることも事実です。そこでSNSの情報をウェブサイトやブログと連携しておけば、SNSを利用していないこれらの人々にも同じ情報を簡単に届けることが出来ます。別のコンテンツを作成したりウェブサイトを編集したりする必要もありません。SNSとウェブサイトやブログの連携方法として有効な「埋め込み」テクニック。皆さんの活動に役立ててみてください。-簡単な操作でSNSの投稿をWEBサイトに埋め込み。キャンペーンや口コミ・更新のいらないメディアとして活用できます。国内初、独自ドメインを利用できるリンクまとめサービスをEmbedSocialが正式ローンチ。国内初、独自ドメインを利用できるリンクまとめサービスをEmbedSocialが正式ローンチ。SNS連携なら7日間システムを無料でお試し!無料トライアルご導入完了までのご質問やご相談などもお気軽にお問い合わせください。お問い合わせ導入に関するご不明点を専門スタッフが解決します。相談するお見積りご導入内容に合わせた最適なプランを選択できます。製品の使い方を解説するウェビナーを開催しています。特定商取引法に基づく。