How to Make a Treehouse Widget

Treehouse Badges Widget
Share Button

This project was a collaborations between myself and fellow Treehouse member Mark Flavin. Mark also made a Treehouse WordPress Plugin that simplifies things a bit if you are incorporating this widget on a WordPress powered site.

Check Out the Open Source ReportCard.js Project

HTML

First here is the HTML markup you’ll need. The jQuery code that builds the widget will be using these elements to append your badge information. Firstly everything is wrapped in a container div. This is where you will be able to set the badge widgets width with CSS. It contains the Widget title, and the badges ul parent tag. All pretty basic stuff here…

Widget Preview


CSS

The CSS is obviously more up to how you want your badges to be displayed for your own particular application, but here is the base CSS that I wrote to display mine. I would recommend customizing this so that your badges are the size, width, and offset you want. The base styles here are more to get you started with a somewhat creative way to display the badges, but this would be the area to edit if you wanted to tweak how the badge widget looks.


Check it out on Code Pen

margin

To walk you through this CSS process a bit: The widget width is set to 700px, and is centered on the page through the .badge-container. Edit this to make the widget wider or shorter and the badges will auto resize to fit the new dimensions.


inline

Make all li elements display inline:


align

This CSS sets the size of the individual badges, and aligns them to be able to fit in the honeycomb arrangement that I thought was an efficient way to display them on my site.


offset

This controls the badge row offsets. If the widget is resized than the row indents will begin to break out of order. To fix this you will need to rewrite this nth-child function to match the new row counts.


This is just some boilerplate formatting for the title font. Little trick here: the ‘-webkit-font-smoothing: antialiased;’ is a great way to smooth over some fonts in web-kit browsers. Really cleans up some fonts nicely.


hover

This just makes the badges lighten when hovered over so they appear like active, clickable links. On my site I used some CSS transforms to animate my badges, but for simplicity here I just made a simple CSS opacity hover.


jQuery

This code was mostly written by Mark Flavin, and I kinda hacked around at it to work for my needs. This is the code that reads your Treehouse profile’s badge information. All you need to edit here is:

and paste all of this code into a script tag before the closing body tag of your page. Make sure that you have included jQuery for this to work, and that this script tag is called after the jQuery script tag. This code basically reads your badge counts from treehouse every time the widget is loaded onto a page. When your badge count increases from passing a new test in Treehouse, your new badge and count will automatically update on your site that this widget is embedded on. One of the cool things about treehouse is that they provide this information in JSON data, which makes it easy to parse with a language like JavaScript. If you were curious about what your profile JSON data looks like, visit ‘teamtreehouse.com/replace-this-with-your-username.json’. I went in and commented this code pretty well, so you should be able to get a good gist of how it is constructing the badges from your treehouse JSON data.


Check it out on Code Pen

Treehouse Badges Widget

So there it is! If you appreciated the walkthrough on how to build your very own Treehouse Badge widget, stop by and let Mark or myself know! Also don’t hesitate to show us your incorporation of the widget by commenting below with a link to your website where you installed the widget.


PS, thanks for the feature Treehouse!

Check Out the Open Source ReportCard.js Project
Treehouse Badge Widget Code Pen Sandbox

Share Button
Riley scribbled this article down on: April 28, 2013
  • Suleiman

    Big big thank you to you Riley and Mark also. This is most definitely going to be used in the near future.

    Thank you :)

    • http://rileyh.com Riley Hilliard

      Thanks buddy! Let me know if you get it working and I’ll have a peek at your version of it!

      • Suleiman

        Will do feller.

  • Emily

    This is truly awesome :) Thank you so much for the time you gave up to write this. Much appreciated.

    • http://rileyh.com Riley Hilliard

      No problem Emily! Most fun I ever have is building cool stuff people actually use. If you get it working on your site, dont forget to let us all have a look by posting a link to it here or on the treehouse form thread at teamtreehouse.com/forum/how-to-make-a-my-treehouse-badges-widget-for-your-website

  • Karl

    Thanks so much for this Riley, just installed it to my site here http://www.karlmoss.com (still a work in progress mind).

    All I need to do now is earn some more badges!

    Thanks again,
    Karl

  • Benjamin Gregory

    What if >gasp< you stop subscribing (cause I earned them all 😉 )

  • ipeyt

    not working