Facebook like box 小部件无法识别数据宽度属性？答案

【问题标题】：Facebook like box widget not recognizing data-width attribute?Facebook like box 小部件无法识别数据宽度属性？
【发布时间】：2013-06-08 01:02:33
【问题描述】：

我今天刚刚注意到 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 进行任何更改。

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

【问题讨论】：

现在 FACEBOOK 已回滚他的更改。所以你可以像以前一样编码。我的意思是您可以像以前一样回滚您的更改。干杯！！！

标签： facebook wordpress facebook-likebox facebook-widgets

【解决方案1】：

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

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

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

【讨论】：

呃，什么时候改变的？多年来，它一直以 190 像素的速度巡航，没有出现任何问题。愚蠢的脸书。

【解决方案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>

干杯，这一定对你有帮助。

【讨论】：

谢谢！我试试看。

【解决方案3】：

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

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

【讨论】：

【解决方案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; }

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

【讨论】：

谢谢。一开始就完美运行。

【解决方案5】：

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

【讨论】：

【解决方案6】：

使用 iframe 设置，在我的网站中使用具有 236 像素宽度的类似框的 iframe 设置，它会覆盖 292 像素宽度。脑残想FB，每个网站都需要292px宽的侧边栏？？？？耶耶

【讨论】：

【解决方案7】：

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

不过，a little project on 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;
}

【讨论】：

【解决方案8】：

这是我用来修复它的，这不完全相同，因为我不显示面孔，而是将其调整为您的代码，重要的部分是我添加的 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>

【讨论】：

【解决方案9】：

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

谢谢！

【讨论】：