Displaying a badge on a blog

A few weeks ago I wrote about the Open Badge project set up by the Mozilla Foundation. It’s a project that I think has enormous potential in education but it’s very much in the developmental stage. Put simply, an Open Badge is a badge that you display on a website or blog or wherever that shows that you have achieved some sort of accreditation from an organisation. That accreditation could simply be a “Star of the Week” award, or something far more involved including achieving set standards on assessments etc. The important bit is that wherever you see a badge displayed the badge links to a web page showing the criteria for awarding the badge, details of the institution that awarded the badge, and a statement asserting the right of that individual to display a badge.  What’s more, because the details about an individual’s badges are held in an independent database, they are portable, i.e. once you’ve left one institution you can bring the badges you earned along with you to the new institution you are enrolled at.

For school bloggers Open badges represent a great opportunity to vaildate much of what they do and to encourage greater participation: badges could be awarded for people that write 5, 10, 15 blog posts; badges could be awarded for displaying particular skills such as the ability to embed hyperlinks, images, or videos into a blogpost; badges could be awarded for achieving assessment scores for e-safety projects and so on; or for simply taking part in a third party blog project such as the 100 Word Challenge. The point is, it is entirely up to the badge issuer to issue criteria upon which the awarding of badges is based.

However, because the Open Badge project is very much at a developmental stage, using the Open Badge infrastructure for blogging is difficult, requiring the willingness to get involved at a fairly geeky level with the project. Fortunately, it is relatively straightforward to use WordPress to “spoof” an Open Badge type system that will work across different blogsites. This post will show you how to do it. The main difference is that the management of the project is pretty much in the hands of the teacher.

What you will need to do:

  1. Create a gallery page on your class blog to display badges issued;
  2. Create a page for the accreditation criteria for each badge you intend to issue;
  3. Create a graphic for each badge you intend to issue;
  4. Start issuing badges

Creating a Gallery Page

Because most people have a class blog rather than individual blogs you wouldn’t want to display 30 different badges and more in the sidebar of your blog as the sidebar would become unwieldy. Instead it is much better to create a page with a “gallery” of 30 frames to display a badge for each member of the class. The easiest way to achieve that is to use a table. I use the HTML table generator at Quackit to generate the code for me. Here is the code for a 30 cell table based on a 6×5 format which you can copy:

<table border=”1″ bordercolor=”#b6d776″ style=”background-color:#FFFFFF” width=”600″ cellpadding=”3″ cellspacing=”3″>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
<p style=”font-family:verdana,arial,sans-serif;font-size:10px;”>

Note that in each cell, the words “Table Cell” will be replaced by the image of the badge, the link to the web page showing the criteria and the badge wearer’s name.

In WordPress, create a new page, click on the HTML tab and paste in the above code to create a page like this one.

Creating a Page for Accreditation Criteria

For each badge that you intend to issue, you will need to create a page on your blog for the criteria for awarding that particular badge. For example, I have set up 3 pages for the awarding of a Gold, Silver and Bronze badge for blogging. Note that when I have created these pages I have unticked the “Include this page in the list of pages” box so that the page doesn’t appear in the main navigation on the blog.

Creating a Graphic for each Badge

I have used the very simple Web20badges.com to produce 3 graphics for my Gold, Silver and Bronze awards. Of course, you can add status and quality by finding a graphic artist to come up with custom designs for badges, but bear in mind that in order to display the badge in a small cell in a table it will be no more than about 125×125 pixels. Once you have created the badge graphics you’ll need to upload them to the blog. Simply click on the “Media” tab on the WordPress menu and “Add New” to upload your badges.

Here is an example of a very simple badge graphic using Web20badges:

Issuing a Badge

Once you have reached this point you are ready to issue a badge. The video below will take you through the process of  displaying a badge in a gallery:

This could be taken further by having a page for each class member that displayed all the badges that they have earned and thus the person’s name in the gallery could be linked to their personal badge gallery. Similarly, other bloggers could create badges and publish the necessary code on their site to display a badge. For example, a group of schools involved in Quadblogging could design a badge that all four school members could use. Once uploaded to one of the participating school’s blogs the school could publish the html code to display that badge on all 4 schools’ blogs.

We would be pleased to hear from anyone setting up such a badge displaying project.

0

Tags:

About john sutton

Founder of Creative Blogs.

Connect with Creative Blogs

Creative Blogs are the UK's leading educational blogging specialists. We build Wordpress Multisite blog platforms for schools.

One Response to “Displaying a badge on a blog”

  1. Julia Skinner June 6, 2012 8:15 am
    #

    I’ve been talking to Mozilla about the possibility of using Open Badges on 100WC. I was looking for it to be an accreditation for those secondary pupils who join the commentating team. Perhaps we need to sit down & talk about your ideas here?

    Let me know!

    0

Leave a Reply