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

问题描述：

我知道这已被问在其他线程，但这些答案不适合我的情况。如果你从这里嵌入Twitter的后续按钮：如何更改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的宽度是否会更改按钮大小？ – epascarello 2013-02-13 21:55:43

我有与Twitter关注按钮相同的问题。 JS代码生成的HTML的内联宽度比实际按钮大。这使精确定位成为不可能。用'！important'覆盖宽度并不是一个可持续的解决方案，因为跟随者的数量可能会增加，导致按钮变得更大，从而被“砍掉”。任何人都找到了解决这个问题的方案 – Squrler 2013-03-16 13:34:08

答

相反的width，设置min-width：

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

我的问题是，默认宽度本身太大。设置最小宽度将无济于事。 – TK123 2013-02-13 21:51:22

您也可以添加'width：auto'。我已经更新了我的答案。 – zakangelle 2013-02-13 21:51:59

http://jsfiddle.net/3LxbJ/它使它更大 – TK123 2013-02-13 21:55:15

答

这似乎是一个已知的问题（见this Dev Twitter thread）已等待有效解决了近2年，作为现在。目前似乎没有clean的方式让按钮宽度与其实际内容相匹配。
人们可以摆弄一些自定义的javascript，但如果您尝试操作IFrame，那么最终你会碰到IFrame/CORS墙。

非常可悲的是像Twitter这样的公司在这方面花了这么长时间。 – 2014-09-08 01:48:50

直到现在，作为一种解决方法，我只在容器元素上设置了'width'。 – superjos 2014-09-08 09:00:08

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

相关推荐