SteamAPI / WebAPI

General Questions
1

Just a quick few questions :smiley:

  • How do you intergrate SteamAPI (or WebAPI) to get players profile picture, name ect.?
  • How could I do this with HTML (kind of like your old loading screen for gmtower)
  • How do you find out if someone is joining from Garry’s Mod when they view your page?

Any help would be greatly appreciated :3

2

We use Steam Web API: http://steamcommunity.com/dev

You can get all the data you desire through JSON.

3

And how exactly would I use them on the website? Sorry, i’ve just started learing HTML, and have no clue how to actually use the API @macdguy (EDIT: I’ve searched online and there’s some stuff about PHP?)

4

Well with JSON you can parse the data however you like. You can use PHP to do it or something else.

The general idea is:

  • Request JSON data from Steam through PHP or other server-side languages
  • Store a cache of the JSON on the server (so you’re not constantly requesting from Valve)
  • Parse JSON data on the server
  • Output the data to the client using HTML

It’s a little complicated, but there’s tutorials out there.

Using PHP is probably the easiest method to get started with as most web hosts have PHP as standard. There’s also lots of code snippets online that will get you going.

HTML is just the language used to display the content on the web browser. PHP is the code that handles the serverside stuff - like retrieving the data from Steam. JSON defines the structure of the data.

5

If you’re not a PHP kinda guy (or you don’t wanna go through the hassle of setting up a server), you can just do it in Javascript in the browser.

JSON stands for “JavaScript Object Notation” so it’s gonna work perfectly with JS out of the box (eg. weak-typed variables and arrays).

The basic setup is:

  1. Use an AJAX request to asynchronously get JSON data from steam
  • Parse resulting JSON into a javascript object using JSON.Parse( text );
  • Grab whatever data you want from the object and display it

Here’s the basic setup ( I haven’t tested this so you’ll probs have to mess about with it ):

var request = new XMLHttpRequest();
request.open('GET', 'put api url here', true);  //"true" for asynchronous
 
request.onreadystatechange = function() {
    if (request.readyState == 4) {
        var jsondata = JSON.parse(request.responseText); //built-in parser : )

        //do what you want with the data (it's a bunch of objects and tables)
    }
};

request.send(null);

You would most likely run this code in the document.onload callback.

Obviously this is just for testing type stuff, if you wanted to make a public version I would do what @macdguy suggested and route the AJAX requests through a server that makes a cache of the JSON results from Valve.

This would mitigate the amount of hammering on your Dev API key.

If the code doesn’t work, just google AJAX JSON, there’s most likely some tutorials out there.