How do I make the tweet button auto-size its width so that it doesn't generate way too much "blank space" to the right

TheRealPomax · 2012-10-03T17:55:51.000Z

I didn’t see a tweet button category, so I have no idea which to pick - When I use the tweet button on https://twitter.com/about/resources/buttons#tweet then if there is no count, the button will render at the correct width. If I pick a count, then the button decides to be 110px, even if the tweet count is 1, or 10 or 100, leaving a lot of blank space next to the button’s area, making things look mighty ugly. Facebook manages to get this right, sizing its button widget to be only as wide as it has to be, is there a way to make the tweet button do this, too?

TheRealPomax · 2012-10-03T17:59:42.000Z

no bubbles: http://i.imgur.com/SUPxM.png
bubbles: http://i.imgur.com/XAIsC.png

the blue is the iframe’s background-color, illustrating the problem as well. Note that removing the iframe’s explicit width just makes it as wide as possible, which is even worse =)

joltmode · 2012-10-22T09:03:35.000Z

Same here, no solutions in 2 weeks?

sds_net · 2013-08-20T06:26:05.000Z

I’m using AddThis for Wordpress and having the same problem. Anyone have any ideas?

benward · 2013-08-21T01:34:31.000Z

At the moment, the buttons with bubbles leave a buffer space available, since the size of the count can vary. As part of dropping IE6 and 7 support we’ll be able to do something smarter, so it’s on my list to make the frame sizing flush.

In the interim though, there’s nothing you can do I’m afraid.

dennisgaudenzi · 2013-09-02T18:27:43.000Z

I found a work around:

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

Give it a whirl! Do not make it too narrow or it will chop the count.

Dennis

350D · 2013-09-17T20:42:49.000Z

What about to implement postMessage event from twitter button iframe to parent window with button width and additional parameters like number from bubble?

dadvir · 2014-01-13T10:14:58.000Z

Is there a resolution for this? Setting a fixed width won’t work after a while (where I hope that the counter would advance)…

henrywright · 2014-01-30T12:05:44.000Z

I was able to set a fixed width on the button but whenever a page becomes popular, my counter gets chopped in half. A fixed width isn’t a great solution for me @benward

circuitfive · 2014-02-07T21:33:37.000Z

Worked for my case, thanks Dennis.

DaaaanNorris · 2014-02-21T17:21:42.000Z

The width is set to accommodate the 1000’s of tweet’s you’re going to get - so it’s pretty much future proofed. But as mentioned above this isn’t very dynamic for the interim, and many people don’t like using fixed widths.
You can however simply disable the counter using the below code;

defekt19754 · 2014-05-27T11:34:10.000Z

Please devs, do not let the people suffer from your incapability. After all those years you are not able to implement autosize on share button with counter. Even Facebook has it for a long time. Why the poor developers should be punished for this? It’s hard to explain why the Twitter button has so long space after counter and even harder explain why so many Twitter widgets are cut in half when the counter increase from 1-1000

wittertestpat · 2014-11-03T16:37:40.997Z

Bad solution… it won’t scale anymore… so if you get too many shares things don’t fit anymore…

niall · 2014-11-03T17:24:58.807Z