Facebookのようなボックスウィジェットはデータ幅属性を認識しませんか？

Question

Facebook Like Boxウィジェットのデータ幅属性が機能していないようになったことに気がつきました。デフォルトの幅に戻っているようです。私が話していることの例は、http://blog.christopherjonesart.comに見ることができます。ここで

私は（それはかなり標準です）を使用しているコードです：

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

<div class="fb-like-box" data-href="http://www.facebook.com/christopherjonescomicart" data-width="190" height="395" data-show-faces="true" data-border-color="black" data-stream="false" data-header="true"></div> 

私はいくつかのウェブサイト上でこの問題が発生しています。 Chrome、Firefox、Safari、Internet Explorerでこれを実行しています。私は最近Wordpressを更新していないか、私のCSSに変更を加えました。

ヘルプ？これは本当にこれのように見えます。 :-(私たちは今、彼らのダムスクリプトを修正幅は少なくとも292ピクセルでなければなりませんボックスのようなFBにFBを伝えるべきだと思い

Answer 1

。

彼らはhttps://developers.facebook.com/docs/reference/plugins/like-box/

最小サポートプラグインに明確に述べます幅は292個のピクセルです。

Answer 2

私はあなたに同じ問題に直面しています。 私の解決策のようなボックスレディ時間でのようなボックスの幅を変更するために使用しjqueryのスクリプトです。

ヘッド部で

<script type="text/javascript"> 
function JS_wait(){ 
      // wait until like box script load 
    if($("iframe[title='fb:like_box Facebook Social Plugin']").length == 0 && $("div[class='fb-like-box fb_iframe_widget'] span").length == 0){ 

     window.setTimeout(JS_wait, 100); 
    }else{ 
        // wait 5 seconds to like box rendered. 
     window.setTimeout(JS_ready, 5000); 
    } 
} 

function JS_ready() { 

    // resize facebook like box to 200 px 
    //alert("JS_ready"); 
    $("iframe[title='fb:like_box Facebook Social Plugin']").css('width','200px'); 
    $("iframe[title='fb:like_box Facebook Social Plugin']").attr('width','200'); 
    $("div[class='fb-like-box fb_iframe_widget'] span").css('width','200px'); 
}; 
</script> 

と文書で

<script type="text/javascript"> 
$(document).ready(function() { 
     JS_wait(); 
    }); 
</script> 

乾杯を追加し、これはあなたを助けなければならない準備。

Answer 3

ちょっとCSSハックで幅を固定しましたが、それは一時的なものです。私のハックはこれです：

.fb-like-box iframe { 
    width: your_width_in_px !important; 
} 

Answer 4

がuser2477225の答えを拡張し、それはあなたが（ページのどこかに、相対または絶対）を設定したカスタムポジショニングに問題がある可能性がありますので、私がやったことだった。

.fb_iframe_widget>span { width: 240px !important; } 
.fb-like-box iframe { width: 240px !important; } 

これまでのところ動作しているようです。

編集：IE 8（下）の場合は、代わりにこれを使用してください：

.fb_iframe_widget span { width: 240px !important; } 
.fb-like-box iframe { width: 240px !important; } 

を、私は私のセレクタにできるだけ具体的に好きですが、もう少しこの問題をチェックした後、私は見ますここで>セレクタを使用する技術的理由はありません。 FB後

Answer 5

：likebox は、このスクリプトを追加236px幅のlikeboxでiframeの設定を使用して、私のサイトで、iframeの設定を使用し、それが却下244px

あなた幅に

FB.Event.subscribe('xfbml.render', function(response) { 

var el = document.querySelector(".fb_iframe_widget span"); 
el.style.width='244px'; 
el = document.querySelector(".fb_iframe_widget iframe"); 
el.style.width='244px'; 
}); 

Answer 6

を変更 292ピクセル幅 ブレーンレスFBを考えると、すべてのサイトに292px幅のサイドバーが必要ですか？yeye

Answer 7

によると、最小幅は292pxです。

それでも、箱応答のようにFacebookを利用して作成し、あなたのウェブサイトのレイアウトに適応するa little project on githubがあります。

/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */ 
#fb-root { 
    display: none; 
} 

/* To fill the container and nothing else */ 
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { 
    width: 100% !important; 
} 

Answer 8

を：あなたが好む任意の幅にコンテナの幅を設定するとともに、このは劣らず、何より、そのコンテナを記入し、その幅に適応するための箱のようにFacebookを利用して強制的に適用しない

ここで私は、私は顔を示しているが、ちょうどあなたのコードにそれを適応していないので、これはまったく同じではない、それを修正するために使用するもので、重要な部分は、それが私をすることができます、私は追加のdiv＃fbの様容器であり、必要なコードを変更するには、CSSセレクタを使用します。

CSS：

<script> 
#fb-like-container div.fb-like-box>span, 
#fb-like-container div.fb-like-box>span>iframe{ 
    width: 173px!important; 
} 
</script> 

HTML（データ幅が考慮されません）：

<div id="fb-like-container"> 
    <div class="fb-like-box" 
    data-href="http://www.facebook.com/christopherjonescomicart" 
    data-width="273" 
    data-height="71" 
    data-show-faces="false" 
    data-stream="true" 
    data-header="false"> 
    </div> 
</div> 

Answer 9

だけで必要なものは何でもiFrameの代わりに、fbmlと変化幅を使用します。以下

i.e.:(width:194px）

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%sitename.com&amp;width=194px&amp;height=290px&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true&amp;appId=1234567890" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:194px; height:290px;" allowTransparency="true"></iframe> 

ありがとう！