Windows Gadget – Insomniacgeek's Blog

Reading on Stack Overflow that they have published the possibility to put your Stack Overflow status on your web page or blog. They call it the Stack Overflow “Flair”. There are a number of possibilities you have to get your flair information from their servers, and one of the methods is JSON. Which is great. I figured that it would be the easiest way to get the data in to the gadget.

But first I must decide on how the gadget should look like. The format that Stack Overflow is using for the flair doesn’t suit that well to be placed within a Gadget. The Stack Overflow flair is horizontal oriented, where as a gadget have a vertical approach. So I needed to re-arrange the design so it was more gadget friendly. For this I used Balsamiq Mockups. This is an excellent tool for designing your mockups quickly. The result a settled with looks something like this:

The next thing was to get the data from their servers using JSON. I am using jQuery to do this.

$.getJSON("http://stackoverflow.com/users/flair/3584.json?callback=?", flairCallback);
function flairCallback(data) {
$("#gravatar").empty();
$("#gravatar").append(data.gravatarHtml);
$("#reputation").empty();
$("#reputation").append("Reputation: " + data.reputation);
$("#badges").empty();
$("#badges").append(data.badgeHtml);
$("#profileurl").empty();
$("#profileurl").attr("href", data.profileUrl).append(data.displayName);
}

The HTML code for the gadget looks something like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>StackOverflow Flairtitle>
<link rel="Stylesheet" href="stylesflair.css" />
<script src="scriptsjquery-1.3.2.min.js" type="text/javascript">script>
<script src="scriptscore.js" type="text/javascript">script>
<script type="text/javascript">
$().ready(function() {
GetFlair();
});
script>
head>
<body id="flairbody">
<div id="background">
<div id="logo">
div>
<div id="gravatar">
div>
<div id="displayname">
<a id="profileurl" target="_blank" href="" title="Click here to visit your profile page.">
a>
div>
<div id="reputation">
div>
<div id="badges">
div>
div>
body>
html>

The final gadget looks something like this:

Get it from here.

Update: The gadget (which now also supports both Serverfault.com and SuperUser.com), with source code, is now available on CodePlex.com.

I have been following the progress of the Stack Overflow web site since it has started. In fact, I did also participate in the beta testing of the site. In podcast episode #54 , Jeff announced that they are adding the functionality to put a flair on your home page or blog. That’s a really nice idea.

One thing that would be even more cool is to have your flair as a Windows Vista / Windows 7 Sidebar Gadget. So I decided develop one. Why not? On the screenshot below you can see how it looks like. Please consider this first release as a beta release. If you find something odd, please email me.

Download from here.

Disclaimer:
It works on My Machine.

When you have installed it, it says that you must enter your user id.

So, hover over to the right of the gadget, and click the Options icon. Now, in order for it to work, you must provide it with your Stack Overflow user id. You can find it in the URL of your user profile page.