HTMLとCSSだけで作るFacebookの「いいね！(like)」ボタン : Web Memo. SE

HTMLとCSSだけで作るFacebookの「いいね！(like)」ボタン

Web・Blog
Webサービス
2011年02月01日 21時26分

Facebookを利用するようになって各種サイトにおいてある「いいね！（like）」ボタンを自然に押すようになった。ボタンをおいてないところもlike bookmarkletなんかで押せるから問題ないと言えば問題ないものの、やはりサイトにおいてあった方が目に付くし押しやすいという事実はどうしても感じてしまう。

ところが先日記事ごとに「いいね！」ボタンをおいていたサイトにアクセスしたら、ボタンが消えてしまっていた。話によると「（ページ自体が重いので）軽くするために外してしまった」らしい。確かにいいね！ボタンはiframeかJavaScript（XFBML）を使って表示するしかなく、インラインフレームの読み込み時間も相まって少々重いパーツになってしまっていると思う。

しかしこれで納得してしまっては面白くないので、フレームを使わない簡単なHTMLとCSSだけでブログなどに設置できるいいね！ボタンを作ってみた。これなら設置してもほとんど重くならないし、iframeやJavaScriptが使えないサービスでも設置できるはず。

どうぞご利用ください（定型文）。

概要

HTMLのaタグとCSS（と別のタイプではJavaScript）だけで作成した、Facebookの「いいね！（like）」できるボタンのコード（タグ）と設置例の紹介。機能的には標準ボタンと同じものではなくて「いいね！できるフレームを別ウィンドウで開くリンクを設置」するもの。従って、本来ならインラインフレーム（iframe）上で表示されている「いいね！」数のカウントを表示することはできない。

もちろん「いいね！数をその場で表示しないボタン」と言い換えることもできるので、そういう機能のボタンが欲しい人には逆に向いてるかもしれない。（ただし別ウィンドウには当然いいね！数が表示されるので、完全に隠せるわけではない。）

注意点

現状IE（8以下）だけはボタンの角が丸くならないものの、これはIEがCSS3に対応してないのが原因なので正常な動作です。

「いいね！」ボタン HTMLオンリー版

HTMLとCSSだけでいいね！ボタンを再現したもの。新しいウィンドウを開くために「 target="_blank"」が使われているので、不必要なほど大きなウィンドウや新規タブが開いてしまいがちなのがちょっとした弱点かもしれない。

動作例

設置用HTMLコード

<a class="nofb-like" href="http://www.facebook.com/plugins/like.php?href=[いいね！したい記事のURL]" target="_blank" rel="nofollow">いいね！</a>

FC2ブログ用コード

FC2ブログなら以下のコードをコピーするだけで設置可能。（からの間に設置。）

<a class="nofb-like" href="http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>" target="_blank" rel="nofollow">いいね！</a>

「いいね！」ボタン HTML + JavaScript版

ウィンドウを開く動作をJavaScriptに変更して、いわゆる「小窓」を開くタイプに変えたもの。「いいね！」するだけなら新しいタブや大きなウィンドウはいらないので、その点をJavaScriptで修正している。例えJavaScriptがOFFでも普通に「いいね！」できるページに移動するので、そのあたりも問題なし。

動作例

設置用コード

<a class="nofb-like" href="http://www.facebook.com/plugins/like.php?href=[いいね！したい記事のURL]" onclick="javascript:window.open('http://www.facebook.com/plugins/like.php?href=[いいね！したい記事のURL]' ,null ,'width=450 ,height=250'); return false;" rel="nofollow">いいね！</a>

FC2ブログ用コード

<a class="nofb-like" href="http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>" onclick="javascript:window.open('http://www.facebook.com/plugins/like.php?href=<%topentry_enc_link>' ,null ,'width=450 ,height=250'); return false;" rel="nofollow">いいね！</a>

デザイン用CSS

以下のCSSを各社のブログサービスなんかで用意されている「CSSの編集」などのところに貼り付けて保存。

a.nofb-like {
	display: inline-block;
	padding-left: 20px;
	padding-right: 2px;
	border: solid 1px #CAD4E7;
	border-radius: 4px;
	height: 20px;
	line-height: 20px;
	background: url([アイコンのURL]) no-repeat 2px center #ECEEF5;
	text-decoration: none;
	color: #3B59B8;
}
a.nofb-like:hover {
	background: url([マウスオーバー時のアイコンのURL]) no-repeat 2px center #ECEEF5;
	border: solid 1px #9DACCE;
}

「CSSのカスタマイズができない！」という場合のコード

CSSのカスタマイズすらできないというサービスはほとんどないと思うんだけど、タグ自体にスタイルを設定することも可能なのでいちおう紹介。（ただしマウスカーソルをボタン上に置いても変化させることができないので、見栄えが若干寂しくなるという弱点あり。）

HTML版動作例

HTML版設置用コード

<a style="display: inline-block;padding-left: 20px;padding-right: 2px;border: solid 1px #CAD4E7;border-radius: 4px;-moz-border-radius:4px;height: 20px;line-height: 20px;background: url([アイコンのURL]) no-repeat 2px center #ECEEF5;text-decoration: none;color: #3B59B8;" href="http://www.facebook.com/plugins/like.php?href=[いいね！したい記事のURL]" target="_blank" rel="nofollow">いいね！</a>

HTML + JavaScript版動作例

HTML + JavaScript版設置用コード

<a style="display: inline-block;padding-left: 20px;padding-right: 2px;border: solid 1px #CAD4E7;border-radius: 4px;-moz-border-radius:4px;height: 20px;line-height: 20px;background: url([アイコンのURL]) no-repeat 2px center #ECEEF5;text-decoration: none;color: #3B59B8;"  href="http://www.facebook.com/plugins/like.php?href=[いいね！したい記事のURL]" onclick="javascript:window.open('http://www.facebook.com/plugins/like.php?href=[いいね！したい記事のURL]' ,null ,'width=450 ,height=250'); return false;" rel="nofollow">いいね！</a>

表示させるアイコンについて

今回の表示例で使っている画像は以下の2種類なんだけれども、これは両方ともオフィシャルのものを縮小して使ってるので、ライセンス的に恐らく再配布できない。

というわけで同じものが欲しいなら以下のFacebookの公式サイトから。

ブランドリソースセンター | Facebook

もっと凝ったものが欲しいなら次のようなアイコンの検索サイトや配布サイトで探せばいくらでも出てくるので、好きな画像をダウンロード＆縮小して使ってもらえればいいかと。

HTMLとCSSだけで作るFacebookの「いいね！(like)」ボタン