Vertical count Tweet button is suddenly wider

Gudlyf · 2012-02-23T01:27:08.000Z

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.

benward · 2012-02-23T01:43:35.000Z

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

joelgascoigne · 2012-02-23T08:56:00.000Z

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.

lazymanc · 2012-02-23T13:57:31.000Z

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.

guilhermekeese · 2012-02-23T12:08:05.000Z

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

MedinTux · 2012-02-23T12:16:08.000Z

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]

dpruth · 2012-02-23T13:36:26.000Z

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)

episod · 2012-02-23T15:38:02.000Z

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

ADyDyka · 2012-02-23T17:34:00.000Z

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

Elagizy · 2012-02-23T18:47:16.000Z

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)

dsparks83 · 2012-02-23T22:34:00.000Z

Same issue for me here

Love Rugby League – 23 Feb 12

Bradford wait for Gale news | Love Rugby League

Bradford face an anxious wait over the injury suffered to half-back Luke Gale, who will see a consultant in the next 48 hours. [Read more...]

Was previously 55px wide.

dsparks83 · 2012-02-23T22:50:00.000Z

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

jeremyers1 · 2012-02-24T03:21:05.000Z

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:

Till He Comes

"Till He Comes" Has MOVED

This website has moved! Please come join us at RedeemingGod.com

http://www.graceground.com

Scripture On...

Scripture On... Bible Verses on every Bible Topic

Scriptures on depression, anger, fear, love, marriage, finances, happiness, and other Bible topics. The site contains not just Bible verses on these topics, but insights and explanations as well.

jack_on_a_plane · 2012-02-24T08:58:00.000Z

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).

AccelerateMe · 2012-02-24T19:07:00.000Z

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

TheCVStore · 2012-02-24T22:04:32.000Z

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?

japantravelmate · 2012-02-25T15:57:00.000Z

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.

japantravelmate · 2012-02-26T02:11:48.000Z

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.

jeremyers1 · 2012-02-26T05:17:25.000Z

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.

atomgiant · 2012-02-26T20:50:28.000Z

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.