Embed Your Playercard

Introduction: Embed Your Playercard

About: Hi, I'm Tim. I work on the railways during the day, run a scout troop and have a blog (see above website link) where I discuss my allotment and projects!

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


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


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

// Generate some CSS
$style = <<<EOT
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; }

// 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!

Step 5: Fin!



    • Creative Misuse Contest

      Creative Misuse Contest
    • Fix It! Contest

      Fix It! Contest
    • Metalworking Contest

      Metalworking Contest

    12 Discussions

    Wow nice job, though I like to make it my self...
    Date Joined:Jan 1, 3001
    • Instructables500
    • Total Views1,000,000
    • Featured %110%
    • SubscribersAll Members
    • Topics200
    • Comments50,000

    _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________
    7 replies


    Can't see nuffin' cos your silly card covers it :)

    Thanks very much, I know Toasta (the guy who wrote this - Ben) will be pleased to see it featured!

    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?

    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. :(

    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 ;)

    2 replies

    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 :(