私は自分のサイトにプラグインを埋め込み、Facebookページに完全に反応するようにしています。基本的には、ブラウザのサイズによってブラウザの幅を変えたいだけです。ブラウザが480以下の場合は480ピクセル、 250pxの場合481 <ブラウザ< 731、ブラウザが731以上の場合は300pxです。レスポンシブFBページプラグイン（自動ブラウザリフレッシュ付き）JavaScript
私はこの質問has been asked here beforeを知っていますが、これまでの回答はFBの変更によってうまく機能しなくなりました。また、ユーザーがブラウザウィンドウを更新する必要があります。しかし、this blog postに私は実際の例完全に機能する応答のFBページのプラグインを見つけました。ブラウザウィンドウのサイズが変更されると、サイズやその他の特性がオンザフライで変更されます。
ブログの投稿には、使用しているJavaScriptとそのサイトを見ることのできるリンクが掲載されています。しかし、彼らはCSSとHTMLに関わる全てのものを取り除いたものではなく、サイト上のコードは初心者の目には少し複雑です。私は自分のJavaScriptを自分のサイトに追加しようとしましたが、なんらかの理由で私のためには機能しません。ブラウザの幅を変更すると、私のDIV #fbsectionはその幅をうまく調整しますが、内部のDIV .fbページは更新する場合にのみ変更されます。
私は彼らの応答テンプレートを使用してDreamweaverのCS 6で、私のサイトを作って、それがrespond.min.js自分のスタイルシートboilerplate.cssとJavaScriptが組み込まれています。次のように関連するコードは次のとおりです。（HTMLドキュメントから）
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="bluedolphin.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).on('resize', function() {
setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 500);
});
$(window).on('load', function() {
setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 1500);
});
CMSSpace.changeFBPagePlugin = function() {
//getting parent box width
var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
//getting parent box height
var container_height = (Number($('.fb-column').height()) - (Number($('.fb-column-header').height()) + Number($('.fb-column- header').css('margin-bottom').replace("px", "")) + Number(($('.fb-column').css('padding-top').replace("px", "")*2)))).toFixed(0);
if (!isNaN(container_width) && !isNaN(container_height)) {
$(".fb-page").attr("data-width", container_width).attr("data-height", container_height);
}
if (typeof FB !== 'undefined') {
FB.XFBML.parse();
}
}
</script>
私のスタイルシートbluedolphinbodywork.cssから
<div id= "fbsection">
<h1>Facebook</h1>
<p class="centered"><a href="https://www.facebook.com/pg/bluedolphinbodywork/">Like my Page</a> for the chance to be notified when I post special offers there, and please Invite your Facebook Friends, too! </p>
<div class="fb-page" style="max-width:300px; margin:auto;"
data-href="https://www.facebook.com/bluedolphinbodywork"
data-tabs="timeline"
data-small-header="false"
data-adapt-container-width="true"
data-height="1000"
data-width="300"
data-hide-cover="false"
data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/bluedolphinbodywork" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/bluedolphinbodywork">Blue Dolphin Bodywork</a>
</blockquote>
</div>
</div>
</div>
関連切れ端：
#fbsection {
display: block;
margin-left: auto;
margin-right: auto;
max-width:480px;
vertical-align:top;
margin-bottom:5px;
padding-bottom:5px;
position: relative;
}
@media only screen and (min-width: 481px) {
#fbsection {
display:inline-block;
max-width:250px;
}
@media only screen and (min-width: 732px) {
#fbsection {
max-width:300px;
}
私は間違っていますか？ すべての返信いただきありがとうございます。