How to embed the instructables player cards onto websites to show off your stats! This (I'm pretty sure) originates from the Instructables Top Trumps game

I am no coder, despite having a BSc in Computer science, not compared to my friend Ben!

So having plied him with wine the night before, I told him of my recent question on instructables about embedding my playercard on my website and how it might actually be a useful feature for other people as well...

You can just jump straight to the embeddable playercard script generator HERE

http://playercard.neobard.net

Step 1: Meet the Code Monkey!

Meet Mr Ben (Toasta), Technical director, keen plaster boarder (more about that in my forthcoming instructable) beer drinker and code monkey extraordinaire.

Feed him coff33...

Step 2: The Code

<?php

header("Expires: " . gmdate("D, d M Y H:i:s", time() + 7200) . " GMT");
header('Content-Type: text/javascript');

// Generate some CSS
$style = <<<EOT
<style>
div#statscard { font: 11.5px/1.2em arial,sans-serif; color: white; width: 150px; border: 4px solid #FCAA1A; border-radius: 5px; -webkit-border-radius: 8px; -moz-border-radius: 8px; background: #F16625; padding: 7px 7px 0px; text-align: left; cursor: pointer; }
div#statscard div { margin: 5px 0px 0px 0px; padding: 0px; text-align: right; }
div#statscard div.user { font-size: 18px; }
div#statscard div.user-image { text-align: center; }
div#statscard div.date-joined strong { color: #FE963A; font-weight: bold; }
div#statscard div.user-image img { border: 1px solid white; margin: 0px; padding: 0px; }
div#statscard ul { background: #F16625; border: none; list-style: none; margin: 0px 0px 5px 0px; padding: 0px; font-weight: bold; }
div#statscard ul strong { float: left; color: black; font-weight: bold; }
div#statscard ul li { border: none; margin: 0px; padding: 0px; }
</style>
EOT;

// Fetch the Statscard HTML from instructables.com
$card = @file_get_contents('https://www.instructables.com/member/statscard/?screenName='.urlencode($_GET['screen']));

// Verify that the returned HTML is a proper statscard
if (!$card || substr($card, 0, strlen('<div class="statscard')) != '<div class="statscard')
$card = '<p>You don\'t seem to exist. Sorry about that.</p>';

// Replace the image with a locally hosted one if user photo doesn't exist
$card = str_replace('/static/defaultIMG/user.THUMB.gif','http://playercard.neobard.net/user.THUMB.gif',$card);

// Compose the HTML into a javascript friendly string
$json = json_encode($style.'<div id="statscard" onclick="window.top.location=\'https://www.instructables.com/member/'.$_GET['screen'].'\'"><img src="http://playercard.neobard.net/logo.png" />'.$card.'</div>');

?>
document.write(<?php echo $json ?>);

Step 3: Style the Website

Make the script generator look good!

Step 4: Putting the Code on Your Site

Cut and paste the code into whatever section of site you want to display your player card!

In the case of wordpress, add a text widget and paste the code generated on the http://playercard.neobard.net site!