Make an iGoogle Gadget for Your Game in 5 Steps

So the other day to help promote my game, I decided to create an iGoogle gadget.

For those who might know, Google allows users to setup their own homepage with nice little gadgets that do all sorts of things. You can check that out here: http://www.google.com/ig

To build a gadget you must understand that it consists of two parts.

xml file - This is the base file and contains all the formatting and javascript of your gadget.
data file - This contains the data that is displayed by your gadget

The gadget I am building is for my new game www.rpgcardz.com , the gadget will display the top ranking folks.

Step 1:

Get the developer gadget, from here, (click the add now link). It will allow you to refresh and test your gadget without posting to google's gadget directory. This is important...without this you will have a very hard time...go get it.

Step 2:

Create the xml document. Notice this looks very similar to an HTML document. Do the following to the file:

1. Edit the Author, Title, URL and Screenshot information in lines 1 to 10
2. Edit the css style elements between lines 16 and 22

Get the file

Step 3:

Notice there is some javascript here which calls a remote location and takes the content there and shoves it into a div. You will need to point the code to the right location and create the data file (see Step 4).

We use a special google function called _IG_FetchContent(), which you pass a url to and it calls the function that you specify and passes back the contents:

var requestType = "highscores";
var timer = null;

function getHighScores()
{
 requestType = "highscores";
 url = 'http://www.yoursite.com/rpgcardz.com/feeds/highscores.php'
 //send request using google API
 _IG_FetchContent(url, responseHandler, { refreshInterval: (10) });
}


function responseHandler(response)
{
 if (response == null || typeof(response) != "string")
 {
     $("mainDiv").innerHTML = "It appears that no one is online...";
     return;
    }
   
    fullText  =response;
    if(requestType == "highscores")
 {
   //take contents and shove it into the mainDiv
   var d = document.getElementById("mainDiv");
  d.innerHTML = fullText;

  //Refresh in 10 min
  timer = setTimeout("getHighScores()", 600000);

 }
}

//call the function when the gadget loads
//another google api function
_IG_RegisterOnloadHandler(getHighScores);

The main body of the page consists of some simple HTML. (If you can't make sense of this, you probably should not be doing this stuff.)

<center>

   <a href="http://www.battleforcesonline.com"  target=blank
   ><img src="http://www.rpgCardz.com/iGoogle/logo.jpg" border=0></a>


<h1>Rankings</h1>
<div id="mainDiv" style=" background-color: #EEE; margin:0 auto;">
Loading...
</div>

  
</center>


Step 4:

The data that actually get displayed is generated by a different page. I usually put this in a folder called feeds. For example: www.rpgCardz.com/feeds/highscores.php

That one anyone can use them.

So highscores.php looks like the following:

//connect to the database
include_once "../connect.php";
//
// Make sure the page is not cached
//
header( 'Expires: Sat, 26 Jul 1997 05:00:00 GMT' );



$sql = "select userID, username, score ";
$sql.= " from c_user ";
$sql.= " where isGuest = 'N' ";
$sql.= " order by score desc limit 10";
$q = executeQuery($sql);
?>
<table width=100%>
<tr>
   <td class=label>Position</td>
   <td class=label align=right>Score</td>
   <td class=label>Player</td>
</tr>


</table>

Step 5:
Test, Test, Test...

Go to your iGoogle page, in the developer gadget you just added type the location of your XML file.

Watch the magic.

Notes and More:

Google caches your gadgets, they refresh the cached copy at least once a day. Check your cached copy before releasing to the world.

Try going putting the url of your data file in your browser...if it crashes or errors you have problems.

Try putting the url of your xml file in your browser...if it crashes or errors you have problems.

You can create the same type of gadget without using ajax. (PHP can generate xml docs...or you can do print statements to write the xml file)

Odd things happen with cached data, that could be the source of all your headaches.

Firebug is your friend (firebug's a javascript debugger plugin for firefox)