先日，Twitter ボタン のデザインが変更されたようですが，それに伴って「複数のソーシャルボタンを一列に並べた際にレイアウトが崩れる（右側に余白ができてしまう）」と言う問題が発生しています．例えば，このブログ（はてなダイアリー）においても，以前は 3 つのソーシャルボタンが等間隔に並んでいるように見えていたのに対して，現時点では Twitter ボタンと Facebook ボタンの間が広く開いています．
そんな訳で，実際にどれ位の空白ができるのか簡単な html を記述して調査してみました．
右側の空白が分かりやすいように赤色の枠線を表示しています．これを見ると，カウントが無い状態でも（これまでよりも）やや広めの空白が確保されています．そして，カウント表示モードにすると，恐らく「3桁 + 単位分のツイート数が表示できる分だけの空白」がさらに確保されるようです．
尚，en 設定の場合は 5 桁を超えると「19.7K」のように K, M, G, ...，と言った単位が末尾に付くようですが，ja 設定の場合は「1万単位」と言う不思議な表記になるので（恐らく，ローカライズを失敗しているのだろうと思います），現時点ではどう頑張っても 1 万ツイートを超えるとレイアウトが崩れます．
どう対策するのか
問題の対策方法ですが，例えば，「right プロパティ等を使って，右側に配置されたソーシャルボタンを無理やりずらす」と言った方法があります．Cielquis.Net で公開してる各 Web ページのフッタには Social Media Buttons で公開しているライブラリを用いて各種ソーシャルボタンを表示しているのですが，レイアウトの崩れを軽減するために以下のような記述をしています（ちなみに，同様の対処療法は Google+1 の時にも行いました）．
smb.show(smb.google_plus1, smb.detail); document.write('<span style="position:relative; right: 20px">'); smb.show(smb.twitter | smb.hatena, smb.detail); document.write('</span>'); document.write('<span style="position:relative; right: 47px">'); smb.show(smb.facebook, smb.detail); document.write('</span>'); document.write('<script type="text/javascript" src="http://fblkitapi.com/static/js/fblkit.js"></script>');
Cielquis.Net だと，ツイート数は多くても 3 桁程度なので，それを上限として無理やりずらしています．この場合でも，ツイート数 1 桁や 2 桁の場合はまだレイアウトが微妙になるのですが，まぁ取りあえずはこんなもんかと言う事で妥協しています．
別の方法としては，「div 等の何らかのブロック・タグで囲んで width を（レイアウトが崩れないように）設定し，それらを float 属性を利用して一列に並べる」と言うものがあります（Twitter 公式ウィジェットの仕様変更で崩れてしまったレイアウトを修正する方法 - 頭ん中 参照）．こちらの方が王道でしょうか．
どちらの方法を取るにしても，決め打ちでは完全にはレイアウトを保つ事ができないので，本気で対策しようとすると表示する前に一度 API を通じてツイート数を取得し，その数に応じて設定値を調整する必要があるだろうと思います．もしくは，「Twitter ボタンと Facebook ボタンだけ」のような場合であれば，二段で表示されるボタンを使う方が無難かもしれません．
