如何在动态创建的 iframe 中对齐 Facebook Like Button？答案

【问题标题】：How to align Facebook Like Button in dynamically-created iframe?如何在动态创建的 iframe 中对齐 Facebook Like Button？
【发布时间】：2012-03-02 07:03:25
【问题描述】：

我知道有很多关于“对齐 Facebook 按钮”的问题，但他们似乎都在谈论直接在标记中使用 iframes 的人。我正在使用 HTML5 Facebook 按钮代码，然后动态加载 iframe。

看看JSFiddle

如您所见，共有三个社交按钮。 Twitter 和 Google+1 iframe 似乎会自动调整其大小以匹配其内容。 Facebook iframe 没有。它似乎是一个固定宽度的 iframe，内容较窄。

有没有一种简单的方法可以使这个 iframe 本身大小合适？

我可能会在页面加载后使用 jQuery 来操纵 iframe 的大小，但我想避免这种情况。如果 iframe 从一开始就加载正确的大小，那就太好了。

我还希望避免在我的代码中直接使用 iframe，因为我稍后会在页面中动态加载 Facebook 脚本，这就是动态注入 iframe 的原因。

【问题讨论】：

JSFiddle 的链接似乎是 404。
实际上，我在 JSFiddle 上遇到了很多奇怪的行为，包括一些表明它们已停止维护的消息。我把它归结为死掉的服务器。

标签： css facebook html facebook-like

【解决方案1】：

我不知道让它自动适应，但你可以覆盖宽度。

.social{
    margin:20px 0;
    overflow: hidden;
    padding-left: 20px;

}

.social > div {
    float: left;
    height: 70px;
    margin-right: 0px;
    border: 1px solid red;
}
.facebook{
    width:45px;
}

【讨论】：

使用 CSS 覆盖 Facebook 社交插件的样式违反了他们的平台政策。
当这个 Like 数量增长到一个占用更多空间的大数字时，如果您为其设置静态宽度，它将在 iframe 中被推出视图。
"box_count - 显示按钮上方的总点赞数。最小宽度：55 像素。默认宽度：55 像素。高度：65 像素。"来自developers.facebook.com/docs/reference/plugins/like 的规范看起来如果你无法调整 div 宽度，你会被它困住吗？

【解决方案2】：

我对 Facebook Like Button 限制的唯一解决方案是将 Like 按钮放在 Google+ 按钮之后。这样，Facebook div 的宽度最终是什么并不重要。它将与其他按钮等距。

http://jsfiddle.net/FLuKW/10/

【讨论】：