Stack Overflow – Share Your Flair – Now in PNG!

Introduction

This morning I was taking a look at the new (ish) meta stackoverflow site, and noticed a thread asking “Can we get flare as an image?”. It seemed like a good idea, especially for forum signatures and the like, so I thought that seeing as I’d recently updated the WordPress widget, that I’d try and put something together.

Pretty as a Picture (or not)

As C# is generally my weapon of choice these days, I was originally going to knock something together in ASP.Net. I was thinking something along the lines of rending a WPF control to a bitmap, and emitting that as an image. I decided against that approach because:

  1. ASP.Net hosting is generally more expensive – most people I know seem to stick to *nix hosting.
  2. Rendering WPF to a bitmap doesn’t work in partial trust scenarios; so it might not even work on ASP.Net hosting anyway.

So, feeling in a masochistic mood, I thought I’d knock something together in lovely old PHP; the results of which look something like this:

Steve Robbins' StackOverflow Profile

Or, by passing in a userid on the querystring:

Marc Gravell's StackOverflow Profile

You can test  it with your own details by changing the userid on the following url:

https://www.grumpydev.com/imageFlair/imageFlair.php?userid=1

Images are cached (for 30minutes by default) and all of the StackOverflow data is taken from the JSON feed, so the strain on SO should be fairly minimal.

The Code

You can use the script hosted on here if you want (although I might have to change my mind on that if the load gets too high), or you can download the code and run it on your own box:

https://www.grumpydev.com/imageFlair.zip

Although it will run just fine “out of the box”, the code is pretty flexible; with plenty of configurable options for fonts, colours, positioning, background images, caching time etc. Take a look in config.php and you’ll hopefully find you can change everything you want to without having to delve into the main code.

Bear in mind that I am far from a PHP expert, and this was put together in a few hours, so please don’t laugh too much if you do take a peek at the source 🙂

Font Support / Licensing

The text is rendered to the bitmap using a TrueType font of your choosing, which gives us some nice flexibility. Unfortunately though, none of the fonts that we generally take for granted, such as Arial, Verdana etc. come with any distribution rights; so I can’t include any in the source archive. This might not be a problem if you already have your favourite TrueType fonts installed; but if you don’t you can get a “free” version of several core fonts from http://sourceforge.net/projects/corefonts. You just need to extract the archives using WinRAR, or 7zip, or something of that ilk; then just drop the TTF file into the source code directory.

That’s it – hope someone finds it useful 🙂

Update – Bug Fixes and Pretty URLs

After some feedback from the meta question I’ve fixed a stupid bug in the gravatar code, so now it should work for people who have a 1 in their gravatar hash (don’t ask! :-)).

I’ve also enabled “pretty urls” on the hosted version, so now you can go to a url like:

https://www.grumpydev.com/imageFlair/658.png

And you’ll get the PNG for the corresponding userid. I do intend to expand it to include Flair for the other sites in the “Stack Overflow” family, but I haven’t had chance yet.

For those that are interested, this is the .htaccess file that enables the pretty urls, and also reduces the cache time on pngs to 1 second:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)\.png$ imageFlair.php?userid=$1 [L]
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 seconds"
</IfModule>

Update 2 – Supporting the Whole Family

I’ve added an optional parameter to specify which site’s information to display. The “pretty” url format now looks like this:

http://[ur]/[mode]/[id].png

Where [mode] is one of:

So for Jeff (id number 1 everywhere is easy :-)) we end up with:

Stack Overflow Meta Server Fault

The htaccess file now looks like this:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)/(.*)\.png imageFlair.php?mode=$1&userid=$2 [L]
RewriteRule ^(.*)\.png$ imageFlair.php?userid=$1 [L]
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 seconds"
</IfModule>

Source ZIP is updated with all the latest changes. Hopefully that will be it for the time being! 🙂

Updated: Stack Overflow WordPress Widget

Introduction

Just a quick post to say I’ve updated my Stack Overflow WordPress Widget to implement some basic caching. I’m still in the process of converting it to the new JSON service that SO have provided; but in the meantime this should cut down on the amount of traffic it uses.

You should be able to upgrade straight from the admin section of your blog; but you can also grab it from the WordPress Plugin Directory.

The cache time is configurable in the widget settings, and defaults to 30minutes. It attempts to locate your temp directory, then creates a unique filename cache in there; so there’s no need to chmod a cache file to get it to work.

I’ll hopefully get a JSON version working in the next few days, but if anyone has any problems feel free to give me a shout from the contact page.

Update: It seems the JSON version was easier than I thought 🙂 I’ve uploaded v2.0.0 that still includes the caching changes, but also uses the “official” JSON feed. If you have already used the cached version you might might need to delete the cache file to make it re-download the raw data.

The only “downside” to the JSON version is it requires json_decode, so you must have PHP 5.2.0 or above. If you can’t satisfy this requirement then you’ll be better off with the previous version.

Stack Overflow WordPress Widget

If you haven’t already, you should really check out Stack Overflow; it’s a community driven programming questions/answers site where people earn reputation and badges for contributing.

I wanted to put an XBox Live style "gamertag" on my blog with a link to my Stack Overflow profile and my current "reputation". I couldn’t find anything out there so I thought I’d dig up some Widget sample code and steal adapt it to display what I wanted.

There doesn’t seem to be any API for getting the information I wanted, so it uses a basic screen scrape, which may well stop working if they tweak the pages and may well not work for everyone’s profile page, but it works for mine and that’s all I care about 😉 Seriously though, if anyone else wants to use it and has problems, feel free to drop me a line and I’ll take a look at it. I’m no PHP expert either, so if anyone wants to tell me if my code sucks horribly, feel free 😀

You should be able to see the widget over on the right, and you can grab the widget itself below. Once it’s installed you need to configure it to give it your user number (26507 in my case) and your email address (so it can pull out your Gravatar). The email address isn’t used for anything other than hashing for the Gravatar, but you can read the source if you don’t believe me 🙂

Update: I’ve made a few changes in response to a few comments, and also removed the little place holder and badges in there.  It takes into account badges that have been awarded multiple times, so it *should* be the same as your SO page 🙂

Update2: Thanks to Ólafur Waage for providing an update to add a clear div after the widget and to run the name through htmlentities to handle names with “funky characters” 🙂

Update3: Version 2.0.0 is now available on the WordPress plugin page. It has a simple cachine system and also now pulls its data from the Stack Overflow JSON feed, rather than using screen scraping. More info in the new post: Updated: Stack Overflow WordPress Widget.

New screenshot and download below:

Stack Overflow Widget

sowidget.zip