A jQuery plugin for showing off your GitHub and Coderwall stats.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


metabrag - show your geek cred off

This is a jQuery plugin for showing off your Github user info, Github repositories and all your Coderwall badges.

Metabrag has support for showing multiple user infos and sets aim at being highly customizable.

Downloading and Installing

Downloading metabrag

To download either clone the git repository or download autogenerated tarball.

Using git

cd ~/Sites/git_clones/
git clone git@github.com:mikaelbr/metabrag.git

Downloading autogenerated tarball

Use this link to download tarball https://github.com/mikaelbr/metabrag/tarball/master


Upload the .js and .css file to your root and add them to your HTML file - inside the head section:

<link rel="stylesheet" type="text/css" href="jquery.metabrag.css" />
<script type="text/javascript" src="jquery.metabrag.js"></script>

Using metabrag

There are multiple ways to use metabrag. The simplest is just to add a wrapper in your HTML and add a data-metabrag-username attribute to the wrapper. You can initiate the plugin by doing


With the HTML structure

  <!-- metabrag plugin wrapper -->
  <div class="element-name" data-metabrag-username="mikaelbr">


You can also drop using the data attribute and only support one user. Initiate the plugin using:

  username: "mikaelbr"

Or overwriting the global settings

$.fn.metabrag.defaults.username = "mikaelbr";

Multiple boxes

You can easily implement multiple boxes with different usernames. Just add more wrappers with different attribute values, and initiate metabrag as usual.




  <!-- metabrag plugin wrapper -->
  <div class="element-name" data-metabrag-username="mikaelbr">
  <!-- second metabrag plugin wrapper, with the user with most badges at coderwall -->
  <div class="element-name" data-metabrag-username="dustin">

Data attributes

metabrag can use two data attributes

  • data-metabrag-username
  • data-metabrag-coderwall-username

The latter is used to set a spesific username for Coderwall, if it is not the same as your Github user.


There are 3 events set up with this plugin. They all use the namespace metabrag. You can change the event name to be whatever you'd like. This can be done the same way you'd change any other settings.

Predefined events are:

  • userinfoLoaded.metabrag: Triggered after DOM has loaded user info from github
  • repoinfoLoaded.metabrag: Triggered after DOM has loaded repo info from github
  • badgesLoaded.metabrag: Triggered after DOM has loaded badges from Coderwall

metabrag settings

Here are the settings that can be altered to customize your geek creds

    username: '', // Global username - if only one username is supported.
    coderwallUsername: '', // Global coderwall username
    showGithubUserInfo: true, // Shows/hides the github user info box
    showGithubRepoInfo: true, // Shows/hides the github repo info box
    showCoderwallBadges: true, // Shows/hides coderwall badges
    showExtendedInfo: false, // Shows/hides extended info in github user info box
    showForks: false, // Shows/hides forks in repo info box
    userInfoBoxClass: "ui-metabrag-github-userbox", // class for styling user info box
    repoInfoBoxClass: "ui-metabrag-github-repobox", // class for styling repo info box
    coderwallBadgesClass: "ui-metabrag-coderwall-badges", // class for styling coderwall badges
    errorMessage: "Couldn't load developer data.", // error message on 404
    loadingMessage: "Loading...", // String for loading text.
    eventLoadedGithubUserInfo: "userinfoLoaded.metabrag", // Event triggered when a user box is loaded
    eventLoadedGithubRepoInfo: "repoinfoLoaded.metabrag", // Event triggered when a repo box is loaded
    eventLoadedCoderwallBadges: "badgesLoaded.metabrag" // Event triggered when badges are loaded

What's important to remember is that the data attributes are of a higher priority than the username property. If you have set property username and the data attribute.

Further plans

Here are some of the plans made for this plugin

  • Expand default settings to contain language strings
  • Better error handeling
  • Expand to support more code banks (Codeplex etc.)
  • Make minified version
  • More elegant DOM manipulation.
  • More features?


Please feel free to either fork me or post issues.