无法操纵Facebook Like Button的宽度

时间:2013-01-26 16:43:33

标签: css facebook facebook-like reflow

我有一个200px宽的侧边栏,我放在里面的Facebook Like按钮正在DIV的边界之外运行。是否有任何变通方法可以让Like框文本识别200px标记并在需要时重新转换为新行?

我正在使用此代码:http://jsfiddle.net/tKkpm/2/

<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&appId=437745402932329";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="http://www.facebook.com/google" data-send="false"
 width="200" data-show-faces="false"></div>

2 个答案:

答案 0 :(得分:2)

我会把我的评论作为答案......

Facebook Like Button documentation表示最小宽度必须为225像素。

它有时可能不到的原因是因为你可以使用 iframe 。 虽然没有完全支持较小的宽度,但它似乎确实有效!

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fgoogle&amp;send=false&amp;layout=standard&amp;width=200&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:35px;" allowTransparency="true"></iframe>

请注意,您必须在两个不同的位置设置宽度!

答案 1 :(得分:0)

类似的盒子宽度是个问题。我使用了溢出:隐藏在CSS中使其在http://www.mineoppskrifter.no的左侧边栏处工作。 这里的问题是图像被剪切,但至少宽度没问题。

#sidebar-left .fb-like-box  {
width: 187px !important;
overflow:hidden;
}

将#sidebar-left更改为div的名称。