如何更改 Twitter 关注按钮的宽度？答案

【问题标题】：How to change Twitter follow button width?如何更改 Twitter 关注按钮的宽度？
【发布时间】：2013-01-29 14:30:34
【问题描述】：

我知道这在其他线程中已被问到，但这些答案不适合我的情况。如果您从此处嵌入 twitter 关注按钮：

https://twitter.com/about/resources/buttons

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

JS 用 iframe 替换链接：

<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.1360366574.html#_=1360791644346&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.foo.com%2Fsearch%2Fcats&amp;size=m&amp;text=Search%20Results%20for%20%22cats%22%20on%20Foo&amp;url=http%3A%2F%2Fwww.foo.com%2Fsearch%2Fcats" class="twitter-share-button twitter-count-horizontal" style="width: 109px; height: 20px;" title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>

如您所见，宽度设置为内联样式。我知道我可以用类似的东西来覆盖它：

.twitter-share-button { width: 80px !important; }

例如，但我不想这样做，因为如果共享计数在特定内容页面上增加到非常大的数字会怎样。然后共享计数将被最小宽度所掩盖。

有没有办法告诉 twitter 根据内部的共享计数来调整返回 iframe 的大小，使其不大于所需的最小宽度？

我知道 Facebook 通过数据属性data-width 接受所需的宽度，我相信这可以设置为自动以获得我在上面要求的行为类型。 Twitter 是否为他们的分享按钮提供了类似的功能？

Fiddle

【问题讨论】：

链接在 iframe 中，你不能在你的 CSS 中做任何事情来改变它。您必须查看 twitter 是否允许您使用一些 api 更改样式。设置 iframe 的宽度会改变按钮大小吗？
我的 Twitter 关注按钮也有同样的问题。 JS 代码生成的 HTML 内嵌宽度大于实际按钮。这使得精确定位变得不可能。用!important 覆盖宽度不是一个可持续的解决方案，因为关注者数量可能会增加，导致按钮变大并因此被“砍掉”。有人找到解决此问题的方法吗？

标签： javascript html css twitter

【解决方案1】：

设置min-width，而不是width：

.twitter-share-button { min-width: 80px !important; width: auto !important;}

【讨论】：

我的问题是默认宽度本身太大了。设置最小宽度没有帮助。
也许您可以发布一个链接或解释您要解决的问题，该问题需要按钮的宽度是动态的。
@ZakAngelle 试图从各种社交供应商那里制作一组按钮，这些按钮将并排排列在一行中，而不会因固定间距而导致难看的间隙/溢出。

【解决方案2】：

这似乎是一个已知问题（请参阅this Dev Twitter thread），截至目前，它已经等待了近 2 年的有效解决方案。目前似乎没有干净的方法可以让按钮宽度匹配其实际内容。
可以摆弄一些自定义 javascript，但如果您尝试操纵 IFrame，最终又会遇到 IFrame/CORS 墙。

【讨论】：

很可悲的是，像 Twitter 这样的公司在这方面花了这么长时间。
到目前为止，作为一种解决方法，我只是在容器元素上设置了width。