Vertical count Tweet button is suddenly wider


#1

Just starting seeing this today on my site and others. The Tweet button with vertical count is now several pixels wider than they were before today, breaking the format of the enclosing area. Nothing seems to have changed on the FAQ page for the buttons – the images there are actually the old size.


#2

Hi Keith,

We shipped some code today that does impact the button size: Since the Christmas update the buttons have been rendered in pure HTML and CSS, rather than image sprites (more accessible, faster loading, better caching, available in more languages, amongst other improvements.) This means that the text size can vary a bit between platforms; letter spacing on older versions of Windows differs from that of Mac OSX, for example. We’ve been aware of some cases of cropping of the button text or counts, and that wasn’t an acceptable long term situation, so today’s deploy does a better calculation of the required space, based on the actual font rendering of the browser.

In our testing, there are a few variances in widths, but pretty close to the old static sprite dimensions. If there’s a more extreme difference happening, we’ll take a look and see if we can tweak it to fix it. Could you please share the URL of the page that’s askew, and the browser and platform you’re using to view it? Either here, or reply to me on Twitter, and I’ll take a look.

Thanks,

Ben


#3

Hi Ben, I’m having the same issue as Keith, and it seems very widespread.

It’s been the case for a number of hours now, and seems to affect almost every instance of the Tweet button already on the web.

Here’s a screenshot, which clearly shows it wider than previously: http://joelg.cc/ERzk
Here’s a blog post which you can see the issue in: http://blog.bufferapp.com/how-to-auto-shorten-your-links-for-better-buffer-analytics#more-4501

it seems the iframe now has a width of 64px set in the CSS, whereas it should be 55px, which it previously was.

Hope that helps.


#4

It’s affecting http://www.ticketline.co.uk/ on the “share this page” slide-out on the left-hand side.

It would be good to have at least a little control over the dimensions, preferably in a similar manner to the way the rest of the button is configured.

edit - for me it’s all browsers I’ve tested (FF, Chrome, IE) on both windows and linux.


#5

Hi,

I’m having a wider button on my website, please have a look.
http://www.revistadesktop.com.br
I tried to fix it but I couldn’t realize what I’m doing wrong.

Thanks


#6

I have the same issue ! http://medintux.org (bottom of the page) the size the vertical button used to be let the 3 share button float on the same line…Now, the new size break the line ! and no parameters to makes the twitter vertical button smaller…a parameter please ! (like size=small/medium/large)

Chrome 17 / windows 7

Thx,

Victor

[EDIT] I solved the issue by playing on the left margin so now chrome render the page well.
Note that firefox was rendering well from the beginning… [/EDIT]


#7

It’s also rendering wider than normal on all of the posts at http://blog.lwr.org. It is wider than FB’s Like button, the +1 button, and the PinIt button, breaking the layout.

I’ve looked at Firefox 10.0.2, Chrome 17 and IE9, all with the same result. (Win7)


#8

Thanks for the feedback everyone, I’ll relay this to Ben and the team.


#9

Help. On my site now twitter button have width 208 px. And breaking the layout. It’s quite ugly - twitter button begin with empty new line because not fit in current line.
http://3gpfilm.org/comedy/2605-zolushka.html
I tested ff9, chrome 18


#10

I’m experiencing the same issues with 2 of my websites that uses Twitter vertical button. I believe the problem comes from the new width that you are using.
Check the problem at the links below:
http://www.tufoxy.com/index.php (At the middle right of the page, next to facebook like box)
http://www.bitnsips.com (At the footer, next to Facebook Like button)


#11

Same issue for me here


Was previously 55px wide.


#12

I’ve started to notice this on other sites as well - http://www.theverge.com/2012/2/22/2806473/pinterest-copyright-law-and-the-power-of-money on the left hand side


#13

I am having the problem on all of my websites. The sites have the Twitter button in a floating sharebar, and now that the Twitter button is wider than all the others, it overhangs the sharebar and looks terrible.

Here are a few sites as examples:


http://www.graceground.com


#14

I’m experiencing this issue on my sites too. The Twitter button now doesn’t fit in the space I had set for it, so it is getting pushed onto a second line on pages like http://www.pumpkinrecipes.org/glazed-pumpkin-cookies.html (it previously sat neatly to the right of the FB “Like” button).


#15

Same thing on my site:
http://accelerateme.net/wealth/why-you-should-never-work-for-money-and-what-to-do-instead/

No fix yet?
Thanks :slight_smile:


#16

I am also having this problem.

It ruined the look of my box at http://www.thecvstore.net/ so much that I have taken it off! Is there any update from Twitter on this?


#17

Same problem happening here. A day or two ago I launched the redesign of my site. In the left side is a like area for Twitter/Facebook. The Tweet button is now noticeably wider than it was just a few days ago. It has destroyed the formatting that was once very clean.

Example:
http://japantravelmate.com/nijo-castle-in-kyoto/

It looks to be around 10px wider. Tested on Mac OSX, latest versions of Chrome/Firefox/Safari.


#18

P.S. Since reporting this yesterday I’ve implemented a CSS hack to revert the Twitter button to the width it was before this sudden change appeared.


#19

Nice. What is the CSS hack? Can you share it? My twitter button is rending via an iframe, and I didn’t think I could use CSS to work around this.


#20

Same here… was 55px and is now hard-coded to 64px width by Twitter in the iframe. Is this going to be reverted back to 55px? Please advise so we can plan accordingly.