Fixing my BioStar flair

Update: As of April 2012, BioStar has recently been migrated and their flair functionality is not yet re-implemented. I have also migrated my work server once and my blog twice since I posted this. This post did not handle these migrations well, but I’m just going to leave it as-is for now.

A few days ago I decided to put some StackExchange flair on my CV. I have nearly as much reputation on BioStar as I do on all the other StackExchange sites combined, but since Biostar was never fully integrated with the StackExchange 2.0 network, I have to link to my BioStar flair separately. Oh well.

I copied the flair HTML from BioStar and pasted on my site and I got this. For some reason, the favicon in the flair has been replaced with the text SE, and I think it looks pretty lame.

insert old flair here

I looked at the source code for the flair and found that the SE text was an image (http://biostar.stackexchange.com/theme/image/theme.favicon.flair.0). I dug around a bit, and found the favicon file I was looking for (conveniently it was http://biostar.stackexchange.com/theme/image/theme.favicon.flair.0). So I went ahead and created a simple PHP script on my server that grabs the BioStar flair, changes the image reference, and prints out the HTML. If I link to my new and improved flair, this is the result.

insert improved flair here

<?php

$html = file_get_contents("http://biostar.stackexchange.com/users/flair/". $_GET['id'] .".html?theme=default");
$html = str_replace("theme.favicon.flair.0", "theme.favicon.flair", $html);
echo $html;

?>

This solved one issue, but unfortunately it created another. Since the images were different sizes, the new icon doesn’t line up well with my name. Using a browser plugin to play with the CSS, I was able to fix things with this change.

/* I replaced this...
.valuable-flair .userInfo .username img{border:none; padding-right:3px;}

...with this */
.valuable-flair .userInfo .username img{border:none; margin-bottom: -4px; padding-right:3px;}

Rather than continuing my current approach of dynamically editing markup directly from BioStar, I decided to make static copies of the HTML and CSS on my server and manually make the necessary edits. Note that I don’t mean static in every sense of the word, since the HTML still uses JSON to populate the flair data from BioStar and this request is dynamically built using PHP. Anyway, here is the result!

insert new flair here

Any BioStar user can get their flair by including the following HTML, replacing my ID with theirs in the URL parameters.

< iframe src="http://gremlin2.soic.indiana.edu/biostar.php?id=223"
        marginwidth="0" marginheight="0" frameborder="0" 
        scrolling="no" width="210px" height="60px"></iframe>

I’ve included the source of the final page below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" type="text/css" href="biostar.css" />
  </head>
  <body>
    <div class="valuable-flair">
      <div id="gravatar" class="gravatar"></div>
      <div class="userInfo">
        <span class="username">
          <img src="http://biostar.stackexchange.com/theme/image/theme.favicon.flair" />
          <a id="profileurl" class="user-link" target="_blank" title="Visit my profile on biostar.stackexchange.com">
            <span id="displayname"></span>
          </a>
        </span><br />
        <span id="reputation" class="reputation-score" title="reputation score"></span><br />
        <div id="badges"></div>
        <p></p>
      </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $().ready(function() {
        $.getJSON("http://biostar.stackexchange.com/users/flair/<?php echo $_GET['id'] ?>.json?callback=?", flairCallback);
      });

      function flairCallback(data) {
        $("#gravatar").append(data.gravatarHtml);
        $("#reputation").append(data.reputation);
        $("#badges").append(data.badgeHtml);
        $("#displayname").append(data.displayName);
        $("#profileurl").attr("href", data.profileUrl);
      };
    </script>
  </body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s