Dr Nic

GitHub Badge for your Blog with 100% guarantee of more coolness

GitHub Badge

The killer app for JavaScript in the 90s was to take a perfectly readable sequence of words – aka “a sentence” – and turn every single character a different colour. You did that, then you went back to doing normal work.

The killer app for JavaScript in the 00s is widgets/badges. Taking perfectly useful stuff from one website – aka “data” – and re-posting it on your blog sidebar.

In both circumstances, across two decades, you did this to look cool. Sure, it never works but you do it anyway.

Thusly, riding high on the world-dominating success of GitHub there seems to be a vacancy in the department of “JavaScript badge for my blog to make me look cool” projects, in the sub-category of “GitHub”.

The first entrant and thus market leader of the “Blog Badges for GitHub” micro-industry is the “GitHub Badge” It is beautifully demonstrated in static image form above, or if you click the image through to the website (or here to my blog and its aesthetically appealing enhancement with said GitHub Badge) you’ll see it live and interactive.

Touch it. Feel it. Press the “Show more” link for hours of entertainment.

Installation

Then get it for yourself. Read the GitHub Badge website or just…

Slap the following into your blog sidebar:

<div id="github-badge"></div>
<script type="text/javascript" charset="utf-8">
  GITHUB_USERNAME="drnic";
  GITHUB_LIST_LENGTH=10;
  GITHUB_HEAD="div"; // e.g. change to "h2" for wordpress sidebars
</script>
<script src="http://drnicjavascript.rubyforge.org/github_badge/dist/github-badge-launcher.js" type="text/javascript"></script>

Only GITHUB_USERNAME is a required pre-set variable. The others above show the defaults, and can be changed by being specified.

For my WordPress sidebar, which uses <li> and <h2> for sections and headers, I use the following:

<li id="github-badge"></li>
<script type="text/javascript" charset="utf-8">
  GITHUB_USERNAME="drnic";
  GITHUB_HEAD="h2";
</script>
<script src="http://drnicjavascript.rubyforge.org/github_badge/dist/github-badge-launcher.js" type="text/javascript"></script>

Thus the badge is inserted in the <li> element, and the “My projects (drnic)” header is an <h2> instead of a <div>.

Source and tests on github

You can fetch the source from github – http://github.com/drnic/github_badges/tree/master – using:

git clone git://github.com/drnic/github_badges.git

You might want to add an option to turn off the auto-CSS generator so you can theme it yourself.

The JavaScript tests are in test/ folder. Either run them with rake test, or individually open the files in your browser.

Future cool things the badge could do…

Ultimately, when Chris Wanstrath (harass him on twitter) adds more fields and APIs to the GitHub API then the badge can do more. Currently it orders the projects in reverse order – that is, newest projects first. If I can get the network/watching counters then I can order the list using those values, etc.

Any other cool ideas for what the badge could do?

I’d like to be able to show project version numbers (e.g. gem version numbers) and other project meta-information. This would require GitHub to offer a CRUD UI for generic key/values and for the fields to be returned via their API.

If you know Chris and can throw heavy objects at him with moderate certainty of hitting him and not damaging any expensive equipment, please do so til he gives me this stuff.

Related posts:

  1. Migrating project websites to github pages with sake tasks, new websites with jekyll_generator Its almost Christmas time and that means presents. It...
  2. How to yell at people with GitHub from TextMate Sometimes when you are perusing code you ask the question:...
  3. GitHub and TextMate Unite I wanted to go from a source file to the...
  4. Auto-completer for my blog comments It took 4 hours to return from the town of...
  5. My railsconf sessions in my sidebar Jesse Newland got the JSON API a day ago and...

15 Responses to “GitHub Badge for your Blog with 100% guarantee of more coolness”

  1. Mislav says:

    The badge could show how many people are watching my projects (and maybe sort by it).

    Nice work! Off to play with it.

  2. Mislav says:

    Done: http://mislav.caboo.se/rails/github-is-amazing/#extended

    One bug, though. It shows the “show more” link even when all the projects are already shown. I don’t have as many projects as you! :)

  3. Dr Nic says:

    @Mislav [via] – ooh good point. Should be fixed now.

  4. Greg says:

    Thanks for this Dr. Nic! Also thanks for the Jquery TMbundle

  5. This simply does not work for me. I get the following error:

    Value GitHubBadge.Launcher.loadedLibraries (result of expression s.success) is not object.

    As best I can tell, the problem is it’s being handed “GitHubBadge.Launcher.loadedLibraries” and then trying to call that as a function.

  6. Dr Nic says:

    @Greg [via] – the jquery bundle was created by someone else; I think my only contribution was pushing it to github :)

  7. Dr Nic says:

    @Kevin Ballard [via] – I have seen that error before – when I had the OpenID plugin activated – something weird was going on with the jquery library. I don’t know what the problem was, but when I deactivated the openid plugin (which seems to use jquery itself) then the openid issue disappeared and the badge worked fine. I noticed this on my local machine’s dev install of wordpress when I just installed 2.5.1, and realised i had the wpopenid plugin activated on the dev machine, and not on production. Perhaps something similar is happening?

    The badge will only load jQuery and jquery.template.js if they haven’t been loaded elsewhere on the page. So if something else is loading a dodgy jquery file, then “jquery” variable is probably defined already, so the badge doesn’t attempt to load its jquery file.

    If you want to leave the badge installed on your blog, I’ll have a look at it.

  8. Love the badge. I’ve wrapped it into a sidebar plugin for Typo users. It abstracts away the need to get the HTML correct for Typo.

    Typo users can grab it here:

    http://github.com/peteonrails/githubsidebar/tree/master

  9. Soleone says:

    Very good!

    I installed it on my (typo-)blog, but without the plugin, because I did not know about it at that time, and it works wonderfully and looks nice!

    greetings and kudos from germany

  10. [...] Nic has released a javascript based badge for GitHub. While I generally like to keep my sidebars clean because most readers just ignore the cruft in [...]

  11. [...] liked Dr Nic’s github badge so much that I wrapped a sidebar plugin around it for Typo users. You can get it from [...]

  12. Leon Bogaert says:

    Cool badge! :)
    I’ve created a wordpress widget for it: http://wordpress.org/extend/plugins/github-widget/

  13. gugod says:

    Hi, Dr Nic,

    I have exact the same problem as what @Kevin Ballard described earlier. I looked it into it a little bit and I think its because line 88:

    this.requestContent(url, “GitHubBadge.Launcher.loadedLibraries”);

    If there’s already a jQuery 1.2.6 object in the page, this line eventually calls:

    jQuery.getScript(url, “GitHubBadge.Launcher.loadedLibraries”)

    And since jQuery.getScript accept callback as a function instead of a string, the error message shows up.

    Therefore, before new version of launcher is released, my current work-around is to:

    delete window.jQuery;

    right before pulling in the launcher code.

    I hope this helps you to solve the error :)

  14. Erik Gregg says:

    Just forked this into a WordPress plugin. Works great on my end. Much easier to install.

    http://github.com/hank/github-widget/tree/master

    Let me know if you have any problems.

  15. notarius says:

    Cool badge! I want to install it too!