Xbox Live Gamercard - PSN - Wii in Profile Field

 

I made several little javascripts that allow users to display their Xbox Live gamercard and/or Playstation Network ID and/or Wii Friend Code in their profile field. (I don't have a Wii or PS3 so the images in the preview are fake, but this code works, I've tested it.)

Preview


First, go to your admin control panel.
Then, on the left side select Profile Fields
Now, for new field, select 1 line text and hit Submit
At the next screen, use the following settings:

Settings

Spoiler: click to toggle

XBOX LIVE GAMERCARD SETTINGS
Title: Xbox Live Gamertag
On Registration: Yes
Admin Only Edit: No
Show field in topics: Yes
Maximum input length: 20

Click Submit


PLAYSTATION NETWORK ID SETTINGS
Title: Playstation Network ID
On Registration: Yes
Admin Only Edit: No
Show field in topics: Yes
Maximum input length: 20

Click Submit


WII FRIEND CODE SETTINGS
Title: Wii Friend Code
On Registration: Yes
Admin Only Edit: No
Show field in topics: Yes
Maximum input length: 20

Click Submit

Now, from the left side of your admin control panel, select Board Templates
Put the following code(s) in Javascripts

Javascript

Spoiler: click to toggle

XBOX LIVE GAMERCARD JAVASCRIPT

Code:

 


<script type="text/javascript">
//<![CDATA[
$(function () { var ddcalled = "Xbox Live Gamertag"; $("dl.user_profile > dt:contains("+ddcalled+") + dd").each(function () { var item = $(this).text(); $(this).html('<a href="http://live.xbox.com/member/'+item+'"><img width="204" border="0" src="http://www.glop.org/gamercard/card/'+item+'-large.png" class="gamercard" /></a>');});});
//]]>
</script>


PlAYSTATION NETWORK ID JAVASCRIPT

Code:

 


<script type="text/javascript">
//<![CDATA[
$(function () { var ddcalled = "Playstation Network ID"; $("dl.user_profile > dt:contains("+ddcalled+") + dd").each(function () { var item = $(this).text(); $(this).html('<img width="204" border="0" src="http://pid.us.playstation.com/user/'+item+'.jpg" class="psntag" />');});});
//]]>
</script>


WII FRIEND CODE JAVASCRIPT

Code:

 


<script type="text/javascript">
//<![CDATA[
$(function () { var ddcalled = "Wii Friend Code"; $("dl.user_profile > dt:contains("+ddcalled+") + dd").each(function () { var item = $(this).text(); $(this).html('<div id="wiitag_bg"><div id="wiitag_text">' + item + '</div></div>');});});
//]]>
</script>


IMPORTANT!!! //<![CDATA[ and /]]> must be on their own line!!!! If the code is on a single line, problems will occur.


Then click Edit Board Template located at the bottom.


CSS

Spoiler: click to toggle

You only need to edit the CSS once, it will work for all gamertags/friend codes


At the Admin Control Panel, select Themes from the left.

Click on Edit theme Appearance

Find the following lines in your CSS and change them accordingly (Hint: use ctrl + F to find characters faster).









Add the following line:



Add the following lines for the Wii Friend Code

#wiitag_bg {
background:url(http://209.85.62.24/132/33/0/f123597/wiifriendcodebg.png) center no-repeat;
width:204px;
height:37px;
}

#wiitag_text {
padding:11px 10px 0px 0px;
color:#404040;
text-align:right;
font-weight:900;
font-size:9pt;
}

Click the Edit CSS button at the bottom and your done!

If you have any problems with these codes, post your problems below. Include your board url so that I can take a look at your code. Thanks.

McKee