右对齐 Facebook 喜欢按钮 iFrame 的内容？答案

【问题标题】：Right-align the contents of a Facebook like-button iFrame?右对齐 Facebook 喜欢按钮 iFrame 的内容？
【发布时间】：2012-09-28 19:53:23
【问题描述】：

我需要右对齐 Facebook Like 按钮的内容，以便它们始终靠在设置的“宽度”的骑行侧。我可以在 Firebug 中通过将表格设置为 float:right; 来做到这一点，但如果我在 CSS 中定义该值，它似乎不起作用。

这是解释我的问题的图片：

编辑：这是一个 JSFiddle：http://jsfiddle.net/h66z3/2/

【问题讨论】：

标签： css facebook facebook-like

【解决方案1】：

由于您使用的是 button_count 布局，我发现有一个小技巧似乎有效。基本上，您只需等待 iframe 插入，然后将其宽度设置为 0。然后它会自动将自身调整为适当的大小。我不能发誓这适用于所有情况和所有宽度，但请测试一下，看看它是否适合你。这是一个示例代码页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type='text/javascript'>
function loadcode(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);
}
function init()
{
loadcode(document, 'script', 'facebook-jssdk');
setTimeout(initx, 10);
}
function initx()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
if (likeframe) setTimeout(setwidth, 10);
else setTimeout(initx, 10);
}
function setwidth()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
likeframe.style.width='0';
}
</script>
</head>
<body onload='init()' style='margin:10px 50px'>
<div id="fb-root"></div>
<div style='text-align:right'>Here is some right-aligned text to compare to.</div>
<div id='d2' style='float:right'>
<div class="fb-like" href="http://www.google.com" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
</div>
</body>
</html>

很遗憾，这不适用于标准布局，不知道为什么会如此不同。

【讨论】：

成功了，谢谢你是个天才。我知道这是一种黑客行为，但作为一名设计师，我无法忍受其他任何事情。唯一不完美的是，如果它们与页面不同，它不会自动调整大小。
这不适用于其他一些语言。试试德语，你可能会看到它被裁剪了js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";

【解决方案2】：

按照 Derek 的建议，我改用 HTML5 版本来产生这个结果：http://jsfiddle.net/namuol/h66z3/6/

下面的源码是通过Facebook's Like Button generator生成的。

JS

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

HTML

<div id="fb-root"></div>
<div class="container">
    <h1>Page Title</h1>
    <ul class="share">
        <li>
            <div class="fb-like" data-href="www.teespring.com" data-send="false" data-layout="button_count" data-show-faces="false"></div>
        </li>
        <li>
            <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
        </li>
    </ul>
</div>

CSS 没有改变。

【讨论】：

用 Firebug 查看你的 jsfiddle 的源代码。它显示了生成 iFrame 的代码。
是的，我知道，但是当使用这种方法时，iframe 的大小是正确的。
虽然内容的末尾仍有一些空白。我敢肯定他宁愿没有。不幸的是，如果他想显示喜欢的数量，他将不得不处理它，因为会有额外的空间来解决它。
这肯定比以前的版本好...除了用静态值调整iframe 的大小，如果你使用这个特定的API，就没有办法解决这个问题。当有个位数时，浪费 3 个像素的空间值得吗？
这也会让我发疯。我认为 FB 决定将其内容保持在静态宽度，以防止人们的内容在数字变化时跳来跳去。这也会让我发疯。

【解决方案3】：

我相信你不会有任何运气使用 CSS（或其他任何东西）来影响 Facebook 的 iFrame 的内容。我认为您要做的最好的事情是更改 iFrame 元素本身的宽度，使其恰好适合您想要显示的 Facebook 内容的数量。然后右对齐整个 iFrame。

很确定不可能影响 iFrame 中的内容，因为它位于不同的域中。

如果您希望它与右侧完美对齐，并且没有您自己没有添加的任何额外空白，那么它就不会发生。 Facebook 将在其内容的末尾留出额外的空间，以说明 Like # 代码越来越大。

要完美对齐它（没有额外的空白），您只需要使用没有代码的like按钮。点赞按钮本身是唯一具有恒定宽度的元素。

【讨论】：

看起来这是我必须寻求的解决方案！不理想（我很想让它显示 [like]
@Walker：如果你不反对用完垂直空间，你可以改用box_count 布局。它具有固定宽度但可变高度：jsfiddle.net/namuol/h66z3/14

【解决方案4】：

我也尝试过这样做，但因为它是 iframe，所以您无法更改它。我的建议是使用类似平面的按钮（我相信您使用的类似按钮会在 169k 的右侧显示您喜欢它的信息）或更改您的设计，使其成为电子邮件 |推特 |脸书。

我知道这很糟糕，但因为它是 iframe，所以 iframe 中的所有内容都交给你了。

【讨论】：

【解决方案5】：

查看此示例 http://jsfiddle.net/sandeep/h66z3/3/ 可能就是您想要的

.container {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
h1 {
    display: inline-block;   
}
ul li{float:right}
ul{overflow:hidden}

【讨论】：

您的 jsfiddle 示例只是更改了 iframe 的 width css-property。他需要根据内容动态改变宽度。

【解决方案6】：

正如其他人指出的那样，没有简单的方法可以做到这一点，因为内容被锁定在 iframe 中。但是，如果您喜欢挑战，您可能想查看 How can I make the Facebook Like button's width automatically resize? 以了解我一直在修改的想法。

【讨论】：

【解决方案7】：

button_count 布局非常简单。只需在 iframe 周围放置一个 div 并将 div 设置为绝对定位和右侧。例如，

<div style="position:absolute;right:0;">
<iframe>...</iframe>
</div>

【讨论】：