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.

Add your Xbox Live Gamercard to your Blogger powered site

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1u5rK-temp9X7eNQ8XBDT9k54i3lr1ZhkKRRd6Kwi_haZ119P6_J_CYztVtK97qmZQubhxrnSNutXR7SXoQ2U3ndQVllXJJhv6yFIUEvfDOsshIjcLmJRComx_iD2y6K3KHhtinNxmHNg/s800/gamercard-bg.png) center no-repeat;"></iframe>
</div>

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.