bingo!CMS v1.7 マニュアルサイト

<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>

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>

<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>

<div id="fb-root"></div>

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

<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>

<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>

追加前

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

追加後

data-width="' + w + '" data-height="' + h + '"