「レスポンシブ デザイン」のコンセプトを中心にサイトを開発していますが、Facebook のソーシャル プラグインは幅が固定されており、サイズを変更するとレイアウトが「壊れて」しまいます。
メディア クエリを使用して、プラグインを低解像度ブラウザー (モバイルなど) で非表示にするように設定しました。ただし、デスクトップ ブラウザーでは、ブラウザー ウィンドウのサイズを小さく変更しても、プラグインを非表示にするほど小さくないと、プラグインがレイアウトからはみ出してしまいます。
Facebook ソーシャル プラグインの流動的な幅を設定する方法はありますか?
これらの方法はどれも機能しませんでしたが、このアイデアを使用すると、次のことがうまくいきました。
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
cssを使用して解決策を見つけました。この記事からインスピレーションを得ました http://css-tricks.com/2708-override-inline-styles-with-css/
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
このコードを使用して、なんとか機能させることができました：
.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
width: 100% !important;
}
私のhtmlファイルにはこれがあるからです：
<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true" data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>
ヒント: div クラスに応じて CSS を変更する必要があります。
これは古い質問ですが、これは現在、「facebook コメント プラグイン レスポンシブ」の Google 結果のトップであるため、依然として関連性があります。
FBが最近（2014年5月）最後にこれを修正したため、他の回答の回避策はもう必要ありません。
https://developers.facebook.com/x/bugs/256568534516879/から:
この問題の修正をプッシュしました。今後は、幅を 100% (例: data-width="100%") に指定して、流動的なレイアウトを取得できます。ドキュメントも更新されています: https://developers.facebook.com/docs/plugins/comments お待たせしました。
これで、HTML を次のように更新できます。
<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>
また、追加の CSS 回避策は必要ありません。
編集: これにより、プラグインが作成され、ロード時に利用可能なスペースに幅が適応されます。ブラウザ ウィンドウのサイズを変更すると、プラグインはその初期幅のままになります。真のレスポンシブにするには、これを CSS に追加します。
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
これにより、ブラウザのサイズを変更したときにプラグインが現在利用可能なスペースに適応します
モバイル スニッフィング facebook が原因で、公式の wordpress facebook プラグインを使用している場合。
モバイル デバイスのユーザー エージェントが検出されると、モバイル バージョンが自動的に表示されます。mobile パラメーターを false に設定することで、この動作をオフにすることができます。注: モバイル バージョンでは幅パラメーターが無視され、代わりに 100% の流動的な幅があり、縦向き/横向きの切り替え状況で適切にサイズ変更されます。この動作を利用するには、モバイル サイト用に CSS を調整する必要がある場合があります。必要に応じて、コンテナー要素を介して幅を制御することもできます。 http://developers.facebook.com/docs/reference/plugins/comments/
facebook/social-plugins/fb-comments.php の 35 行目を変更する必要があります。
<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>
これにより、以下でスタイルを設定できます。
.fb-social-plugin {
width:98%!important;
}
.fb_iframe_widget span {
width:100%!important;
}
.fb-comments iframe[style] {width: 100% !important;}
モバイル版を修正するか、プラグインの GUI に設定を追加していただければ幸いです。
受け入れられた答えは私にとってはうまくいきませんでした。
ここのコメントでクレイグ・ベイリーがこれを見つけました：
http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress
これは完全に流動的です (osx ff & safari、ios6 でテスト済み)。
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
この投稿はそれほど古いものではないようですが、答えがうまくいきませんでした。これをスタイルシートに追加する必要がありました...
#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}
.fb_iframe_widget と .fb_iframe_widget[style] の両方が重要なようです。
このサイズ変更に関する重要な注意事項: Facebook のコメント スクリプトが、ユーザーがモバイル デバイスを使用していることを検出すると、これが中断されます。ただし、<fb:comments>タグに属性値mobile="false"を含めると、(今のところ) Facebook のスクリプトは CSS を尊重します。
Activity FeedやLike Boxなどの Facebook プラグインにHTML5コードを使用したい場合:
/******* IPHONE PORTRAIT MODE (480px or less) *******/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.fb_iframe_widget span[style], .fb_ltr[style] {
width:420px !important;
}
}
2015 年 9 月の時点で、この問題に対する私自身の解決策で無知な大衆に参加する:
fb-pageFacebook はと呼ばれるウィジェットにオプションを提供しますadapt-container-width。これは (ドキュメントによると) 親の幅 (最大幅 まで) を追跡する必要があり500pxます。で再レンダリングするとFB.XFBML.parse()、実際のウィジェット自体に設定した値にもかかわらず、ウィジェットが親のコンテナー幅の奇妙な値で動かなくなったようです。今のところ、これで十分に機能します。
windowイベントをのresizeメソッドにバインドします (必要に応じて_.debounce適切な制限を使用して、中間リクエストでブラウザが過負荷になるのを防ぎますFacebook がさらに多くのウィジェット API を公開するのを待って、一体何が起こっているのかを確認できるようにします
<div class="fb-page"
data-adapt-container-width="false" <!-- This bit's the important part -->
data-href="https://www.facebook.com/yourpage"
data-show-posts="true"
data-small-header="true"
data-width="100%"
>
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/yourpage"><a href="https://www.facebook.com/yourpage">Like YourPage on Facebook!</a></blockquote>
</div>
</div>
次の JavaScript と組み合わせます。
// FB Resize
$(window).bind('resize', _.debounce(function() {
if (window.FB && FB.XFBML && FB.XFBML.parse) {
var el = $('.fb-page');
var width = el.parent().width();
el.attr('data-width', width);
FB.XFBML.parse();
}
}, 1000)); // Debounce until 1000ms have passed
この単純なスクリプトを使用してこれを機能させました（リンクのコードを参照）。
https://gist.github.com/2111366
Facebook アプリ ID とページ URL を使用するには、情報にいくつかの変更を加える必要があります。
このソリューションは jQuery を使用しているため、その仕組みを理解する必要がありますが、スクリプトを取得してレスポンシブ デザインを実行すると、ページの読み込み時またはページのサイズ変更時に機能します。
これはJQueryであり、あなたの質問に対する答えの一部である可能性があります。「いいね」ボタンのHTML5バージョンを使用しています。
<div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"></div>
「div.main-content」要素は、「いいね」ボタンが私のデザインに適合しなければならない要素です。サイズ変更は、divが非常に小さくなるまで機能するため、div.fb-likeのdata-layout属性を「標準」から、水平方向のスペースをあまりとらない代替属性に変更する必要があります。私はこれに慣れていないので、これがいいねボタンを反応させるための最もエレガントな解決策であるかどうかはわかりません。このテーマの専門家である誰かから、この質問への回答を求めています。
$(window).resize(function() {
var computed_width = $('div.main-content').width();
$('div.fb-like iframe').attr('style', 'border: medium none; overflow: hidden; height: 24px; width: ' + computed_width + 'px');
});
HTML5 Facebook LikeBox プラグインを応答の高さまたは幅で DOM に追加する小さな回避策を次に示します。
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var widget_height = parseInt((height)*0.9);
var widget_width = parseInt((height)*0.3);
var page_url = "http://www.facebook.com/Facebook";
$(".fb-plugin").append("<div class='fb-like-box'
data-href='"+page_url+"'
data-width='"+widget_width+"'
data-height='"+widget_height+"'
data-colorscheme='dark'
data-show-faces='true'
data-border-color='#222'
data-stream='true'
data-header='true'>
</div></div>");
});
これは、正規表現を使用して幅のみを書き換え、スタイル タグの残りの部分をそのままにしておくため、出力マークアップの変更後も存続する必要がある jquery です。
#footer-last の例を置き換えて、正しいコンテナー ID またはセレクターを指定する必要があります。iframe は、コンテナーの幅の変更に基づいてサイズ変更されます。これは、レスポンシブとして設定する必要があります。
// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);
コメントについてはわかりませんが、リンク ボックスでは、Facebook から直接 iframe オプションを使用し、パーセンテージでピクセル単位の幅を切り替えるだけで、幅に応じて変化します。入っている列です。
inspect 要素を使用して、生成されているコードを確認します。Wordpress Facebook プラグインのようないくつかのケースでは、異なる「ID」を使用し、使用されている ID を見つけたら追加します
#fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}
これは、私が学習しているトリックを常に行うとは限りません。色やサイズを変更することはできますが、レスポンシブにすることはまだ非常にバグがあります。パーセンテージが気に入らないようで、ボックスのサイズが表示されないため、これは機能しません。@media クエリを実行して、ブラウザ ウィンドウのサイズに応じてサイズを変更しようとしています。
幅を認識してくれればいいのですが、@media しか方法がないようです。
以下は、jQuery を使用した完全な例で、応答幅と読み込み中の画像があります。Alan と Jubair の CSS コードは、コード内でコメント化されています。
それは Android Webview で正常に動作します
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100%;/* !important; To get the control with JQuery*/
}
</style>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
channelUrl : '//domain.com/channelUrl.php',
status : true,
cookie : true,
xfbml : true
});
//Event fired when the plugin has been completely loaded
FB.Event.subscribe('xfbml.render',
function(response) {
//alert('You liked the URL: ' + response);
var w = (typeof window.innerWidth != 'undefined')?
window.innerWidth
:(typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) ?
document.documentElement.clientWidth
: document.getElementsByTagName('body')[0].clientWidth;
w *= .950; //95% for best fit on mobile screens
//RESIZE
$(".fb-comments").css("width",w);
$(".fb-comments > span").css("width",w);
//Some days ago the next line would be sufficient
$(".fb_ltr").css("width",w);
//Now the modify of the span width is necessary to do the work
$("#div_loading_gif").remove();
}
);
};
//cargando SDK Asíncronamente
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="div_loading_gif" style="width:100%; height:100%; text-align:center; background:url(../img/loading.gif) no-repeat center center;" >
</div>
<!--Usando jquery modificar el style de el div de clase fb_ltr
cambiar el ancho por el de la pantalla-->
<div class="fb-comments"
style="padding:0 auto;"
data-href="http://domain.com/comments.html"
data-width="100px"
data-num-posts="5"
data-mobile="false"
>
</div>
</body>
Facebook は、コメント プラグインから出力されるマークアップにいくつかの変更を加えました。HTML5版を使用しています。上記で共有されたものからのこの修正された CSS は、トリックを行いました。
.fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {width: 100% !important;}
これを試してみたところ、幅が固定された<div>内にあるように見えます。つまり、流動的にするには、javascript でタグを実際に削除する必要があります。iframestyle
編集: 別のドメインから来ているため、JS で iframe コンテンツにアクセスすることはできません
それがどのように機能するかです: この data-width="100%" を追加するだけです ここに例があります:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
これが私が最終的に得たものです：
(function() {
window.addEventListener('load', updateWidth);
window.addEventListener('resize', debounce(function () {
updateWidth();
if (window.FB && FB.XFBML && FB.XFBML.parse) {
FB.XFBML.parse();
}
}, 1000));
function updateWidth() {
$('.fb-like, .fb-comments').each(function () {
var el = $(this);
var width = el.parent().width();
el.attr('data-width', width);
})
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
})();
クラス「fb-container」を使用して、facebook のようなボックスを配置する (または他のソーシャル プラグインが普遍的に機能する) 場所に空の div を作成し、次の jQuery を追加します。
$(document).ready(function(){
$('.fb-container').replaceWith('<div class="fb-comments" data-href="https://WWW.YOURSITEHERE.COM/" data-width="' + $('PARENT DIV').width().toFixed(0) +'" data-numposts="5" data-colorscheme="light"></div>');
});
ps PARENT DIV を、コメント ボックスに一致させたい他の要素に置き換え、WWW.YOURSITEHERE.COM をサイトに置き換えることができます。
これは私のために働く
/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
display: inline !important;
}
.fb-comments.fb_iframe_widget span,
.fb_iframe_widget iframe {
width: 100% !important;
}