So You Want To Bake Some Badges

My newest badge, made with

reposted from

I recently attended the 2013 Faculty Summer Institute held at the i-Hotel here in Urbana-Champaign. The buzzword for the year? Well, there were many–wikis, blogs, and apps ranked high–but I would say that 2013 is the year of the badge.

What is a badge, you might ask?

Overachieving boyscout, James Calderwood, who has achieved all 122 merit badges.

Overachieving Boy Scout, James Calderwood, who has achieved all 122 merit badges.

You’d be right to think of the Boy Scouts. Both the concept of a small, graphic representation of a particular earned skill, and the badge’s circular shape, in part originate from the Boy Scout’s famous credentialing practice. Gaming, which rewards players with tokens for completing a level or beating a boss, is another clear influence. In a time when more and more people are interested in representing skills learned outside of the classroom, and educators, employers, and students alike want to make the transition from classroom to workplace as smooth as possible, it’s no wonder badges are quickly becoming a popular technology.

These badges are a bit different from their predecessors: instead of being physical patches, they’re pieces of data tied to an image file,  and to get one, you don’t have to save any princesses (thought there’s probably a badge for that). They can be issued for anything, from baking a cake to writing a book. And perhaps the best news yet: thanks to Mozilla’s Open Badge Infrastructure (OBI), absolutely anyone can make, issue, and display them. Check out the Open Badge Project for more information.

There are two ways to issue a badge: hand-baking and using the Issuer API. I’ve done both, and recently, using the Issuer API has gotten A TON easier because of the fine folks behind (Check out CCME’s badge issuing site!)  At my presentation on Tuesday, May 14th, I spoke a bit about the badges I made and distributed to our student employees using the hand-baking method. I noticed at this presentation, and at the badges workshop I attended on Wednesday, that some people either didn’t know that hand-making badges was an option, or if they did know, the process seemed too confusing to give it a try.

But 1) hand-baking does exist, and 2) it is quite easy.  Here’s how I did it.

What you need:

  • Text editor
  • .png file (you can make one in Prezi by inserting an image into the circle/basic template and then taking a screen shot of it, or you can use an open-access image creator like to create and save your .png files)
  • Access to Box or Dropbox
  • An account in Mozilla’s backpack

After you have these items, do the following:

1. Upload the .png file to a public folder in either Box or Dropbox

2. Because I am working with University students, I used my staff account in Box to host my .png files. To make a file public, do the following:

  • Click on the uploaded file
  • Find “Sharing” in the top right of the screen:Sharing_001
  • Click “Link”
  • This will pull up a little square menu with a variety of options; in the top right of this menu are viewing options. The default is set to “Collaborators Only Access”.
    Viewing Options in Box--change "Collaborators Only" to "Public"

    Viewing Options in Box–Change “Collaborators Only” to “Public”

    Click on “Collaborators Only Access” and from the drop-down menu, select “Open”

  • The file is now public. To get a direct link to the image, click “Direct Link”

    Direct link

    Direct Link

3. Open a text editor of your choice (I use Notepad++ in Windows and TextWrangler in Mac) and copy and paste the following key-value pairs–be sure to change the values to reflect your own information:

“recipient”: “”,
“evidence”: “url to your evidence”,
“issued_on”: “2013-05-17”,
“badge”: {
“version”: “1.0.0”,
“name”: “Explorer”,
“image”: “direct link to your .png file”,
“description”: “Has demonstrated ability to make badges.”,
“criteria”: “url to your criteria”,
“issuer”: {
“origin”: “url of the issuing organization”,
“name”: “CITES CCME”,
“org”: “Test”,
“contact”: “” } }

4. Save the file as .json (json = JavaScript Object Notation…just a way to easily move data around)

5. Upload the .json file to your Box account and make it public, as well

6. Copy the direct link of your .json file and paste it at the end of this URL in a new window or tab:

Baking URL

Baking URL: The Direct Link to Your .json File Goes After the https://

7. Click enter; when you do so, the baking service will interpret the .json file and attach it to the .png file

8. You now have  a new, baked .png download! You can upload this to your Mozilla backpack (if you’re listed as the recipient), or you can attach it and email it to a student employee to upload into his or her backpack

To upload a badge:

  • Log into your backpack
  • Select “Upload”

    Upload a Badge to your backpack

    Upload a Badge to Your Backpack

  • Locate the .png and upload it to the backpack
  • Now when you click on the badge, you will get the data from the .json file:

    .json metadata for a hand-baked badge

    .json Metadata for a Hand-Baked Badge

  • To make the badge publicly viewable, select “Collections” from the badge homepage, drag and drop the badges you want into a collection on the left side of the screen, and check “public”

    My public collection

    My Public Collection

And that’s it! Now the hand-baked badge can be displayed anywhere that displays your other badges.

Want an easy way to display your badges? Sign up for a blog at, and get up and displaying faster with their already-installed plug-in WPBadger!

This entry was posted in Active Learning, Cool Tools, copied content, eLearning, Teaching with technology, Training, Tutorials and tagged , , , , , , , , , , , , , , , . Bookmark the permalink.