Instructables
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
 
Remove these adsRemove these ads by Signing Up

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('http://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=\'http://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

Picture of Style the website
Make the script generator look good!
dombeef3 years ago
Wow nice job, though I like to make it my self...
dombeef
Date Joined:Jan 1, 3001
  • Instructables500
  • Total Views1,000,000
  • Featured %110%
  • SubscribersAll Members
  • Topics200
  • Comments50,000


_____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________
tim_n (author)  dombeef3 years ago
blahblahblahblahblahblahblahblahblahblahblahblah
blahblahblahblahblahblahblahblahblahblahblahblahblah
blahblahblahblahblahblahblahblahblahblahblahblahblah
blahblahblahblahblahblahblahblahblahblahblahblahblah
blah

Can't see nuffin' cos your silly card covers it :)
dombeef tim_n3 years ago
lol yeah,Anyways, good job! This should be featured!
tim_n (author)  dombeef3 years ago
Thanks very much, I know Toasta (the guy who wrote this - Ben) will be pleased to see it featured!
tim_n (author)  tim_n3 years ago
Similarly it could be good if Eric and the mods incorporate the code into the site. The code above isn't the most glorious code and has to take into account overriding stylesheets etc but I'm sure the guys n' girls can sort that out :)
What do you mean by incorporating the code into the site...a feature that gives people the code to copy and paste?
tim_n (author)  Lithium Rain3 years ago
Well, it would utilise the above code (so they'd have more control over how often it updates) and would generate the code which would embed the playercard on peoples sites.
I gotcha. I think that'd be a great idea - it would promote instructables on other sites (just remember to include a link to instructables somwhere on it!) and provide a feature members have _made themselves_, they want it so bad.

Unfortunately, I think hell will freeze over before it's an official feature. :(
Jayefuu3 years ago
Nice work, I was going to sit down and do the code for you soon, but you saved me the trouble!

Great instructions, it might be more featurable if you made the title image square so that as a thumbnail on the front page it showed the whole card ;)
tim_n (author)  Jayefuu3 years ago
I'll sort out the thumbnail tonight Cheers Jayefuu
tim_n (author)  tim_n3 years ago
Haven't been able to do that as yet - unfortunately my internet has been cut off at the exchange and they've not as yet fixed it - no photoshop at work :(
NachoMahma3 years ago
. Nice