web-dev-qa-db-ja.com

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

今日、Facebook LikeBoxウィジェットのdata-width属性が機能していないように見えることに気づきました。デフォルトの幅に戻っているようです。私が話していることの例は 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、InternetExplorerでそれを行っています。最近Wordpressを更新したり、CSSに変更を加えたりしていません。

助けて？このように本当に不器用に見えます。 :-(

facebookwordpressfacebook-likeboxfacebook-widgets
14
tlhInganHom

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; }

セレクターをできるだけ具体的にしたいのですが、この問題をもう少し確認したところ、ここで>セレクターを使用する技術的な理由はわかりません。

16
Ynhockey

ダムスクリプトを修正するようにfbに指示する必要があると思います。今度は、fbのようなボックスの幅は少なくとも292ピクセルでなければなりません。

彼らは明確に述べています https://developers.facebook.com/docs/reference/plugins/like-box/

サポートされているプラ​​グインの最小幅は292ピクセルです。

12
nam vo

少しCSSハックして幅を修正しましたが、これは一時的なものです。私のハックはこれです：

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

iFrameの代わりにfbmlを使用し、幅を必要なものに変更するだけです。

つまり:(下の幅：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>

ありがとう！

2
Manish Shrivastava

私はあなたに同じ問題に直面しています。私の解決策は、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>

乾杯これはあなたを助ける必要があります。

1
Piti

私のサイトでは、幅236pxのlikeboxを持つiframe設定を使用して、iframe設定を使用すると、幅292pxが無効になります。 FBの頭の悪い考えでは、すべてのサイトに292px幅のサイドバーが必要ですか????イエイエ

1
Ronald de Block

Fb：like-boxの後にこのスクリプトを追加して、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';
});
0
mourmouris

Facebookの公式のようなボックスページ によると、最小幅は292pxです。

それでも、 githubの小さなプロジェクト Facebookのようなボックスを応答性の高いものにし、Webサイトのレイアウトに適応させることができます。

これを適用すると、コンテナの幅を任意の幅に設定すると、Facebookのようなボックスがそのコンテナを埋めてその幅に適応します。より多く、より少なくない：

/* 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;
}
0
Ramy Nasr

これは私がそれを修正するために使用したものです、これは私が顔を表示しないので完全に同じではありませんが、それをあなたのコードに適応させるだけです、重要な部分は私が追加したdiv＃fb-like-containerです、それは私にさせます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>
0
Yann