如何使Facebook的按钮的宽度自动调整大小？ [英] 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 。这很好，我知道宽度可以通过< fb：like> width c>标记。但是，我的问题是，我真的不能指定一个固定的宽度。由于按钮的性质，宽度在所有状态下不是恒定的。例如，如果没有人喜欢该页面，则它显示成为您的第一个朋友喜欢这个;如果有人拥有，它会显示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 无效。这个问题进一步复杂的事实，这真的只是一个iframe是由FB SDK添加的花哨标记，因此我无法使用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）保持按钮区域的宽度动态（即，其根据内容而改变）;

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>

这样，注释和类似按钮iframes都是固定宽度。没有滑稽的效果。希望它有帮助。

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

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