logo标签列表

Facebook点赞框小部件无法识别data-width属性？

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

请帮忙，它看起来真的很糟糕。 :-(

现在Facebook已经回滚了他们的更改。所以你可以像以前一样拥有你的代码。我的意思是你可以像以前一样回滚你的更改。干杯！ - Manish Shrivastava
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; }

我喜欢在我的选择器中尽可能地具体，但在进一步检查这个问题后，我发现在这里使用>选择器没有技术上的必要。

谢谢。第一次就完美地运行了。 - Jay Dave
12
5
哎呀，那个什么时候改变了？它已经连续几年以190像素的速度顺畅运行，从未出过问题。可恶的Facebook。 - tlhInganHom
6

我用一点 CSS 技巧修复了宽度，但这只是暂时的。我的技巧如下：

.fb-like-box iframe {
     width: your_width_in_px !important;
}
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>

谢谢！

2
使用iframe设置，在我的网站上使用iframe设置，使用宽度为236px的likebox，它会覆盖292px的宽度。 FB的无脑思维，每个网站都需要一个宽度为292px的侧边栏？？？？
1
我遇到了和你一样的问题。 我的解决方案是使用jQuery脚本在like box准备就绪时更改其宽度。
在头部部分。
<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>

干杯，这一定会帮助你。

0
在 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
这是我用来修复它的内容，虽然我没有展示人脸，但只需将其适应于你的代码即可，重要的部分是我添加的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（data-width不会被考虑在内）：

<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
根据Facebook官方点赞框页面，最小宽度为292px。
然而，在Github上有一个小项目可以使Facebook点赞框响应并适应您的网站布局。
将此应用与设置容器的宽度一起，以任何您喜欢的宽度强制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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接