Facebookの投稿やタイムラインをサイトに埋め込む方法

Facebook(単体の投稿の埋め込み方法)

  1. Facebookを開き、埋め込みたい投稿の右上にある、点が3つ並んだメニューをクリックします。
  1. 埋め込み をクリックします。
  1. 埋め込み投稿 が開きます。
    写真つきの投稿を埋め込む際、写真と投稿文を一緒に埋め込む場合は、 投稿全文を含める にチェックを入れます。
    写真のみ埋め込む場合はチェックを外します。
  1. コードを取得 をクリックします。
  1. コードがポップアップで表示されます。
    IFrame をクリックしタブを切り替え、コードをコピーします。
    コピーしたコードは、後ほどbingo!CMSの編集画面で使用します。
    メモ帳などに貼り付けて保存しておきます。

以下は、bingo!CMS公式Facebookの場合のコードの生成例です。

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FbingoCMS%2Fposts%2F3986339781396174&amp;show_text=true&amp;width=552&amp;height=811&amp;appId" width="552" height="811" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
  1. Facebookを埋め込みたいページに、HTML v17ユニット をドラッグ&ドロップで配置します。
    ユニットの編集画面の html の入力欄に先ほどコピーしたタグを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
  1. 埋め込みが完了しました。
    ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。

Facebook(タイムラインの基本的な埋め込み方法)

  1. https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP にアクセスし、FacebookページのURL に埋め込みコードを発行したいFacebookページのURLを入力します。
    タブ が空欄の場合は timeline と入力します。

【タブについて】

タブ は、タイムライン以外にイベントとメッセージを表示できます。
その場合、timeline の後に events 、messages を カンマ区切りで入力します。
生成したコードをサイトに埋め込むと、Facebookページで公開しているイベント情報を表示したり、埋め込みからFacebookページへメッセージを送信できるようになります。

  1. 幅(最小180px:最大500px)、高さ(最低70px)に任意の値を入力し、コードを取得 をクリックします。
    値が未入力の場合、幅はデフォルトの340pxとなります。

【その他】

  • スモールヘッダーを使用 => ヘッダーの高さが低くなります。
  • カバー写真を非表示にする => Facebookページに登録したカバー画像が非表示になります。
  • plugin containerの幅に合わせる => ページの読み込み時に、コンテナに合わせプラグインの幅が可変(最小180px:最大500px)します。
    ただし、ページの読み込み後にスマートフォンの画面を回転させるなどしてもサイズは自動変更されず、手動で再読み込みが必要となります。
  • 友達の顔を表示する => そのFacebookページにいいね!した友達のプロフィール写真を表示します。
  1. コードがふたつ生成されるので、それぞれコピーします。

以下は、bingo!CMS公式Facebookの場合のコードの生成例です。

Step 1: Include the JavaScript SDK on your page once, ideally right after the opening 本文 tag.
(JavaScript SDKをページに1回、理想的には開始タグの直後に含めます。)

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>

Step 2: Place this code wherever you want the plugin to appear on your page.
(プラグインをページに表示する場所にこのコードを配置します。)

<div class="fb-page" data-href="https://www.facebook.com/bingoCMS/" data-tabs="timeline" data-width="250" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/bingoCMS/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/bingoCMS/">bingoCMS</a></blockquote></div>
  1. Facebookを埋め込みたいページに、HTML v17ユニット をドラッグ&ドロップで配置します。
    ユニットの編集画面を開き、html の入力欄にStep 2のコードを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
<div class="fb-page" data-href="https://www.facebook.com/bingoCMS/" data-tabs="timeline" data-width="250" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/bingoCMS/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/bingoCMS/">bingoCMS</a></blockquote></div>
  1. ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
    javascript の入力欄にStep 1のコードを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
    ※bingo!CMSのバージョンにより、スマートフォン用の入力欄がない場合があります。
    保存後、ポップアップウィンドウは × で閉じます。
  1. 埋め込みが完了しました。
    ページ編集画面にうまく表示されないときは、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
  1. プレビュー画面で埋め込みの表示が確認できました。

Facebook(タイムラインをレスポンシブで埋め込む方法)

本Tipsは以下の記事を元に、bingo!CMSに合わせて適宜変更を加えています。
引用元: facebookのページプラグインをレスポンシブで埋め込む方法 - ユニバースオフィシャルブログ「ゆにメモ」

  1. 前述の基本的な埋め込み方法の手順1〜2を参照し、コードを取得します。
    この時、幅と高さの値は未入力にし、必ず plugin containerの幅に合わせる にチェックを入れます。
  1. Facebookを埋め込みたいページに、HTML v17ユニット をドラッグ&ドロップで配置します。
    ユニットの編集画面を開き、html の入力欄に以下のコードを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、SP でタブを切り替え、PCの内容をコピー をクリックしてから保存します。
<div id="fb-root"></div>

<div class="facebook-wrapper"></div>

※保存後にユニットが一時的に非表示になることがありますが、そのまま次の手順に進んでください。

  1. ページ編集画面右上の このページ用のcssとjavascriptの設定 をクリックし、CSS・JS設定 を開きます。
    css の入力欄に以下のコードを貼り付けて保存します。
    スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
    ※bingo!CMSのバージョンにより、スマートフォン用の入力欄がない場合があります。
<style type="text/css">
.facebook-wrapper {
    max-width: 500px;
    margin: 0 auto;
}
.facebook-wrapper > .fb-page {
    width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}
</style>

※中央寄せにするため margin: 0 auto; を記述していますが、不要な場合は削除してください。

  1. 続けて、同じ画面の javascript の入力欄に以下のコードを貼り付けて保存します。
     
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>

<script>
j$(function() {
    // ページプラグインの埋め込みコードを返す。
    function pagePluginCode(w) {
        // 幅に応じて高さを変更する場合
        if(w > 400) {
            var h = 600;
        } else {
            var h = 400;
        }
        return '★★★★★';
    }
 
    // ページプラグインを追加する要素
    var facebookWrap = j$('.facebook-wrapper');
    var fbBeforeWidth = ''; // 前回変更したときの幅
    var fbWidth = facebookWrap.width(); // 今回変更する幅
    var fbTimer = false;
    j$(window).on('load resize', function() {
        if (fbTimer !== false) {
            clearTimeout(fbTimer);
        }
        fbTimer = setTimeout(function() {
            fbWidth = facebookWrap.width(); // 変更後の幅を取得
            // 前回の幅から変更があった場合のみ処理
            // スマホだとスクロール時にリサイズが発生することがあるため
            if(fbWidth != fbBeforeWidth) {
                facebookWrap.html(pagePluginCode(fbWidth)); // ページプラグインのコード変更
                window.FB.XFBML.parse(); // ページプラグインの再読み込み
                fbBeforeWidth = fbWidth; // 今回変更分を保存しておく
            }
        }, 200);
    });
});
</script>

※プラグインの表示幅が、400px以上のときは高さ600px、それ以下のときは400pxとなるよう記述していますので適宜ご変更ください。

  1. さらに、貼り付けたコードの ★★★★★ の部分に、先程取得したStep 2のコードを置き換えます。
  1. 置き換えたコードの deta-width および deta-height に、以下を加えて保存します。
    スマートフォンでも埋め込みを表示させる場合は、スマートフォンにコピー をクリックしてから保存します。
    保存後、ポップアップウィンドウは × で閉じます。

追加前

data-width="" data-height=""

追加後

data-width="' + w + '" data-height="' + h + '"
  1. 埋め込みが完了しました。
    ページ編集画面にうまく表示されないときは、ページを再読み込みするか、画面右上の PREVIEW のボタンをクリックし、プレビュー画面で確認してください。
  1. プレビュー画面で埋め込みの表示が確認できました。
  1. スマートフォン用のプレビュー画面に表示されるQRコードを読み込むと、お手持ちのスマートフォンでレスポンシブの動作確認が行なえます。

【レスポンシブの範囲について】

プラグインの仕様により、レスポンシブの範囲は幅:最小180px/最大500pxとなります。

その他のSNS

ページトップ