Question

我知道其他帖子已经问过这个问题，但这些答案并不适合我的情况。如果您从此处嵌入了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接受所需的宽度我相信，这可以设置为auto来获取我上面要求的行为类型。 twitter是否为他们的分享按钮提供类似的东西？

Fiddle

Answer 1

而不是width，设置min-width：

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

Answer 2

这似乎是一个已知的问题（见this Dev Twitter thread），已经等待近2年的有效解决方案，截至目前。目前似乎没有 clean 方式让按钮宽度与其实际内容相匹配一个人可以摆弄一些自定义的javascript，但是如果你试图操纵IFrame，你最后会再次击中IFrame / CORS墙。

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

2 个答案: