はてなダイアリーで「いいねボタン」の右端が切れるのを回避する方法

「いいねボタン」の問題

普段はMacのChromeを使ってるんですが、ブログのデザインを変えたときにSafariやFirefoxで自分のブログを見ると、Facebookのいいねボタンが切れているのに気付きました。

最初はブラウザの互換性の問題かと思ったんですが、よく見るとボタンが「Like」ではなく「いいね！」になっているのが原因でした。

ボタンのピクセル数を測ってみるとLikeの場合は79pxで、いいね！の場合は101pxでした。
ところがHTMLソースを見ると、iframeのwidthが100pxになっています。

<iframe src="http://www.facebook.com/plugins/like.php?href=(省略) style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

じゃあwidthを変更すれば解決だよね〜！・・・と思ったんですが、このボタンははてなダイアリーの管理ページから利用の有無を選択するボタンなので、HTMLソースを細かくカスタマイズすることはできません。

さて、困った。どうするか？

解決策

というわけで解決策です。CSSでwidthを変更します。
ただし、HTMLソース内で指定されているwidthよりも優先度を上げることと、facebookのiframeだけを狙い撃ちにすることがポイントです。

具体的には「管理ページ > デザイン > 詳細タブ > スタイルシート」で、以下のような定義を追加します。

p.share-button iframe[src*="facebook"] {
  width:101px !important;
}

HTMLソース内で指定されているwidthよりも優先度を上げるために「!important」をつけています。
また、facebookのiframeだけを狙い撃ちにするために「src属性に"facebook"が含まれるもの」を指定しています。
自動生成されるHTMLソースにはいいねボタンを識別できるようなclass属性が付いていないので、苦肉の策としてこのようなセレクタを指定しています。

というわけで、ちゃんと表示されるようになった「いいねボタン」はこちらになります。