give IT a try

プログラミング、リモートワーク、田舎暮らし、音楽、etc.

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

「いいねボタン」の問題

普段は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属性が付いていないので、苦肉の策としてこのようなセレクタを指定しています。


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



できればこんなことをしなくても、はてなさんが標準のwidthを変更してくれると助かるんですけどね〜。
もし僕と同じように気になっている人がいたら参考にしてみてください。(そして「いいねボタン」をクリックしてくださいw)