堆栈内存溢出
  繁体   English   中英

如何让Facebook Like按钮的宽度自动调整大小？

[英]How can I make the Facebook Like button's width automatically resize?

 原文  2010-12-03 17:36:40  7   8    javascript/ css/ facebook/ facebook-like/ facebook-javascript-sdk

问题描述

我正在实现Facebook Like Button ，但我遇到了宽度问题。 我正在使用JavaScript SDK实现，而不是直接iframe。

根据文档，默认宽度为450 。 那没关系，我明白宽度可以通过<fb:like>标签上的width属性来改变。 但是，我的问题是我真的无法指定固定宽度。 由于按钮的性质，宽度在所有状态下都不是恒定的。 例如，如果没有人喜欢该页面，它会显示“成为您喜欢的第一个朋友”; 如果有人，它显示“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>

这工作正常，但问题是iframe现在具有450像素的恒定宽度 。 由于iframe是左对齐的，因此当文本较短时，右侧会有额外的空间。 我尝试过text-align: right各种应用程序text-align: right没有用。 而这个问题更加复杂的是，这实际上只是FB SDK添加的iframe的花哨标记，所以我无力用CSS或JavaScript更改其任何内容。

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

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

8 个解决方案

解决方案1
 12  2011-01-28 10:59:16

#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都是固定宽度。 没有搞笑的效果。 希望能帮助到你。

解决方案2
 5  2012-04-08 13:53:56

如果您使用Like按钮的XFBML版本以及Facebook Javascript SDK，您可以订阅'xfbml.render'事件，并且一旦该事件触发，您可以将like按钮iframe的宽度设置为某个小值。 （我使用50px。）iframe将根据需要自动调整其宽度，以便根据您的配置显示按钮和类似计数以及其他任何元素。

https://developers.facebook.com/docs/reference/javascript/

此解决方案的最大障碍是您需要Facebook App ID。 您可以在此处创建应用程序来获取应用程序ID： https ： //developers.facebook.com/apps/

解决方案3
 5  2011-10-12 18:35:09

正如大家现在所知道的那样，没有简单的方法可以做到这一点。 不过，我确实想出了各种各样的程序设计。 当我说kludge时，我真的是这个意思！ 我不认为这是准备黄金时间，但有人可能喜欢修补这个概念，并尝试找到可行的东西。

我们的想法是，虽然您无法读取iframe的内容宽度，但您可以遍历iframe本身的一系列宽度，直到找到一个几乎不会阻止文本内部包装的宽度。 此时，文本必须触及iframe的右侧。 换句话说，我们希望将iframe的宽度设置为比导致文本换行的宽度宽1px。

原则上检测文本是否包装很容易 - 设置iframe宽度，等待FB代码调整内容，然后读取高度。 如果一切都适合一条线，高度应约为25px。 更重要的是文本已经包装。

困难在于“等待FB代码调整内容”部分。 我觉得必须有一些强制“重绘”iframe，但到目前为止我还没有找到它。 调用FB.XFBML.parse（）是显而易见的，但它似乎不起作用。 这是我卡住的部分。 我通过设置src属性来强制iframe重新加载，这样可以完成工作但速度非常可怕。 在这一点上，它只是作为“概念证明”。 几乎同样好的方法是知道什么时候重绘完成; 我觉得这也应该是可能的，但在我发现任何简单的事情之前，我的大脑陷入困境。

无论如何，这里有一些测试代码，如果你想尝试一下。 按钮处于适当位置需要永远，但它至少可以工作。 我在加载过程中保留了所有可见内容，因此您可以看到它正在做什么，在真实页面上最好保持隐藏状态直到一切准备就绪。 另请注意，对齐可能稍微偏离，因为我一次调整宽度为5px。 如果事情可以更快地完成，那么使用1px会很容易。 更好的可能是近距离的粗略调整，然后进行微调以使其完美。 对于那些想要接受它的人来说，显然有很多尝试要做。 

<!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'>
var likediv, likeframe;
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');
likediv=document.getElementById('d2');
setTimeout(initx, 10);
}
function initx()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
if (!likeframe) { setTimeout(initx, 10); return; }
likeframe.style.width='225px';
setTimeout(shrink, 10);
}
function shrink()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
var currwidth=parseInt(likeframe.style.width);
if (currwidth>=500) return;
newwidth=currwidth+5;
likeframe.style.width=newwidth+'px';
likeframe.style.height='0';
likeframe.src=likeframe.src;
setTimeout(checkframe, 10);
}
function checkframe()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) setTimeout(checkframe, 10);
else if (h>25) shrink();
//else we are done; make the frame visible if we hid it earlier
}
</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;height:25px;overflow:hidden;border:1px dotted red'>
<div class="fb-like" data-send="false" data-width="225" data-show-faces="false" data-action="recommend"></div>
</div>
</body>
</html>

编辑：做了一些实验，仍然是一个尴尬的解决方法，但比以前更快： 

<!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'>
var likediv, likeframe, targwidth;
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');
likediv=document.getElementById('d2');
setTimeout(initx, 10);
}
function initx()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
if (!likeframe) { setTimeout(initx, 10); return; }
likeframe.style.width='225px';
setTimeout(shrink, 10);
}
function shrink()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
var currwidth=parseInt(likeframe.style.width);
if (currwidth>=500) return;
targwidth=currwidth+5;
likeframe.style.width='10px';
likeframe.style.height='0';
setTimeout(checkframe, 10);
}
function checkframe()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) { setTimeout(checkframe, 10); return; }
likeframe.style.width=targwidth+'px';
likeframe.style.height='0';
setTimeout(checkframe2, 10);
}
function checkframe2()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) setTimeout(checkframe2, 10);
else if (h>25) shrink();
//else we are done; make the frame visible if we hid it earlier
}
</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;height:25px;overflow:hidden;border:1px dotted red'>
<div class="fb-like" data-send="false" data-width="225" data-show-faces="false" data-action="recommend"></div>
</div>
</body>
</html>

最终编辑：这是我认为这种方法最好的方法; 代码肯定可以调整，但是总是需要几秒钟才能通过试验宽度来找到有效的方法。 但它现在足够快（大约5秒），它实际上可以使用。 顺便说一句，我正在添加每个新的代码版本，而不是替换旧版本，因为我没有对此代码进行过多次跨浏览器测试，并且高速版本可能无法为某些人工作。 由于它是所有实验代码，我认为最好让不同的版本可用于后备。 

<!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'>
var minwidth=225, maxwidth=500, finished=false, last_was_good=null;
var likediv, likeframe, targwidth, boundlow, boundhigh;
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');
likediv=document.getElementById('d2');
setTimeout(initx, 10);
}
function initx()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
if (!likeframe) { setTimeout(initx, 10); return; }
likeframe.style.width=minwidth+'px';
setTimeout(trynewwidth, 1);
}
function trynewwidth()
{
if (last_was_good==null) { boundlow=minwidth; boundhigh=maxwidth; }
else if (last_was_good) boundhigh=targwidth;
else boundlow=targwidth;
finished=((boundhigh-boundlow)<2);
if (finished && last_was_good) { done(); return; }
if (finished && !last_was_good) targwidth=boundhigh;
else targwidth=parseInt((boundlow+boundhigh)/2);
setTimeout(setwidth, 1);
}
function done()
{
//All finished, if we were hiding the div make it visible now
}
function setwidth()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
likeframe.style.width='10px';
likeframe.style.height='0';
setTimeout(checkframe, 10);
}
function checkframe()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) { setTimeout(checkframe, 10); return; }
likeframe.style.width=targwidth+'px';
likeframe.style.height='0';
setTimeout(checkframe2, 10);
}
function checkframe2()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) { setTimeout(checkframe2, 10); return; }
if (finished) { done(); return; }
last_was_good=(h<26);
setTimeout(trynewwidth, 1);
}
</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;height:25px;overflow:hidden;border:1px dotted red'>
<div class="fb-like" data-send="false" data-width="225" data-show-faces="false" data-action="recommend"></div>
</div>
</body>
</html>

解决方案4
 2  2012-08-25 09:23:04

CSS修复 

.fb-like, 
.fb-like > span,
.fb-like > span iframe {
    max-width:273px;
}

解决方案5
 2  2012-09-08 22:22:30

我个人使用以下内容...... 

#fbook-like {
    width: 50px !important; /*width of just the button*/
    overflow: visible; /*so there is no cut off*/
    vertical-align: top; /*bc all other like buttons align top*/
}

我在这里做的是将fb按钮放在最右边，这样它与我的边缘对齐，只是添加的注释（动态宽度）将显示超过边缘。 无论长度如何，我都可以在收到评论的同时保持良好的设计。

解决方案6
 2  2014-05-20 07:57:03

在选择尺寸时，有一些值得阅读的FAQ答案。

https://developers.facebook.com/docs/plugins/like-button

虽然说它仍然很神秘：

“插件的宽度。您选择的布局会影响您可以使用的最小和默认宽度，请参阅下面的常见问题解答以获取更多详细信息。”

标准

最小宽度：225像素。

如果“推荐”操作，则最小增加40px，如果发送为“true”，则增加60px。

默认宽度：450像素。 高度：35像素（无照片）或80像素（带照片）。

box_count

最小宽度：55像素。 默认宽度：55像素。 高度：65像素。

button_count

最小宽度：90像素。 默认宽度：90像素。 高度：20像素。

按键

最小宽度：47像素。 默认宽度：47像素。 高度：20像素。

解决方案7
 0  2014-04-02 14:29:43

我不得不面对add-this插件的同样问题，并以类似的方式解决： 

.addthis_button_facebook_like,
.addthis_button_facebook_like span,
.addthis_button_facebook_like span iframe {
    max-width: 450px !important;
}

解决方案8
 0  2016-05-11 12:21:43

我把它添加到我的CSS中： 

div.fb-like.fb_iframe_widget > span {
 width: 100% !important;
}

div.fb-like.fb_iframe_widget{
 width: 100%;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我可以更改Facebook“赞”按钮的评论框的宽度吗？ 如何制作分享按钮，例如Facebook或Twitter 如何让我的对象在我的导航栏中自动调整大小？ 如何使Facebook像按钮的弹出框显示在左侧 如何调试丢失的Facebook Like Button？ 如何检查是否点击了facebook按钮？ 如何将Facebook与自己的“赞”按钮集成 如何使用JavaScript将描述添加到Facebook之类的按钮？ 如何使此代码适用于自定义“ Facebook Like Box” 如何让浏览器像 Facebook 一样记录点击？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM