CSSまたはJSを使用したFBコメントのパーセンテージ％幅の設定：動作しません。

Question

Facebookコードのパーセンテージ（80％）で幅を設定しようとしています。 まずはCSSを使ってみましたが、何も変わっていません。それはいつもデフォルトのFacebookの幅（約500ピクセル）です。

<div id="fb-root" style="width: 80%"></div> 
<script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script> 
<fb:comments href="http://stackoverflow.com" num_posts="5" width="auto"></fb:comments> 

JavaScriptを使用して、ユーザーがブラウザのウィンドウのサイズを変更すると、その幅を変更することにしました。したがって、幅の画面が1000ピクセルの場合、1000ピクセルにする必要があります。しかし、ブラウザのウィンドウのサイズを756pxに変更すると、fb：commentsのwidth = "..."にJavascriptを使って756pxに変更する必要があります。エラーはFirebug（Firefox 8）からです：box [0]は未定義です - > var boxwidth = box [0] .getAttribute（ "width"）;.

<script type="text/javascript"> 
    var box = document.getElementsByTagName("fb:comments"); 
    var boxwidth = box[0].getAttribute("width"); 

    alert("start..."); 
    alert("width of element 'box': "+boxwidth); 
    alert("...end"); 

    /*resolution = screen.width; 
    alert("Screen width: "+resolution);*/ 
</script> 

fb：commentsの幅を動的に設定する方法はありますか？前もって感謝します。 お会いしましょう、Davide。

PS。私の英語のミスのため申し訳ありませんが私はので、いくつかをした場合、....

Answer 1

FB ：コメントCSSの属性は明らかにno longer supportedです！

fb：commentsの幅は、常にピクセル単位である必要があります。私はあなたが探しているものは本当に確かではありませんが、あなたがあなたのところに来るのを助けるかもしれないことを願っています。あなたのhtmlで

、DIVを作成します。あなたのスクリプトタグの間

<div id="fbcomment"> 
</div> 

を、jqueryのコードのこの部分を使用し、80％のオフを計算する要素と体セレクタを交換してください。ここで

$(document).ready(function(){ 

    width_percent = $('body').width() * 0.8; 
    fbxml = '<fb:comments href="http://stackoverflow.com" num_posts="5" width="' + width_percent + 'px"></fb:comments>'; 

    $('#fbcomment').append(fbxml); 
}); 

は実施例である：http://jsfiddle.net/CZpx2/3

それは厄介な回避策だと、それはそれの制限がありますが、それは、いくつかの状況では、トリックを行います。それがあなたのためになることを願っています！

Answer 2

CSSで あなたは重要な追加してみることができます！

fb:comments { 
    width:80% !important; 
} 

とjQueryを使っての：

jQuery(document).ready(function() { 
    $('fb:comments').css('width', '100%'); 
}) 

Answer 3

これはどのように（あなたは、最新のFacebookのコメントコードを使用している場合）：、私はこの質問にはuはちょうどでdata-width属性を追加することができ、今、古いFBのコメントプラグインを求めてきた

.fb-comments iframe, .fb-comments, .fb-comments span { width:100% !important; } 

Answer 4

簡単だと思います値は100%で、親の幅になります。Facebookの

ステップ2によって生成appIDがによってfb docs

<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.8appId=**YOUR_APP_ID**"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

Remplace YOUR_APP_IDにdiscribedとしてbodyタグJS置くコードの後

ステップ1

ブロックタグ内おそらくdivタグはそれに幅を与え、そしてその中に置く：

<div class="fb-comments" data-href="YOUR_URL" data-numposts="10" data-width="100%"></div> 

はあなたのウェブサイトのページのURLでYOUR_URLを交換して、あなたはまた、ポスト上映の数を変更することがあります。