2011年12月09日(金)

ツイッターのデザイン変更でサイズが変わってしまったツイートボタンの修正

8日にTwitterを新デザインに変更したと発表があったんですが、それに伴って公式ツイートボタンのデザイン&サイズが変更となったようです。

新旧を並べてみました。

旧ツイートボタンと新ツイートボタンの比較

パッと見で数px縦長になってカラーがシルバーに。
上の画像のように横長(verticalタイプ)のボタンを使っている場合は新旧であまり差はないんですが、横幅が狭いタイプのものを使っている場合は顕著にサイズが変わっています。

で、調べてみると横幅についてはどうやらサイズが変更されたのではなく、設置しているウェブサイトやブログの言語を自動で検出してテキスト部分を変更しているようです。

このブログでもこのツイートボタンを使っていて、日本語で「ツイート」でなく「Tweet」と表示させていましたが、これが日本語に変更されてしまったために横幅が変わってしまいました。
影響を受けたのはこの部分。

新ツイートボタンでレイアウトが崩れてしまった

横幅が収まりきらなくなりレイアウトが崩れてしまいました。

これを修正するには言語を指定してあげます。

このブログでの修正前のコードはこうです。

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-lang="ja">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

これのこの部分
data-lang=”ja”

これをこのように変更します。
data-lang=”en”

修正後のコード

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-lang="en">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
※「data-lang=”ja”」がもともとない場合は「data-lang=”en”」追記してください。
なおコード内に「data-via=」や「data-text=」が付いていたり人によって違うので、それらは必要に応じて残してください。

これで日本語で「ツイート」と表示されていた部分は「Tweet」に変更でき、横幅も小さくなりました。
ツイッターの新しいボタンの言語変更でサイズを修正

縦幅が数ピクセル大きくなったために今までと全く同じとはいきませんでしたが、レイアウト崩れは直せました。
ソーシャル系のボタンはこの大きさが流行りつつありますが、どれも微妙に高さが違いますよね。
このあたりなんとか統一してもらえるとありがたいと個人的に思います。

ツイートボタンの発行はこちらから出来ます。

追記:
ボタンの幅をピクセル単位で調整する方法はこちら
新しくなった公式Twitterボタン(ツイートボタン)のデザインを修正する(小粋空間)
とてもわかりやすく解説されています。

このエントリーをはてなブックマークに追加
はてなブックマーク - ツイッターのデザイン変更でサイズが変わってしまったツイートボタンの修正
[`yahoo` not found]
[`yahoo_users` not found]
[`evernote` not found]

コメントを残す

*」は入力必須項目


  • © 2010-2018 試行錯誤 All Rights Reserved.