coderwallの「説明文付き」バッジ一覧をブログに表示する

coderwallのバッジを、ブログに張り付ける方法が紹介されているので、自分も試してみました。ただ、このままだと何のバッジかわからないので、本家のページのようにバッジにマウスを当てると説明文が出てくるようにカスタマイズしてみた。

完成イメージ

バッジにマウスを当てると、説明文「Fork and commit to someone's open source project in need」が表示されます。
f:id:saj_kz:20140321140004p:plain

実際の動きは本ブログのサイドバーの「coderwall」の部分から見れます!

プログラム

Display badge's description when you hover badge image.
に作ったコードをまとめておきました。

何をしているか?

ざっと説明すると、追加した処理は2つ

説明文書の取得
<section class="coderwall" data-coderwall-username="kazuhirosaji" data-coderwall-orientation="vertical"></section>

の部分からバッジの一覧を表示してくれるのですが、表示されたバッジ画像の内容を調べてみると。バッジのimg要素のalt属性に、そのバッジの説明が記載されています。
f:id:saj_kz:20140321142235p:plain

この説明文をバッジのimg要素の上にマウスを合わせた時に発生するhoverイベントのタイミングで取り出し、span要素のテキストに反映します。(対象コードのset_description())。

説明文のstyleの調整

hoverのタイミングで、span要素のdisplay要素の切り替え(テキストの表示/非表示)と、span要素の位置の調整を行っています。

span要素の位置の調整は、はてなブログだとうまく効かなかった。。。


はてなブログのサイドバーに張り付けるとき

「デザイン」⇒「カスタマイズ」⇒「サイドバー」⇒「モジュール追加」で、
本記事の「coderwall_badge_markup.html」の

3行目の~41行目の を張り付ければOKです。

是非使ってみてください!