yoshiori.github.io

Octopress のサイドバーに Coderwall Badges を表示

Octpress のサイドバーに Coderwall の Badge を表示したいなと思ったので作ってみた。

source/_includes/asides/coderwall.html

に下記を保存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22


<section class="well">
  <ul class="nav">
    <li class="nav-header">Coderwall Badges</li>
  </ul>
  <div id="coderwall_badges"></div>
  <a href="http://coderwall.com/yoshiori">@yoshiori</a> on coderwall
  <script type="text/javascript">
    $(document).ready(function(){
      $.getJSON("http://coderwall.com/yoshiori.json?callback=?", function(data){
        for(var i = 0; i < data.data.badges.length ; i++){
          var badge = data.data.badges[i];
          var badge_tag = $("<img />");
          badge_tag.attr("src",badge.badge);
          badge_tag.css("width","50%");
          $("#coderwall_badges").append(badge_tag);
        }
      });
    });
  </script>
</section>

_config.yaml の 49 行目くらいの default_asides に asides/coderwall.html を追加

1

default_asides: [asides/recent_posts.html, asides/github.html, asides/coderwall.html, asides/twitter.html]

同じく _config.yaml の下の方にユーザー名を書いてあげる

1
2

# Coderwall badges
coderwall_user: yoshiori

で、サイドバーに表示されます。

Comments