February 13, 2011

Xbox Live Gamercard Gadget for Blogger

Example Xbox Gamercar
For a recent design project I was asked if it was possible to display an Xbox Live Gamercard in a Blogger site.

Thanks to this useful guidance from Jamie Huskisson I discovered it was surprisingly easy to achieve and have now created a simple Blogger gadget for gamers to easily add their own Xbox Gamertag to Blogger blogs.

Manually add an Xbox Gamercard Gadget to your Blogger site

If you would prefer to control how your Gamercard appears, you can use the code below to add an Xbox Gamercard to your site. Be sure to replace "your_gamertag" with your Xbox Live Gamertag:

<iframe src='http://gamercard.xbox.com/your_gamertag.card' class='gamercard' width='204' height='141' scrolling='no' frameborder='0'></iframe>

Notes about the Xbox Gamercard

The Gamercard will only display to users who are logged into Xbox live.

The gadget I have developed displays a notifying background image when visitors are not logged into Xbox Live.

If you are installing the gadget manually, I would advise you to add some styling code to display a similar notification if the Gamercard is unable to load:

<div style="text-align: center">
<iframe src='http://gamercard.xbox.com/sniperfired.card' class='gamercard' width='204' height='141' scrolling='no' frameborder='0' style="background: url(https://lh3.googleusercontent.com/_haw3kJHnOsc/TVgCGkF4HuI/AAAAAAAABoE/YPORAFFOd5k/s800/gamercard-bg.png) center no-repeat;"></iframe>

What do you think?

I realise that many Gaming bloggers choose to use Blogger for their publishing platform and hope this gadget will be useful for many of you.

Please feel free to leave your comments and opinions below.

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy