The important part of Mozilla Badges is that it's not just a pretty picture. There's data actually embedded in the badge graphic (the PNG format allows this). That data tells you where to get the public assertion that you earned the right to display your badge proudly.
For mine, the assertion looks like this. OK, it doesn't look that pretty. What it is is a well-formed JSON structure in Mozilla's approved format.
How would you display your pretty badges on your page? All you need now is the BadgeWidgethack. (This may get folded into Mozilla).
Of course there's lots of technicalities to building and baking badges. (A 'baked' badge has the data added to the graphic.) Explore yourself! There's even a badge to be earned: Open Badges 101 at P2PU.
Via DML Competition