If you’ve followed this blog, you might have noticed a couple of changes in the last days. In fact, I’ve been playing around with customizing Octopress and added a couple of custom asides.

Coderwall

I wanted to add my Coderwall badges in the asides. A bit of googling lead me to another Octopress blog, which was using Mizzy’s code to display the badges. From there, it was pretty easy to extract the Javascript code from the page source. I only found the original author’s page later today, but by then, I had already a working version.

As customization on the original code, I added the img@alt and img@title attributes to be generated from Coderwall’s JSON response data. This gives a nice addition for hovering over the badge to get its description, and an alternative description for non-graphic browsers.

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

{% if site.coderwall_user %}
<section>
  <h1>Coderwall Badges</h1>
  <p>
    <script type="text/javascript">
      function display_coderwall(args) {
        var badges = args["data"]["badges"];
        var wall = '';
        for ( var i = 0; i < badges.length; i++ ) {
          var alt_txt = badges[i]["name"];
          var title_txt = badges[i]["name"] + ' - ' + badges[i]["description"];
          wall += '<a href="http://coderwall.com/{{site.coderwall_user}}/"><img src="'
            + badges[i]["badge"]
            + '" width="48" height="48" alt="' + alt_txt
            + '" title="' + title_txt
            + '"/></a>';
        }
        document.write(wall);
      }
    </script>
    <script src="http://coderwall.com/{{site.coderwall_user}}.json?callback=display_coderwall"></script>
  </p>
  {% if site.coderwall_show_endorse_link %}
  <p><a href="http://coderwall.com/{{site.coderwall_user}}"><img src="http://api.coderwall.com/{{site.coderwall_user}}/endorsecount.png" /></a></p>
  {% endif %}
</section>
{% endif %}

Xbox Live

The second custom aside I created follows the implementation as described on the official Xbox site, which is using an iframe to embed the card. I don’t really like the iframe to embed an external page, but this implementation was small and function, which is the essential.

1
2
3
4
5
6

{% if site.xboxlive_user %}
<section>
  <h1>Xbox Live</h1>
  <iframe src="http://gamercard.xbox.com/{{site.xboxlive_user}}.card" scrolling="no" frameBorder="0" height="140" width="204">{{site.xboxlive_user}}</iframe>
</section>
{% endif %}

Configuration

The coderwall_user and xboxlive_user need to be specified in _config.yml.

More gamercard services

Given you have a website that generates nice gamercards (there are ton of thems), you can use the above code to include your custom gamercard as an aside.

tl;dr Creating asides is super easy with Jekyll/Octopress. And I’ll probably create a few more for fun.

/C