Geek Answers Handbook

How to change Twitter by following the width of the button?

I know this was asked in other threads, but I didn’t like these answers. If you insert the following twitter button:

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 replaces the iframe link:

 <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 get around this with something like:

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

for example, but I don’t want to do this, because if the number of stocks increases to a very large number on a certain content page. Then the fraction count will be obscured by the minimum width.

Is there a way to tell twitter about the size of the returned iframe according to the amount that is inside, so that it does not exceed the minimum required width, which should be?

I know that Facebook accepts the desired width using data-width data attributes I believe, and this can be set to automatic in order to get the type of behavior I ask about above. Does Twitter offer anything like this for its share button?

Fiddle

+6
source share
2 answers

Instead of width set a min-width :

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

This is apparently a known issue (see this Twitter Dev thread ) that has been waiting for an effective solution for almost 2 years since now. At the moment, there seems to be no clean way for the width of the button to match its actual content.
You could play with some ordinary javascript, but then again at the end you get to the IFrame / CORS wall if you try to manipulate the IFrame.

+1
source

More articles:


All Articles