我正在实现Facebook Like Button,但我遇到了宽度问题.我正在使用JavaScript SDK实现,而不是直接iframe.
根据文档,默认宽度是450.那没关系,我明白宽度可以通过标签width上的属性来改变<fb:like>.但是,我的问题是我真的无法指定固定宽度.由于按钮的性质,宽度在所有状态下都不是恒定的.例如,如果没有人喜欢该页面,它会显示"成为您喜欢的第一个朋友"; 如果有人,则会显示"XXX这样的人.成为你的第一个朋友"; 如果你喜欢它,它会显示"你喜欢这个" 或 "你和XXX这样的人".换句话说,按钮有许多状态,其中没有一个共享恒定的宽度.
如果不是因为我想显示浮动在右侧的按钮,这不会是一个大问题<div>.为了更清楚,这就是我正在做的事情:
<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>
Run Code Online (Sandbox Code Playgroud)
这工作正常,但问题是iframe现在具有450像素的恒定宽度.由于iframe是左对齐的,因此当文本较短时,右侧会有额外的空间.我尝试了各种各样的应用text-align: right无济于事.而这个问题更加复杂的是,这实际上只是FB SDK添加的iframe的花哨标记,所以我无力用CSS或JavaScript更改其任何内容.
我需要一个解决方案,它将(a)保持按钮区域的宽度动态(即,它根据内容而改变); 或(b)右键对齐按钮区域中的所有内容.
感谢任何人都可以给我的帮助!
javascript css facebook facebook-like facebook-javascript-sdk
是否有(简单)方式来自定义通过fbml实现的facebook按钮的外观?
我很确定我在某个地方看到了这个,但我不记得在哪里,我无法找到任何关于此的文档.