Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Katherine Hambley
Katherine Hambley
2,726 Points

Feature Request - Report Card plugin for integrating badges into our site

It would be nice to have a access to an API that allows users to post their "report card" of badges and points total on their own site or blog. I tried using RileyH's Report Card jquery plugin and it doesn't work. I like his format but I tried adding my username and it just doesn't load the data from treehouse. Has anyone else had success with this plugin?

5 Answers

Chris Akers
Chris Akers
2,527 Points
Chris Akers
Chris Akers
2,527 Points

Riley's code still seems to work ( I just had to fix the img src - http://codepen.io/chrisakers/pen/ozltd ) and we also have the official WordPress plugin ( http://wordpress.org/plugins/official-treehouse-badges-widgets-and-shortcodes/ )!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You can use the same API that Riley did http://teamtreehouse.com/khambley.json What else do you want from an API?

Also if you are already good with Wordpress there's a course on building your a Report Card widget on Wordpres http://teamtreehouse.com/library/how-to-build-a-wordpress-plugin

Katherine Hambley
Katherine Hambley
2,726 Points
Katherine Hambley
Katherine Hambley
2,726 Points

thanks, Chris! I grabbed your code and its working fine now. I think I also had a jquery lib called twice and it was conflicting. You can see my report card at www.superdesigngirl.com/about. James, is there a cheat sheet available for using the json API? thanks again, K.

Chris Akers
Chris Akers
2,527 Points

Nice. I like your site. That's a good use of the API. As far as a cheat sheet goes, no there isn't one but the JSON response looks like:

{
    "name": "Chris Akers",
    "profile_name": "akers",
    "profile_url": "http://teamtreehouse.com/akers",
    "gravatar_url": "https://secure.gravatar.com/avatar/b081db9edf93ca8ab495fd3f6a0baee7?s=200&d=https://teamtreehouse.com/assets/content/default_avatar.png&r=pg",
    "gravatar_hash": "b081db9edf93ca8ab495fd3f6a0baee7",
    "badges": [
        {
            "id": 49,
            "name": "Newbie",
            "url": "http://teamtreehouse.com/akers",
            "icon_url": "https://wac.A8B5.edgecastcdn.net/80A8B5/achievement-images/Generic_Newbie.png",
            "earned_date": "2011-11-07T03:17:46Z",
            "courses": []
        },
        ...
    ],
    "points": {
        "total": 2150,
        "html": 292,
        "css": 633,
        "javascript": 403,
        "ruby": 360,
        "ios": 0,
        "business": 0,
        "android": 0,
        "php": 12,
        "wordpress": 180,
        "design": 0,
        "dev tools": 0
    }
}

So the json is limited to most badges and points.

But, let me know if you have any additional questions. Oh, one thing I noticed was that you mention treehouse.com on your site. But Treehouse does not own that domain. Would you mind changing it to teamtreehouse.com or just "Treehouse"? Thanks!

Katherine Hambley
Katherine Hambley
2,726 Points

Thanks, Chris! And I fixed the "treehouse" domain that you mentioned, and I made them links! Thanks for noticing that! You gave me a good idea, it's always nice to have another set of eyes looking at the websites we build, and have someone else test them for usability, that might be a good idea for a business?? Offering usability testing and editing services for web sites and applications?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You can use http://jsonviewer.stack.hu/#http://teamtreehouse.com/khambley.json to get a better idea of the JSON format.

It contains some useful info:

  • Name of user
  • Gravatar image
  • Join Date of user
  • Number of Badges
  • Badge name, image, category
  • Points

You can also use moment.js to parse timeframes like badges earned this month.

Here's an example that parses that info from the JSON http://codepen.io/jamesbarnett/pen/pydIo

Katherine Hambley
Katherine Hambley
2,726 Points
Katherine Hambley
Katherine Hambley
2,726 Points

Thanks, James! I don't know much about the JSON format, I know, generally speaking, that it is similar to the XML format. It is basically a way of presenting data from a database. I would like to learn more about JSON and ajax, I'll have to find an introductory course, maybe on teamtreehouse?? :)

James Barnett
James Barnett
39,199 Points

Using JSON requires you have basic to intermediate knowledge of a programming language, I used a bit of JQuery.

This tutorial may help you out if you already know JQuery.