15

我今天刚刚注意到 Facebook Like Box 小部件的 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 和 Internet Explorer 中进行。我最近没有更新 Wordpress 或对我的 css 进行任何更改。

帮助？像这样看起来真的很糟糕。:-(

4

9 回答 9

16

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

我喜欢在我的选择器中尽可能具体，但是在进一步检查了这个问题之后，我认为没有技术理由在>这里使用选择器。

于 2013-06-12T07:49:14.827 回答
12

我认为我们应该告诉 fb 修复他们的愚蠢脚本，现在 fb like box 的宽度必须至少为 292 px。

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

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

于 2013-06-12T04:08:19.423 回答
6

我用一点CSS技巧固定了宽度，但这只是暂时的。我的黑客是这样的：

.fb-like-box iframe {
     width: your_width_in_px !important;
}
于 2013-06-12T06:52:54.997 回答
2

使用 iframe 设置，在我的站点中使用具有 236px 宽度的likebox 的 iframe 设置，它会覆盖 292px 宽度。脑残想FB，每个网站都需要292px宽的侧边栏？？？？夜眼

于 2013-06-12T14:59:46.947 回答
2

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

谢谢！

于 2013-06-17T06:53:11.547 回答
1

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

干杯这必须帮助你。

于 2013-06-12T05:01:11.397 回答
0

After the fb:like-box add this script change the 244px to your width

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';
});
于 2013-06-12T10:14:09.743 回答
0

这是我用来修复它的，这不完全相同，因为我不显示面孔，而是将其调整为您的代码，重要的部分是我添加的 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>
于 2013-06-13T17:42:36.883 回答
0

根据Facebook 官方点赞框页面，最小宽度为292px。

尽管如此，在 github 上有一个小项目可以让 facebook like box 响应并适应您的网站布局。

将其与将容器的宽度设置为您喜欢的任何宽度一起应用，将强制 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;
}
于 2013-06-12T15:41:45.657 回答