For some odd reason you're unable to see my GamerBar360.

If you're seeing this message, you do not have Flash installed or JavaScript enabled. Please install the latest version of Adobe Flash and/or enable JavaScript.

» Requirements

  • You need an account at 360Voice.com (it’s free!)
  • You need a web site/blog (you can’t run this off a business card or t-shirt, but it would be cool!)
  • You need access to your web server to upload files
  • You’ll need the latest version of GamerBar360
  • You’ll need at least an 800×145 area to place the GamerBar on your site

Optional:

  • You should be playing your 360 – otherwise it gets real testy. >:{

» Installation

  • Unzip the contents to a directory of your choice on your local system.
  • Using your favorite FTP app (I like FileZilla), upload gamerbar360.swf to a directory on your web server. I’d suggest /gamerbar360 but that’s just me.

Optional (but recommended)

  • I highly recommend using the included SWFObject script. It’s my favorite way of embedding Flash. It’s a small JavaScript file you link to your page. It’s web standards compliant and it’s much easier to implement than using the standard <object> and <embed> tags – plus you won’t get that annoying "click to activate" warning or border. Upload the swfobject.js file (located in the swfobjectx-x folder) into a directory on your web server preferably where all your other JavaScript resides; (I’ll use /js as the path in this document). More on this under Configuration.
  • Note:
    I’ve included the latest version of SWFObject; however I recommend checking the SWFOjbect web site for the latest version as I may not have updated the package with the latest version by the time you’re reading this. Just an FYI.

» Configuration

Ah yes, the fun part!

Now that our files are on the server, we just have to plug a few lines of code into our page(s).

If you’ve followed my recommendation regarding SWFObject…the following should be fairly painless.

  1. I’d suggest making a backup of the file(s) you’re about to edit. Although this isn’t rocket science, if you muff something up, you’ll be glad you made a copy to recover. Don’t say I didn’t warn you!
  2. Place a <script> link to SWFObject in your page’s <head></head> section. This location may be found a header file (make sure the source path is appropriate to your setup):
    <head>
    <!-- start swfobject link -->
    <script type="text/javascript" src="/js/swfobject.js"></script>
    <!-- end swfobject link -->
    </head>
  3. Within the <body></body> of the page you want to embed the gamerbar, place the following:
    <div id="gamerbar360">
    <!-- ------------------------------
    GamerBar360
    Author: McWilliams
    Web: http://gamerbar360.com/
    Powered by: 360Voice.com
    Note: The contents of this area are not to be altered
    ------------------------------- -->
    <p style="font-size:14px;margin-top:0;">For some odd reason you're unable to see my <a href="http://gamerbar360.com/" title="Get your own GamerBar360!">GamerBar360</a>.</p>
    <p style="font-size:12px;color:red;margin-top:0;">If you're seeing this message, you do not have Flash installed or JavaScript enabled. Please install the latest version of <a href="http://www.adobe.com/go/gntray_dl_getflashplayer">Adobe Flash</a> and/or enable JavaScript.</p>
    </div>
    <script type="text/javascript">
    //<![CDATA[
    var so = new SWFObject("/gamerbar360/gamerbar360.swf", "GamerBar360", "800", "145", "8", "#666666");
    so.addVariable("gamertag", "ENTER YOUR GAMERTAG HERE"); // required
    so.addVariable("bkg_alpha", 100); //optional: range is 0 - 100
    so.addParam("wmode", "transparent"); // optional: use if changing transparency
    so.write("gamerbar360");
    //]]>
    </script>

Let’s go over how this works:

  • We inserted a <div></div> tag with an ID of "gamerbar360"; this serves two purposes:
    • To hold our GamerBar360
    • To alert the visitor that they either don’t have the latest Flash player installed or JavaScript enabled – the contends of the div will show.
  • We then configured our JavaScript to load the gamerbar360.swf file into the <div id="gamerbar360"></div> and set our Xbox Live Gamertag (and any optional variables or parameters).
  • Once the page loads…the script reads in our info, does it’s magic and draws the gamerbar inside the gamerbar360 div.

Note:
You can give the div any ID you want, as long as it’s unique and is specified in the JavaScript section.

There…that wasn’t so bad, now was it?

Hold on there cowboy! We’re not done yet, so don’t go saving your file and trying to view it. You may just be disappointed and probably ticked-off at me. Let’s make sure you have it configured properly.

  1. Make sure all necessary files are uploaded to your web server – duh!
  2. Verify the path to swfobject.js in Step 2 above is correct on your site
  3. Verify the path to gamerbar360.swf in Step 3 above is correct on your site
  4. (This is where the magic happens, so pay attention)… Make sure you plug your gamertag in the line that reads:
    so.addVariable("gamertag", "ENTER YOUR GAMERTAG HERE"); // required
  5. NOW you can go ahead and save your edits and test out the bar.
  6. Did something go wrong and and now nothing works? Did you follow Step 1?
  7. If you can’t figure it out, jump over to the GamerBar360 forums and post your issue.