Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
Treehouse Badges Website Widget
A few months ago I brought up a little static hack I made to show my treehouse badges on my personal website. Mark Flavin threw in some sweet jQuery to make the badges load automatically from my profile, and the team at treehouse showed us that user information is available in JSON, right off the profile pages! I've been working on a pretty massive website redesign on my personal page, and have implemented that widget in a couple creative ways. One is on the front page: http://rileyh.com and the other is in the sidebar on my blog pages: http://rileyh.com/blog/ If you are wondering how the arrangement re-organizes based on the device view, i wrote in some cool nth-child media queries. Thought I'd give it a share to the Treehouse community. I know Mark had a JS Fiddle of the code, but I forget the URL :-/ I think he made it a wordpress plugin as well, so maybe search for that if you are using wordpress.
Alrighty folks, time for another update! I have my latest work on the badges widget uploaded on my site (at the bottom), however I do not have a walk through for this code yet. This version of the badges widget is a lot more complicated than the previous one and I am not sure I will be writing a walk through for it (because it would be too long), but rather I think I'll just open source it after I refactor it a ton to be more simple to use (like a jQuery Plugin). Thanks to everyone that's been following the project thus far, and to those who have contributed to it!
Updated Reportcard.js yesterday. It Has new CSS spinners, and also now calculates it's font and badge sizes based on it's parent element rather than the bootstrap span* class. This is so that the widget doesnt have to be dependent on bootstrap like it was before, so it should be more compatible with wherever you might want to place it.
I also removed the course percentage bars. I felt they weren't really that relevant to display, and may refactor a future version to have an interactive doughnut pie chart option instead.
If you would like to see a feature added, come participate in the open source github project and put in a feature request in the 'issues' area, or fork the project and do your own thang with it!
Alright everyone, got the job offer and now have a couple weeks before I start, so I'll be working on the "how to make a treehouse badge widget" post starting Monday, woOo! Stoked to finally have the time to start writing all this up :D
The issue with reportcard.js was Treehouse changed their API to be behind SSL, so the API is now https:// instead of http://. I updated http://reportcard.rileyh.com/ with these changes, so pulling down the new .js file should fix issues with the widget
Jeremiah Shore Although I wasn't involved in the wordpress widget, I would imagine the slowness is probably because it makes a API request to treehouse before loading the page. This would block the server from returning the page until the request from treehouse completes, which can take seconds. I made an open source jquery plugin that uses async AJAX to load the data from Treehouse, so the jQuery plugin won't block your sites loading time. Additionally it caches that treehosue API request, which will make the widget load instantly on successive page loads, and also saves the Treehouse API some unneeded requests. You can find that, along with instructions on how to install it at: http://reportcard.rileyh.com/
Thanks! This could actually be a pretty cool lesson too. Building some kind of AJAX widget to read 3rd party JSON. Would be awesome to be able to incorporate a users own information like their badges etc. I think people could get stoked on that. (I did, haha)
That is sweet! Thanks for sharing!
Congrats Riley - awesome! :)
James Barnett39,199 Points
Personally I think showing all the badges in the sidebar lead to an extermely cluttered looking site.
For the sidebar, I'd have a "what I learned this week" widget, with the badges from the various sites that you've acquired in the last 7 days.
Also create a summary with some stats.
- Total number of badges earned on
- Site member since
- Badges per week average
You can do it for all sites culmalative as well as break it down by site.
Then have another page where someone can see of of your badges
@James Barnett, really stoked on the input. Yeah, I was thinking the sidebar was looking a bit cramped, especially with the codeschool and codecademy badges not being able to fit together all that well (one of the reasons I didn't include those on the front page). I never even thought of pulling membership data like 'total badges', or 'member since'. Forsure on my list of things to do next for the widget! Thanks
Ricardo Diaz30,415 Points
Hi Riley, Love this! I wouldn't mind know how all of this was done. I have some ideas on how I can use something similar to this on my personal website.
The badges do look a little over whelming at first but I love this design. Kudos dude!
@Suleiman yeah, I've been playing around with a lot of different styles. At least for the front page i wanted them to be large, because a lot of the design is "Big Content" (if that makes sense) But I am still playing around with different designs for the sidebar. Already started pulling in some of the functionality James Barnett suggested with the badge totals etc. I think I may end up shrinking the icon sizes to maybe fit in more of a 300px X 300px box, but that takes a bit to redesign, especially with the nth-child responsive offsetting being kind of a hassel to re-do. Getting closer to being finished though!
@Riley it looks and works superbly. Any chance of a write up on how to get he badges from he various sites loading up? ;)
@suleiman, yeah forsure! Mark Flavin worked on a large part of the JQuery backend that loads the badges automatically that I've built off of, so I'm not sure if there might be a good way for us to write something up together so he gets some credit too? But yeah, I have a few Articles in the mental que including a general review of Treehouse and then i could write up an explanatory walk through on setting up the treehouse website badge.
Emily Young18,258 Points
Wow! I want something like this on my portfolio! A write up would be greatly appreciated. Impressive work guys :)
@Emily, I definitely have plans on writing a how-to, but my schedule just got really slammed, so it may be a few days before I can get around to it. Stay tuned! :)
Still tuned in!
Me too :) Whenever you are ready dude.
Lisa Abbate1,851 Points
Awesome plugin! One question, how do I get the badge to link to the badge info on the treehouse website? If I hover over it I can see the title but I can't click to link. Thanks!!
So sorry I havnt been able to write this up yet. I've been fielding a bunch of job offers and life's been a bit hectic (good problems) I'll try my best to get this on github and do a installation writeup sometime next week.
@Riley - You have no obligation or commitment to us regarding this. If you are busy, that's good. Whenever you are redy feller :)
Looking forward to the post :)
Freaky deaky doo doo this is awesome. I look forward to using your awesome skills that pay the bills for my own personal benefit.
@Riley Congrats on the new job! :)
Ricardo Diaz30,415 Points
I am actually looking forward to this! Maybe this is something that can be applied to the bonus content area. In that we can have how to guides like this widget added to give Gold Members more of an incentive to remain members. Just a thought though.
Congrats on the new job Riley!
@Riley - Kudos to you man! :) The write up was perfect. Thank you.
I seriously recommend that this get put up on the Blog hint hint :P
Thanks guys! And if you use this on your site, dont forget to show everyone. I'd be stoked to have a look at how everyone adapts it to their sites :)
Mark Flavin10,199 Points
Very cool - if you have a bunch of badges you will want to go ahead and make a static variable for data.badges.length else each time the loop runs it having to recalculate the length adding a bit of overhead.
Jack Sharpe I worked on your points display code a bit. Just forked it and wrote some JS that sorts the points object to be arranged by highest number of points in a category, so that the bar displays in highest -> lowest point totals. Check it out here: http://codepen.io/rileyhilliard/pen/ntixr Thanks for the head start on the code. I have a few other ideas I may throw at it when I have some free time in the future.
Little cool update to the project that I will make a GitHub repo + instructions on how to implement. So I have been noticing that the response time on the treehouse json API is usually around 3-4 seconds (kinda long). As a consequence the badges load pretty slowly. I started thinking about how it is also pretty unnecessary to make a new request to the treehouse badges json API on every page that a visitor visits, calling that 3-4 second load time again. SO I decided to make a stellar PHP script that calls my treehouse profile json object and write the response to an internal file on my server called 'treehouse.json' and then wrote a cron job to execute that script every 24 hours. Now my badges call an internal file (treehouse.json) instead of teamtreehouse.com/rileyhilliard.json. This has literally cut the load time by 75%+ , and is also probably saving the treehouse servers some unneeded calc time when searching for my badges & points! Pretty cool. I'll pack everything up later next week so everyone can start having a look at how it works.
Cath Ellis11,984 Points
Hi, can anyone advise how this could be embedded onto a wordpress site? Thanks.
Cath Ellis Because it is a jQuery plugin, as long as the wordpress site has jQuery on it, it'll work. If you want it in a widget, just go to the widgets section, select the 'text/html' widget, add in the HTML hooks shown on the demo site, and then add the jQuery code needed in your main js file. You may need to play around with the CSS a bit to get it to fit your site best.
You can also add it anywhere on your site as long as you have the correct HTML hooks and jQuery code loaded, it will build itself automatically on the page.
Oleg Kuperman2,188 Points
excellent craftmenship, very bright, and congrats on all future endeavors. Code looks beautiful, if only it worked on my site. :(
Neslihan Torgut899 Points
Hi Riley. I tried and could not get it to work. these are the steps i took i forked and cloned the repo reportcard and then went to edit the html file and added the instructions outlined on the link you provided. After I completed the last step of adding my treehouse username to the html file I found that I was not able to save the repo. What am I doing wrong? please help