如何使Facebook Like按钮的宽度自动调整大小？ [英] How can I make the Facebook Like button's width automatically resize?

问题描述

我正在执行 Facebook Like按钮，但我正在运行变宽了一些麻烦。我正在使用JavaScript SDK实现，而不是直接的iframe。

I'm implementing the Facebook Like Button, but I'm running into some trouble with the width. I'm using the JavaScript SDK implementation, not the direct iframe.

根据文档，默认宽度为 450 。没关系，我知道宽度可以通过 width 属性在< fb：like> 标签。但是，我的问题是我无法指定固定的宽度。由于按钮的性质，所有状态下的宽度不是恒定的。例如，如果没有人喜欢的页面，它显示成为你的第一个喜欢这样的朋友;如果有人，它会显示XXX人喜欢这个，成为你的第一个朋友;而如果你喜欢它，那么它会显示你喜欢这样或你和XXX这样的人。换句话说，按钮的状态很多，其中没有一个共享一个宽度。

According to the documentation, the default width is 450. That's fine, and I understand that the width can be changed by way of the width attribute on the <fb:like> tag. However, my problem is that I really cannot specify a fixed width. Due to the nature of the button, the width is not constant in all states. For example, if no one has liked the page yet it displays "Be the first of your friends to like this"; if someone has, it displays "XXX people like this. Be the first of your friends"; and still if you have liked it, it displays "You like this" or "You and XXX people like this." In other words, there are many states of the button, none of which share a constant width.

这不是一个问题，如果不是事实上，我想显示按钮浮动在< div> 的右侧。要更清楚，这就是我在做的：

This wouldn't be much of a problem if it weren't for the fact that I want to display the button floated on the right-hand side of a <div>. To be clearer, this is what I'm doing:

<div id="wrapper">
    <span class="fb-like"><fb:like show_faces="false" width="450" font="lucida grande""></fb:like></span>
    ...
</div>
<style type="text/css">
.fblike {
    display: inline-block;
    padding: 0.5em;
    position: absolute;
    right: 0;
    top: 0;
}
#wrapper {
    position: relative;
}
</style>

，但是问题是iframe现在具有450像素的常量宽度，因为iframe是左对齐的，当文本较短时，右侧有多余的空间， text-align：right 的应用程序无效，而且这个问题进一步加剧了这一点，这实际上只是FB框架添加的iframe的花哨标记，所以我无法用CSS或JavaScript来改变其内容。

This works fine, but the problem is that the iframe now has a constant width of 450 pixels. Since the iframe is left-aligned, when the text is shorter there is extra space to the right. I've tried various applications of text-align: right to no avail. And the problem is further compounded by the fact that this is really just fancy markup for an iframe that is added by the FB SDK, so I'm powerless to change any of its contents with CSS or JavaScript.

我需要一个解决方案，（a）保持按钮区域的宽度动态（即，它根据内容而改变）;或者（b）右键对齐按钮区域中的所有内容。

I need a solution that will either (a) keep the width of the button area dynamic (i.e., it changes according to the content); or (b) right-align everything in the button area.

感谢任何人可以给我的帮助。

Thanks for any help anyone can give me!

推荐答案

#fblike iframe {
    width: 95px !important;
}

#fblike .fb_edge_comment_widget iframe {
    width: 330px !important;
}

和

<div id="fblike"><fb:like show-faces="false" layout="button_count"></fb:like></div>

这样一来，注释和按钮iframe都是固定的宽度。没有滑稽的效果。希望有帮助。

This way both comment and like button iframes are fixed width. No funny effects. Hope it helps.

这篇关于如何使Facebook Like按钮的宽度自动调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！