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...
Wow nice job, though I like to make it my self...<br><div class="statscard round-corners shadow" id="dombeef"><div class="user">dombeef</div><div class="date-joined"><strong>Date Joined:</strong>Jan 1, 3001</div><div class="user-image"><img src="http://cdn.instructables.com/FRM/WL86/FUI0XEM2/FRMWL86FUI0XEM2.THUMB.jpg"></div><div class="stats"><ul><li><strong>Instructables</strong>500<li><strong>Total Views</strong>1,000,000<li><strong>Featured %</strong>110%<li><strong>Subscribers</strong>All Members<li><strong>Topics</strong>200<li><strong>Comments</strong>50,000</ul></div></div><br><br>_____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________ _____________________________________
blahblahblahblahblahblahblahblahblahblahblahblah<br>blahblahblahblahblahblahblahblahblahblahblahblahblah<br>blahblahblahblahblahblahblahblahblahblahblahblahblah<br>blahblahblahblahblahblahblahblahblahblahblahblahblah<br>blah<br><br>Can't see nuffin' cos your silly card covers it :)
lol yeah,Anyways, good job! This should be featured!
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.<br> <br> <sub>Unfortunately, I think hell will freeze over before it's an official feature. :(</sub>
Nice work, I was going to sit down and do the code for you soon, but you saved me the trouble!<br><br>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 ;)
I'll sort out the thumbnail tonight Cheers Jayefuu
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 :(
. Nice

About This Instructable


2 favorites


Bio: 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 ... More »
More by tim_n: Fixing a caravan/bike cylinder lock Leather Tankard The windscreen wiper hog roaster
Add instructable to: