8

このコードを使用して、Facebookのコメントボックスを自分のページに配置しています。

<script type="text/javascript">
 (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/all.js#xfbml=1&appId=397337283630353";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script>


<div class="fb-comments" data-href="https://apps.facebook.com/driftee/" data-num-posts="5" data-width="470" data-colorscheme="dark" style="width: 100% !important;"></div>

しかし、コメントボックスをページの100％に表示させることはできません。

4

9 に答える 9

21

これを行うには、HTML ページのスタイル シートに次のように CSS クラスを追加します。

.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }
于 2012-06-02T14:13:22.180 に答える
3

どうにか解決できたと思います。コメント ボックスを分析したところ、fb-comments div にデフォルトで幅 470px のスパンが含まれていることがわかりました。このスパン内に、同じ幅の iframe が見つかりました。次のようにjqueryを使用して、ウィンドウのサイズ変更時にスパンとiframeの幅を変更することです：

$(window).resize(function(){$('.fb-comments iframe,.fb-comments span:first-child').css({'width':$('#commentboxcontainer').width()});});

そのため、ウィンドウのサイズを変更すると、コメント ボックス全体がコンテナーの幅になります (つまり、幅が 100% になります)。

于 2012-06-03T05:38:03.447 に答える
2

他の解決策を試してみましたが、うまくいきません。

fb のドキュメントを読むと、属性 data-width="100%" をタグに追加して、幅 100% が既にサポートされていることがわかりました。

<div class="fb-comments" data-width="100%" data-href="http://www.mintybolivia.com/" data-numposts="10" data-colorscheme="light"></div>

現在動作しており、モバイル デバイスのドキュメントによると、この設定は自動的に設定されます。

于 2015-04-04T18:05:55.540 に答える
1

このページhttps://developers.facebook.com/docs/reference/plugins/comments/data-width="{pixels}"で作成されたコードを取得したときに取得するように、パラメーターを追加してみてください。つまり、ページの幅がわかっている場合です。ピクセル単位。それがパーセンテージでも機能するかどうかはわかりませんが、どういうわけかそれを疑っています。

次に、最後のオプションは、それぞれを追加することかもしれません。ページが読み込まれ、実際の幅をピクセル単位で読み取ることができたら、そのパラメーターを動的に変更し、XFBMLを後で解析するだけにします（スクリプトの読み込み中にxfbml paramをfalseに設定し、データ幅を設定した後にFB.XFBML.parseを呼び出しますパラメータ）。もちろん、ユーザーがブラウザウィンドウのサイズを変更したり、その他の方法で幅を変更したりした場合でも、それでも役に立ちません…</ p>

于 2012-06-02T15:26:29.093 に答える