Jordi Romkema

I don't really like the style of the standard Xbox Live Gamercard. It's cool and all but I'd like to personalize it so it fits the design of my site, the standard Gamercard however does not. I searched for solutions to create my own Gamercard. I found some such as MyGamerCard where you can customize your own Gamercard but only limited to certain preconfigured styles. I figured there would be some sort of public API by Microsoft where I could just pull the data from and display it in a neat way, only to find out you have to be an official Xbox Community Developer to get access to this API. Bummer!

Then I came across Xbox Live Nation where the main developer, who has access to the official Xbox Gamercard API, created his own API which is public. With this Xbox Live Nation Gamercard API I created my own Xbox Live Gamercard and some of you have emailed me wondering how I did this. Therefore I wrote a little tutorial explaining it step-by-step so you can recreate it yourself with your own design. You have to be a member of Xbox Live Nation to get access to the API, so sign up before you start.

Step 1: Getting a Gamercard

When you have signed up at Xbox Live Nation you should be able to get data from the Gamercard API. All you have to do is to download the XML feed once in a while to your own server since you don't want to send a request to the API everytime someone visits your site. I'm using the XML feed URL http://www.xboxlivenation.com/api/xlnapigt.xml?gt=sizzlingjordi, but obviously replace sizzlingjordi with your own Xbox Gamertag to retrieve your Gamercard. I'll be using PHP to fetch the XML document with CURL, then I save the document on my server. I am going to display my Gamercard in Flash and therefore I rather have a JSON feed instead of XML so I'll convert the XML data to JSON data also so I can have easy access to the Gamercard data in Actionscript. I'm using the XML2JSON library for the conversion (download JSON.php, download xml2json.php)

Step 2: Get your hands dirty...

First, create a new file xboxlive.php and enter the following:

$getnew = true;
$content = "";
$file = "/www/xboxlive/xboxlive.xml";
$gamertag = "sizzlingjordi";
 
if (file_exists($file))
{
	$filetime = filemtime($file);
	$time = time();
	$difference = ($time - $filetime);

	if ($difference < 600)
	{
		$getnew = false;
		$content = file_get_contents($file);
	}
}
 

You need to replace $file with the absolute path to the file you would like to write the JSON data to. Be sure that this file, or the directory the file should be created in, is writeable. Replace $gamertag with your own Gamertag. The code aboves basically checks if the file exists already and if it does it checks the time the file was updated. If this is below 10 minutes ago then it will display the contents of the file on the server since you don't want to make a request to the Gamecard API everytime your Gamercard gets shown.

Step 3: Fetch the XML data with CURL

if ($getnew === true)
{
	$ch = curl_init();
	$fp = fopen($file, "w+");

	curl_setopt($ch, CURLOPT_URL, "http://www.xboxlivenation.com/api/xlnapigt.xml?gt=" . $gamertag);
	curl_setopt($ch, CURLOPT_FILE, $fp);
	curl_setopt($ch, CURLOPT_HEADER, false);

	curl_exec($ch);
	curl_close($ch);

	header("Location: http://" . $_SERVER["SERVER_NAME"] . $_SERVER["SCRIPT_NAME"] . "?r=" . time());
	exit();
}
 

The code above will download the XML data from the API using CURL and saves it to the XML file on your server. Then it redirects to itself so it can read the contents of the XML file right away. It might seem silly but it needs a redirect because I had some problems during testing as the XML file wasn't always fully updated when using file_get_contents() right after curl_close().

Step 4: Output as JSON

Using the XML2JSON library we can read the XML data and convert it to JSON, then display it so it's readable by Actionscript through the xboxlive variable.

 
require("includes/xml2json.php");
 
$content = xml2json::transformXmlStringToJson($content);
 
print("&xboxlive=" . $content);
 

Step 5: Prepare your Flash file

All you need to do is prepare your Flash file so your Gamercard data will be displayed correctly. I created a MovieClip with instance name gamercard_mc. This MovieClip contains two textfields: gamercard_txt for displaying my Gamertag and details_txt for displaying my score, zone and the last game I played. Then I created another MovieClip within this MovieClip which serves as a placeholder for my Gamertag Picture called picture_mc. The width and height of the square Gamercard Picture is 64 pixels. Create your own design here to fit the design of your site or wherever you're going to place your Gamercard. Let's move on to the interesting stuff...

Step 6: Grand finale

Using Actionscript we can get the contents of the JSON file and parse the data directly using the JSON class for Actionscript. Place the following code in the first frame of the root of your Flash file (not in the gamercard_mc MovieClip).

import JSON;
 
var feed:String = "http://www.jor-on.com/xboxlive.php";
var json:JSON = new JSON();
var xboxLive:LoadVars = new LoadVars();
 
xboxLive.onLoad = function(success:Boolean):Void
{
	if (success)
	{
		var xl:Object = json.parse(this.xboxlive);

		gamertag_mc.gamertag_txt.text = xl.xlnapi.coreinfo.gamertag;
		gamertag_mc.details_txt.text = xl.xlnapi.coreinfo.score + "n" + xl.xlnapi.coreinfo.zone + "n" + xl.xlnapi.coreinfo.lastplayed; 

		var pic_mcl:MovieClipLoader = new MovieClipLoader();
		var tile:String = xl.xlnapi.coreinfo.tile;

		var tileArray = tile.split(" ");
		tile = tileArray.join("+");

		pic_mcl.loadClip(tile, gamertag_mc.picture_mc.image_mc);

		gamertag_mc.picture_mc.link = xl.xlnapi.coreinfo.liveurl;
		gamertag_mc.picture_mc.onPress = function():Void
		{
			getURL(this.link);
		}
	}
}
 
xboxLive.load("http://www.jor-on.com/xboxlive.php?r=" + Math.random());
 

The code above creates a LoadVars object and loads the URL to the PHP script you just created so be sure to change the feed variable. Then the JSON class parses the data it got from the xboxlive variable. The picture will be downloaded and placed in a MovieClip called image_mc which is an empty MovieClip placed inside picture_mc you created earlier. The picture will get an onPress handler so the picture will be clickable and triggers a getURL function to your own Xbox.com Gamer profile.

And there you have it. Your own Gamercard. It's not perfect but it does the job pretty well and the way I like it. There is more data in the Gamercard API so take a look and try to expand it or maybe make the Flash file a little more interesting with animations or whatever you like

Xbox Live Gamercard Source (ZIP).