CODEWITHSUNDEEP
javascripthtmlcsstwitter
user967451
user967451

Reputation:

How to change Twitter follow button width?

I know this has been asked in other threads but those answers didn't suit my case. If you embed the twitter follow button from here:

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>

the JS replaces the link with an 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>

As you can see the width is set as an inline style. I know I can overide this with something like:

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

for example but I don't want to do that because what if the share count increases to a very large number on a particular content page. Then the share count will be obscured by the minimum width.

Is there a way to tell twitter to size the returning iframe according to the share count that is inside, so that it is no bigger than the minimum required width it needs to be?

I know Facebook accepts the desired width via data attributes data-width I believe and this can be set to auto to get the type of behavior I am asking for above. Does twitter offer anything similar for their share button?

Fiddle

Upvotes: 6

Views: 5651

Answers (2)

superjos
superjos

Reputation: 12725

This seems to be a known problem (see this Dev Twitter thread) that has been waiting for an effective solution for almost 2 years, as of now. At the moment there seems to be no clean way to let the button width match its actual content.
One could fiddle with some custom javascript, but then again in the end you hit the IFrame/CORS wall if you try to manipulate the IFrame.

Upvotes: 1

zxqx
zxqx

Reputation: 5215

Instead of width, set a min-width:

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

Upvotes: 1

Related Questions