SteamBox is a way for you, and your users, to show off your Steam profiles. It incorporates a completely asynchronous structure, using wikiMod's Promise polyfil, so there is close to no impact on your users. You configure what games you want your user profiles to show, and that's it! Everything from online status to relevant game badges is dynamically pulled from steam servers. There is no cap on how many games you can configure SteamBox to show, but keep in mind too many will have an impact on browsing experience.

Your configuration should include an array of games with a name and appid (if no image is provided, one will be found for you). You can get any game's appid from the URL on its store page.

User badges are generated with the games you configure pushed to the top, then sorted by rarity and level.

Users can also choose to include a message under the profile to tell other users what they are into and how often they play.

The goal of this project is to bring FANDOM's gaming communities closer, and make it easier for people with common interests to find each other.





Requires wikiMod!
SteamBox uses the wikiMod library.

Include the following before the steam box code:

+function(t,e,o,n,i){function r(t){var e=t[b],o=typeof e;if(o==w)try{j.push(e)}catch(n){}try{t[b]=i}catch(n){}try{delete t[b],t[b]=i}catch(n){}return"boolean"==o}function c(){$=m;for(var t,e=0;j.length>0&&100>e;){e++,t=j[0],j[0]=i,j.splice(0,1);try{t()}catch(o){n(o)}}}function f(t){try{if(t.displayName==g||||h!=typeof t.$&&h!=typeof t.$$&&h!=typeof t.addStyle&&h!=typeof t.addScript)return m}catch(e){}return!1}function a(){return $}function u(t){var e=typeof t,o=e==w,n=t===!0;if(o||"object"==e||n)if(n||f(t))c();else if(o)if($)try{t()}catch(i){}else j.push(t)}function l(o){o=o||1,y=typeof wikiMod!==h?wikiMod:t[g]||e[g];try{if(!$&&!y&&35>o)return setTimeout(function(t){l((t||o)+1)},20,o)}catch(n){}c()}var y,p,d,s,h="undefined",w="function",g="wikiMod",b="onWikiModReady",m=!0,v=!1,M=o.defineProperty,W=h!=typeof exportFunction?exportFunction:i,$=!1,j=[],C={allowCallbacks:m,allowCrossOriginArguments:m};if(r(t)&&!d&&(d=t),r(e)&&!d&&(d=e),d)for(s=0;s<j.length;s++)try{d[b]=j[s]}catch(S){}else{p={get:a,set:u,enumerable:m,configurable:v};try{M(t,b,p)}catch(S){n(S)}if(h==typeof e[b])try{M(e,b,p)}catch(S){n(S)}l()}}(this,window,Object,console.log);
importScriptPage('User:Jgjake2/js/wikiMod.min.js', 'deadisland');


// Configure
window.SteamAPI_Config = {
	games: [
				name: "Dead Island",
				image: "",
				appid: "91310"
				name: "Dead Island 2",
				image: "",
				appid: "268150"
				name: "Dead Island Riptide",
				image: "",
				appid: "216250"
				name: "Dead Island: Epidemic",
				image: "",
				appid: "222900"
				name: "Escape Dead Island",
				image: "",
				appid: "226560"
		cache: { // Optional
			UserGameStatsMaxTime: 20, // Minutes
			ProfileInfoMaxTime: 10, // Minutes
			ProfileSummaryMaxTime: 5 // Minutes
		UI: { // Optional
			UserInfoFadeInDelay: 50, // Milliseconds
			UserInfoFadeInTime: 800
importStylesheetPage('User:Jgjake2/css/SteamUserInfo.css', 'deadisland');
importScriptPage('User:Jgjake2/js/SteamUserInfo.js', 'deadisland');

I do not recommend copying the code to your own wiki and running it from there. I have to run the requests through one of my own servers to get around browsers' same origin policy (since Steam intentionally doesn't provide the header). No personal information is EVER sent to the server (check the code yourself). But I am planning on migrating soon and I may have to update my code. At the very least, contact me personally and I will try to contact you when I make any major code changes.


<onlyinclude>{{#if:{{{username|}}}|<div class="steam-user-info" data-steam-username="{{{username|}}}" {{#if:{{{background|}}}|data-steam-show-background="1"|}} {{#if:{{{extended|}}}|data-steam-extended-profile="1"|}} data-steam-extra-games='{"games": [{{#if:{{{extragame1id|}}}|{"appid": {{{extragame1id|}}}, "name": "{{{extragame1name|}}}"} {{#if:{{{extragame2id|}}}|, {"appid": {{{extragame2id|}}}, "name": "{{{extragame2name|}}}"}|}} {{#if:{{{extragame3id|}}}|, {"appid": {{{extragame3id|}}}, "name": "{{{extragame3name|}}}"}|}} {{#if:{{{extragame4id|}}}|, {"appid": {{{extragame4id|}}}, "name": "{{{extragame4name|}}}"}|}}|}}]}' {{#if:{{{messageTitle|}}}|data-steam-message-title="{{{messageTitle|}}}"|}} {{#if:{{{message|}}}|data-steam-message="{{{message|}}}"|}}></div>|Error! No Username Entered}}</onlyinclude><noinclude>{{Documentation}}</noinclude>


{{SteamUserBox|username=jgjake2|message=My Message|messageTitle=My Title|extragame1id=271590|extragame1name=GTA V|background=1|extended=1}}



7 May 2015

  • Major code overhaul with massive improvements to speed and responsiveness
  • Can now pull user's live Steam profile background
  • "Extended" live profile information is now pulled
  • Users can now add up to 4 personal games
  • Improved username resolution
  • Improves cache response and reliability
  • Other bug fixes and improvements


Eventually, I plan on adding a lot more features and customizable options for both users, and wiki admins.

Features like:

  • What stats to show in the third column.
  • What to show in the "In-Game" hover popup.
  • What stats to show in the game hover popup.
  • Show cards currently owned by the user in the badge hover popup (data is already gathered by the code, it's just a matter of showing it).
  • Show server information for games that support it when user is "In-Game".
  • Show status updates posted on steam.

Also, if anyone is interested in contributing, I may add this project to github. If not, I will just maintain the code myself.