いいねボタンの幅が自動調整されるように

いいねボタンの挙動が妙な感じがすると思ったら幅が自動調整されるようになっていた。これでツイート・ボタンとかと並べる時に妙な幅ががが……みたいなことが解消される未来が現実味を帯びてきた。あの隙間のために横に並べるの諦めて縦に並べているとか、box_count(上にカウントが出る奴)を使っているみたいなWebサイトも多いと思う。いいね!

View Demo: New Like Button

デモの上はこのサイトのいいねボタンで、下がFacebookのいいねボタン。どちらもdata-widthを使って幅を110に指定してるけど、その値を無視して72px80pxになっている。わかりやすいように縦に並べて背景をマゼンタで塗ってみた。仕組み的にiframeバージョンではこうならないんじゃないかなーと思うので、HTML5かXFBMLバージョンを使うとすぐわかると思う。

いいねボタンの幅はカウント数以外にもロケールでボタンの文言が変わる仕様などによっても幅が変化する。そのため幅に余裕をもたせる必要があって色々面倒くさかったので、こういう仕様になったのは素直に歓迎できる。ツイート・ボタンや+1ボタンもこうなってくれればmargin-rightプロパティーで1emとかするだけで綺麗に並ぶようになって幸せそう。