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进行任何更改。

帮助？它看起来真的很糟糕。： - （

Answer 1

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

我希望在我的选择器中尽可能具体，但在更详细地检查此问题之后，我认为没有技术理由在此处使用>选择器。

Answer 2

我认为我们应该告诉fb修复他们的愚蠢脚本，现在fb就像盒子一样，宽度必须至少为292像素。

他们在https://developers.facebook.com/docs/reference/plugins/like-box/

上清楚说明

支持的最低插件宽度为292像素。

Answer 3

我用一点CSS黑客修复了宽度，但这只是暂时的。我的黑客是这样的：

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

Answer 4

只需使用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>

谢谢！

Answer 5

我遇到了同样的问题。我的解决方案是使用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 6

在我的网站中使用iframe设置，使用iframe设置，其宽度为236px，它会覆盖292px的宽度。无脑思考FB，每个站点需要一个292px宽的侧边栏????耶耶

Answer 7

在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';
});

Answer 8

根据Facebook official like box page，最小宽度 292px 。

尽管如此，还是a little project on github可以让Facebook像响应框一样响应并适应您的网站布局。

将设置容器的宽度应用到您喜欢的任何宽度将强制facebook like框填充该容器并适应其宽度，不多也不少：

/* 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 9

这是我以前用来解决的问题，这不完全相同，因为我没有显示面孔，只是让它适应你的代码，重要的部分是我添加的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>

Facebook喜欢盒子小部件无法识别数据宽度属性？

9 个答案: