For anyone too lazy to create their own or does not wish to just use an Iframe, I have created a Stackoverflow flair widget for blog engine. This was quite an easy task due to the great job the blog engine guys have done with their plug in architecture for widgets.
It was quite straigtforward but I will explain a bit. First you create a folder with your widget name(StackOverFlow - and yes I know it should be StackOverflow, I just go a bit overboard with my camel casing sometimes). Inside this folder you need to create 2 files edit.ascx and widget.ascx. And there you have it, the start of your very own widget! Told you it was easy. If you would like a turtorial on how to create a widget there is a great one here.
I chose to use jQuery with server tags for most of the work. I did this for two reasons one I wanted to learn jQuery and..... Ok I only had one reason. All the styles sheets are referenced from stackoverflow and the jQuery library from Google.
Jquery Code below.
<script type="text/javascript">
$().ready(function() {
$.getJSON("http://stackoverflow.com/users/flair/"+'<%=GetUserId() %>'+".json?callback=?", flairCallback);
});
function flairCallback(data) {
$("#gravatarHtml").attr("href", data.profileUrl);
$("#gravatarHtml").html(data.gravatarHtml);
$("#reputation").append(data.reputation);
$("#reputation").after("<br/ >" + data.badgeHtml);
$("#UserNameLink").append(data.displayName).attr("href", data.profileUrl);
$("#so-flair").height("55px");
$("#so-flair").width('<%=GetControlWidth() %>');
$("#imgFavIcon").css("display", "none");
$("#so-flair").css("display", "inherit");
}
</script>
Edit Screen
You can download the files StackOverFlow.rar (2.41 kb).
Please note this was built on the 1.5 RC framework.