Announcing BadgeWidgetHack


BadgeWidgetHack is a very basic, lightweight OBI-compliant badge displayer.

The UI is not very sexy, but I figure that’s ok since you only have to use it once.

After you walk through the wizard you receive some Javascript you can embed in your blog or elsewhere (see you can see it running at the bottom of the righthand sidebar on the front page of this blog, for example).

The widget currently:

- shows up to the first four badges in the group you selected,
- badge images link to the hosted assertion, and
- badge names linking to the badge descriptions.

For BWH to work, you need to (1) have badges in your Mozilla badge backpack, (2) created at least one group and added some badges to it, and (3) marked that group as Public.

I’m sure you’ll manage to break it, and I would love any feedback or ideas for improvements!

Grab the source and play with your own version at https://github.com/kalendar/BadgeWidgetHack.

Comments on this entry are closed.

  • Scott Leslie

    Amazed as always. Well done.

  • Mathieu Plourde

    I was able to display it on my personal web page, but my WordPress.com site stripped our the tag.

    Also, the clicking on the image on my personal site links to a string of text instead of anything useful, but this is not one of the #ioe12 badges, simply the “badge 101″.

    See: http://udel.edu/~mathieu/

    • Jeroen

       While for me it does point at the correct badge, clicking the badge also results in a text page instead of something meaningful.
      See: http://oensoxford.blogspot.co.uk/2012/04/badge-widget.html

      Looking at the code it is the assertUrl that points at this text page (jb-oa.json). What would be more meaningful? I guess since the critUrl points at the criteria, it would make sense if clicking the badge goes to either: the shared public badge page, or the evidence URL?

  • opencontent

    I designed the widget so that clicking on the image takes the clicker to the assertion – this let’s you prove to them that you’ve really earned the badge. I think being able to verify is critically important, but am open to other suggestions about how to enable this in the UI!

  • Billy Meinke

    Thanks for this nice little widget, Dr. Wiley.  I’m including it in my documentation of OpenBadges for a F/OSS courses at the University of Hawaii.  Going to give it a try in the next week or two and will document hacks to it if we come up with any.

Next post:

Previous post: