レスポンシブ幅のFacebookページプラグイン
Facebookは、Likeボックスプラグインに代わる新しいページプラグインを導入しました。
ドキュメント： https://developers.facebook.com/docs/plugins/page-plugin/
Like Boxプラグインをこの新しいプラグインに置き換えています。一部のWebサイトでは、このCSSコードを使用して、プラグインを要素内でレスポンシブにしました。
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;}
これをこのコードに置き換えると動作しません：
.fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important;}
マイページプラグインコードは次のようになります（データ幅属性を提供しません）。
<div class="fb-page" data-href="https://www.facebook.com/MyFacebookPage" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>
FacebookがiframeによってロードされたDOM内にインラインスタイル要素を持つdiv要素を追加したようです。
<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>
この幅を100％に調整すると、カバー写真を除くすべての要素が全幅に揃えられます。
Likeボックスプラグインと同じように、この新しいPageプラグインにレスポンシブな動作を与えることは可能ですか？
Facebookの新しい「（ページプラグイン）」の幅は、ドキュメントに従って180pxから500pxの範囲です。
180pxの下に構成されている場合、180pxの最小幅が強制されます。- 上記の
500pxで設定した場合、500pxの最大幅が強制されます
Adaptive Widthがチェックされている場合、例：
Like-boxとは異なり、このプラグインは設定を間違えると境界値に固執することで制限を強化します。
小さな画面の場合/応答動作
小さい画面でレンダリングする場合は、プラグインコンテナで
widthを強制し、プラグインが収まるようにします。コンテナが設定された
widthよりも細い場合、プラグインはより小さな幅で（小さな画面に収まるように）自動的にレンダリングします。モバイルではコンテナを縮小できます。プラグインは、
180pxの最小値が収まる限り収まります。
なし適応幅
- プラグインは、コンテナの幅に関係なく、指定された幅でレンダリングされます
これは、たとえばサイドバーなどの細い列にプラグインを配置した場合、あまりうまく機能しません。中サイズの画面では、これらは通常、幅が280px未満になります。
.fb-page,
.fb-page span,
.fb-page span iframe[style] {
width: 100% !important;
}
これは、ラッピングコンテナーの外側でプラグインが破損するのを防ぐために使用するコードです。タイル表示される古いlikeボックスとは異なり、これはオーバーフローし、オーバーフローしたコンテンツを非表示にします。
これは私のために働いています（幅はjavascriptとjavascript経由でロードされたFBプラグインによって強制されます）
<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.5&appId=443271375714375";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
jQuery(document).ready(function($) {
$(window).bind("load resize", function(){
setTimeout(function() {
var container_width = $('#container').width();
$('#container').html('<div class="fb-page" ' +
'data-href="http://www.facebook.com/IniciativaAutoMat"' +
' data-width="' + container_width + '" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>');
FB.XFBML.parse( );
}, 100);
});
});
</script>
<div id="container" style="width:100%;">
<div class="fb-page" data-href="http://www.facebook.com/IniciativaAutoMat" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>
</div>
新しい Facebook Page Plugin を最初のページの読み込みに応答させるには、data-width属性を削除して、代わりに追加します
data-adapt-container-width="true"
これにより、Facebook Page Pluginがレスポンシブになりますが、最初のページでのみレンダリングされ、最小幅は180pxです。
Facebookの警告にもかかわらず、本当に動的にレスポンシブにする方法を探しています（答えが見つかった場合は更新を投稿します）。
動的なサイズ変更なし
Pageプラグインは、レスポンシブ、流動的、静的なレイアウトで動作します。メディアクエリまたは他のメソッドを使用して、親要素の
widthを設定できます。プラグインは、ページのロード時に
widthを決定します。ページの読み込み後、ボックスモデルへの変更には反応しません。ウィンドウのサイズ変更時にプラグインのwidthを調整する場合は、プラグインを手動で再レンダリングする必要があります。
ソース： https://developers.facebook.com/docs/plugins/page-plugin
Io Ctaptcebが提案したように、ブラウザーのサイズ変更でウィジェットを再初期化することで動的に応答することができますが、そうすることで、メモリーをすぐに消費してしまう危険があります。
Yugal Jindleには良い答えがありましたが、それを明確にしたかったプラグインを本当に動的に反応させる方法をまだ見つけていません。
私と同じ問題があり、コメント間または他のスタックオーバーフローページで答えを見つけることができなかった人のために、これをここに書いています。
Facebook Page Plugin を追加し、コンテナの幅に調整する設定を追加しました。
data-adapt-container-width="true"
ただし、iframeまたはJavascript SDK要素内の1つ以上の要素に340pxの幅が与えられ、ページプラグインがコンテナの幅に適合しなくなりました。最小180px、最大500pxである必要があります。
しかし、Facebookが提供するコードには何かが欠けていました。
<div class="fb-page" data-href="https://www.facebook.com/Paras-Design-393209377418188" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>
手動でdata-width="500"を追加することにより、ページプラグインは期待どおりに応答し、コンテナの幅に合わせて最大幅500pxに適合しました。
これが同じ問題に遭遇した人の助けになることを願っています。
280より小さいサイズのJSソリューションをお探しの方に
ここに私のコードスニペットがあります：
facebookScale = function () {
var adjustWidth;
adjustWidth = $('.facebook-likebox').width() / 280;
return $('.fb-page').css({
'-webkit-transform': 'scale(' + adjustWidth + ')',
'-moz-transform': 'scale(' + adjustWidth + ')',
'transform': 'scale(' + adjustWidth + ')'
});
}
$(function(){
$('.fb-page').on('resize DOMSubtreeModified', facebookScale);
$(window).on('resize', facebookScale);
})
編集。以下がcssにあることを確認してください。
.fb-page{
transform-Origin: 0 0;
-webkit-transform-Origin: 0px 0px;
-moz-transform-Origin: 0px 0px;
}
FacebookプラグインをIFRAMEとして使用することで、Facebookプラグインの応答性のいくつかの制限を克服しましたが、コンテナー要素を満たすためにフレーム（およびSRC URLの幅/高さパラメーター）を動的にサイズ変更するJavaScriptでレンダリング時にブートストラップします。
コンテナが500pxを超える場合、右側に明らかなガターが発生しないように、単純な数学を使用してスケール変換を追加します。
IFRAME onloadイベントは、SRCが最初に空になったとき（bootstrap it_になったとき）、SRCの設定時にロードが完了した後に再び発生しますが、SRC属性が既に存在する場合は単にショートします。
私たちの使用法では、デスクトップ用のFacebookフィードの幅を変更せず、ハンドヘルド/タブレットビューポートの場合、それらの幅は本来固定されています（はい、方向の変更をトラップします）が、もしあなたがブラウザウィンドウのサイズが変更された場合は、自分で練習してコードを再起動するだけで済みます。
これは、ChromeおよびSafari、デスクトップおよびiOS/Androidでテストされています。
<script>
function setupFBframe(frame) {
if(frame.src) return; // already set up
// get parent container dimensions to use in src attrib
var container = frame.parentNode;
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var src = 'https://www.facebook.com/plugins/page.php' +
'?href=https%3A%2F%2Fwww.facebook.com%2FYourFacebookAddress%2F' +
'&tabs=timeline' +
'&width=' + containerWidth +
'&height=' + containerHeight +
'&small_header=true' +
'&adapt_container_width=false' + /* doesn't seem to matter */
'&hide_cover=true' +
'&hide_cta=true' +
'&show_facepile=false' +
'&appId';
frame.width = containerWidth;
frame.height = containerHeight;
frame.src = src;
// scale up if container > 500px wide
if(containerWidth) > 500) {
var scale = (containerWidth / 500 );
frame.style.transform = 'scale(' + scale + ')';
}
}
</script>
<style>
#facebook_iframe {
transform-Origin: 0 0;
-webkit-transform-Origin: 0px 0px;
-moz-transform-Origin: 0px 0px;
}
</style>
<iframe frameborder="0" height="0" width="0" onload="var _this = this; window.setTimeout(function(){ setupFBframe(_this); },500 /* let dom settle before eval parent dimensions */ );"></iframe>
編集：transform-Originを忘れ、スケールに合わせて左/上を調整する必要がなくなりました。ありがとうIo Ctaptceb
Graph API 2.3以降、Facebookはコメントプラグイン用に次のようなコードを提供します。
<div class="fb-comments"
data-href="http://absolute.url"
data-numposts="5">
</div>
data-width="100%"を追加して、次のように半応答性にします。
<div class="fb-comments"
data-href="http://absolute.url"
data-numposts="5"
data-width="100%">
</div>
プラグインはページのサイズ変更時に自身のサイズを変更しないため、半応答性です。サイズは、プラグインがロードされるときの画面のサイズに依存します。
受け入れられた答えは、そのページが初めてロードされたときにのみ機能しますが、モバイルデバイスでブラウザーのサイズを変更するか、横から縦に変更した後、Facebookプラグイン（バージョン3.2）はコンテナーに適合しません。私の解決策は、プラグインコンテナの幅に適応するをチェックし、ページのサイズが変更されたときにリスナーを追加してからfacebook iframeを削除して再度ロードしてください。
window.addEventListener('resize', this.resize);
resize = () => {
document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
FB.XFBML.parse();
};
ちなみに、ユーザーがページのサイズを変更している間に複数の更新を行わないようにタイムアウトを追加しましたが、これはオプションです
var FB_UPDATE_TIMEOUT = null;
window.addEventListener('resize', this.resize);
resize = () => {
if(FB_UPDATE_TIMEOUT === null) {
FB_UPDATE_TIMEOUT = window.setTimeout(function() {
FB_UPDATE_TIMEOUT = null;
document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
FB.XFBML.parse();
}, 100);
}
};
私は幅の代わりに最大幅でロバートスミスによって提案されたソリューションを使用しています：
.fb-page,
.fb-page span,
.fb-page span iframe[style] {
max-width: 100% !important;
}
また、Yugal Jindleの提案を使用しているので、
data-width="555"
そして
data-adapt-container-width="true"
これで私のページは大丈夫です！本当にありがとうございます！
過去5〜7年でFacebookページプラグインはまったく変更されていないようです。最初から応答していませんでしたが、新しいパラメーターAdapt to plugin container widthでも機能しないか、私は動作しません仕組みを理解します。
私はPLUGIN SIZE 100% WIDTHを実行するための最も可能性の高い簡単な方法を探していますが、不可能であるようです。ナンセンスが最高です。デザイナーはこの問題をどのように解決しますか？
今回は2017年10月に最適な決定を見つけました。
.fb-page, .fb-page iframe[style], .fb-page span {
width: 100% !important;
}
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
これにより、レスポンシブ画面の画面サイズの幅を壊すことはできませんが、しばらくの間カットされて伸縮しないため、stillいように見えます... Facebookはプラグインのデザインをまったく気にしません。それが真実です。
サイズ変更が行われた後にのみイベントをトリガーするように、Twentyfortysixの回答を少し洗練させました。
さらに、ウィンドウの幅のチェックを追加したため、Androidで再初期化がトリガーされません。
(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_EN/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
jQuery(document).ready(function($) {
var oldwidth = $(window).width();
var timeout;
var recalc = function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
var container_width = $('#fbcontainer').width();
$('#fbcontainer').html('<div class="fb-page" ' +
'data-href="YOUR FACEBOOK PAGE URL"' +
' data-width="' + container_width + '" data-height="750" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="YOUR FACEBOOK PAGE URL"><a href="YOUR FACEBOOK PAGE URL">YOUR FACEBOOK PAGE TITLE</a></blockquote></div></div>');
if(typeof FB !== 'undefined') {
FB.XFBML.parse( );
}
}, 100);
};
recalc();
$(window).bind("resize", function(){
if(oldwidth !== $(window).width()) {
recalc();
oldwidth = $(window).width();
}
});
});
他の人と同じように、コンテナが縮小するときにプラグインを（JSを介して）縮小することができますが、その後は拡張してもプラグインは成長しません。
問題は、元のFB.XFBML.parse()がドキュメントツリーに固定スタイルの子ノードのセットを作成し、その後の呼び出しで古いノードが適切に消去されないことです。コードで自分でやれば、すべてうまくいきます。
Facebook HTML（セレクターの事故を避けるために、Facebookが提供するものにID要素を追加しただけです）：
<div id="divFacebookFeed" class="fb-page" data-href="..." ...>
<blockquote id="bqNoFeed" cite="(your URL)" class="fb-xfbml-parse-ignore">
<a href="(your URL)">Your Site</a>
</blockquote>
</div>
...ウィジェットを500pxにサイズ変更し、内部フォールバック要素を保持するJQueryコード：
var bq = $('#bqNoFeed').detach();
var fbdiv = $('#divFacebookFeed');
fbdiv.attr('data-width', 500);
fbdiv.empty();
fbdiv.append(bq);
FB.XFBML.parse();
以下に、iframe includeの動的なサイズ変更方法と、サイズ変更イベントでの再レンダリングの遅延を示します。
function _facebook() {
var parent = document.getElementById('facebook');
var width = (window.innerWidth > 540) ? 500 : window.innerWidth - 40;
if (parent.firstChild && parent.firstChild.width == width) { return; }
var url = 'https://www.facebook.com/plugins/page.php?href=YOUR_FACEBOOK_PAGE_URL&tabs=messages&width='+width+'&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=YOUR_APP_ID';
var i = document.createElement('iframe');
i.src = url;
i.width = width;
i.height = 500;
i.style = 'border:none;overflow:hidden';
i.scrolling = "no";
i.frameborder = "0";
i.allowTransparency = "true";
while (parent.firstChild) { parent.removeChild(parent.firstChild); }
parent.appendChild(i);
}
_facebook();
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
_facebook();
}, 250);
});