无法操纵 Facebook Like 按钮的宽度答案

【问题标题】：Can't manipulate width of Facebook Like Button无法操纵 Facebook Like 按钮的宽度
【发布时间】：2013-01-10 10:29:37
【问题描述】：

我有一个 200 像素宽的侧边栏，我放置在其中的 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>

【问题讨论】：

"最小宽度：225 像素。" Facebook Like Button documentation
公平点 - 我已经看到它比 225px 窄，例如在右侧 rowlands.co.uk
他们使用 iframe。虽然不完全支持较小的宽度，但它似乎确实有效！
有趣——这似乎解决了问题！谢谢！

标签： css facebook facebook-like reflow

【解决方案1】：

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

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>

请注意，您必须在两个不同的地方设置宽度！

【讨论】：

【解决方案2】：

like box 的宽度是个问题。我在 CSS 中使用了 overflow:hidden 来使其在左侧边栏http://www.mineoppskrifter.no 上工作。这里的问题是图片被剪切了，但至少宽度还可以。

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

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

【讨论】：