[[f] いいね！] CSS3でFacebookの『いいねボタン』を大きくする方法

Webサイトにいいねボタンを設置したけど、もう少し大きく表示してFacebookとの連携を強くしたい…そんなあなたにオススメなのがCSS3のtransformです。 まず、通常のいいねボタンがコチラ。 見慣れているせいかPCだとそこまで気にならないですが、スマホからだと小さくてタッチしづらいですよね。

次に、CSS3を使って拡大表示したいいねボタンを見てみましょう（2倍表示）。 めちゃくちゃでかくなりましたが、もちろん普通に押せます。押してもいいのよ？

方法

まず、公式サイトからいいねボタンのコードを取得します。 HTML5のコードはこんな感じですね。 このコードに、要素を変形させるCSSを適用しましょう。
今回は要素内に直接styleを記述しています。 「transform:scale(倍率)」って感じですね。倍率を2にしたら2倍のサイズで表示されます。
あまり大きくし過ぎるとロゴ部分の解像度の低さが目立ってしまうので、2倍くらいが限界でしょうか…

対応状況

CSS3を使用しているのでブラウザの対応状況が気になるところですが、最近のブラウザならほぼ問題ありません。ただしIE8以下は非対応なので、ユーザー層によっては使わないほうがいいかも。そこらへんはAnalyticsと相談しましょう。

---

以上、Facebookのいいねボタンを大きくする方法でした。Facebookとの連携を強めたい方は是非！