Mini Mods - SteamProfile Integration

Description
Integrates SteamProfile badges into your forum. Allows forum users to see the current status of other members, including, adding them as Steam firends, viewing their profile, joining their current game and viewing their Team Fortress 2 backpack. The script accepts Steam IDs (ex STEAM_X:X:XXXXXXXX), Steam Community IDs (17 digit number) or Steam Community Aliases. I have included my vB4 skin as the default for the widget.

Example Of The Badges (Demo Coming Shortly)

Installation

1. Download attached "steamprofile_vb4_1.0.1.zip".
2. Expand and upload the "steamprofile" folder into your forum's root directory.
3. Go to AdminCP > Styles & Templates > Style Manager > Common Templates.
4. Add the following to a new line at the bottom of your "headinclude":
   

   <script type="text/javascript" src="steamprofile/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="steamprofile/steamprofile.js"></script>

5. Save.
6. Go to AdminCP > User Profile Fields > Add New User Profile Field > Single-Line Text Box.
7. Enter in what ever title and description you want.
8. Optional To only accept Steam IDs add the following to "Regular Expression":
   

   STEAM_[0-9]:[0-9]:[0-9]{4,}

9. Change the "Display Page" option to "Options: Other".
10. Save.
11. Make note of the field number (ex field5).
12. Go to AdminCP > Styles & Templates > Style Manager > Edit Templates > Postbit Templates > postbit_legacy.
13. Find the following line:
    

    				<vb:if condition="$post['title'] OR $show['messageicon']">

14. Replace fieldX, in both locations, in the following line of code with your noted field number from above. Then add the code to a new line after the previous line:
    

    				<vb:if condition="$post['fieldX']"><div class="steamprofile" title="{vb:raw post.fieldX}" style="float: right;"></div></vb:if>

15. Save. Finished.

Additional Credits
Barracuda the author of SteamProfile.
drpepper of TF2Maps.net for his original vB 3.8.2 mod.

Upgrade Instructions (1.0.0 > 1.0.1)

1. Download attached "steamprofile_vb4_1.0.1_upgrade.zip".
2. Expand and upload the "steamprofile" folder into your forum's root directory. Replacing all files.
3. Finished.

Version History
1.0.0 - Initial Release
1.0.1 - Fixed Quote Overlap Issue

[d3vilfish666]

I maybe off the ball here but I think if you close your browser then empty your browser cache and then relogin to your website it will show the correct status. { both ie 7/8 & ff 3.x have settings in options to delete browser history cookies cache etc automaticly}
Info for the author if there is anyway to push the cookie to refresh that would be great.

[Chainspell]

k i got it to work except for the images.

the images are displayed fine (the buttons to add friends, etc) in firefox. but in IE the address for the images is: http://www.tf2tactics.com/steamprofi...add_friend.png

anyone got a clue on how to fix this? i've been digging around...

[Chainspell]

http://www.tf2tactics.com/showthread...&p=480#post480

i also edited the colors and some of the icons to look exactly like the friends list on steam. if you guys want me to upload my steamprofile folder just let me know

anyone been able to fix the icon thing yet?

[Chainspell]

hahaha!!! i fixed it!

for those who are wondering, i commented out those pesky double src url thingy (added the red comment tags) on steamprofile.js:

		// load templates
		profileTpl = $(configData.find('templates > profile').text());
		loadingTpl = $(configData.find('templates > loading').text());
		errorTpl   = $(configData.find('templates > error').text());
		
		// add theme path to image src
		//profileTpl.find('img').attrAppend('src', themePath);
		//loadingTpl.find('img').attrAppend('src', themePath);
		//errorTpl.find('img').attrAppend('src', themePath);

then on steamprofile.xml, changed all SRC= images relative to root path. full steamprofile.xml code:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<steamprofile-config>
	<vars>
		<!-- The Theme used by SteamProfile. Must be the name of a folder inside the "themes/" folder. -->
		<var name="theme">default</var>
		<!-- If set to true, the slider menu with icon links will be shown. -->
		<var name="slidermenu">true</var>
		<!-- If set to true, the banner of the currenty played game will be shown in the badge background. -->
		<var name="gamebanner">true</var>
	</vars>
	<!-- The HTML templates for DOM manipulation. Change only if you know what you're doing. -->
	<templates>
		<profile>
		<![CDATA[
			<div class="sp-bg-game">
			<div class="sp-bg-fade">
			<div class="sp-badge">
				<div class="sp-avatar">
					<a target="_blank" href="">
						<img src="" width="32" height="32" alt="" />
					</a>
				</div>
				<div class="sp-info">
					<a target="_blank" href=""></a><br />
				</div>
				<div class="sp-extra">
					<div class="sp-handle"></div>
					<div class="sp-content">
						<a class="sp-joingame" title="Join Game" href=""><img src="/steamprofile/themes/default/icon_join_game.png" width="16" height="16" alt="" /></a>
						<a class="sp-addfriend" title="Add to Friends" href=""><img src="/steamprofile/themes/default/icon_add_friend.png" width="16" height="16" alt="" /></a>
						<a class="sp-viewitems" title="View Items" href="" target="_blank"><img src="/steamprofile/themes/default/icon_view_items.png" width="16" height="16" alt="" /></a>
					</div>
				</div>
			</div>
			</div>
			</div>
		]]>
		</profile>
		<loading>
		<![CDATA[
			<div class="sp-loading">
				<img src="/steamprofile/themes/default/loading.gif" width="32" height="32" alt="" />
				Loading...
			</div>
		]]>
		</loading>
		<error>
		<![CDATA[
			<div class="sp-error">
				<img src="/steamprofile/themes/default/error.png" width="16" height="16" alt="Error" />
			</div>
		]]>
		</error>
	</templates>
</steamprofile-config>

[hulkster]

Hi

i have a problem

invalid profile alias

it's looks like js dont work
but on VB option js i on

[DJ29Joesph]

Worked great, thanks :P

[hulkster]

can you help me please ?

[Chainspell]

you cant put in your steam profile login for some reason, it doesnt work. you have to use STEAM_X:X:XXXXXXXX or Steam Community IDs (17 digit number)

also i didnt do this part (number 8 in the guide):

Optional To only accept Steam IDs add the following to "Regular Expression":
STEAM_[0-9]:[0-9]:[0-9]{4,}

because you can't put in the 17 digit number if you do.

[hulkster]

Hi
I do everithings,couple times
i even miss nr 8
but still have this



I have Loadnig and then this /\ (on the sreen)

we rebuild code but don have js adsons

<vb:if condition="$post['fieldX']"><iframe src="http://steamprofile.com/steam/profile/steamprofile/{vb:raw post.fieldX}.png" align="right" width="254" height="48" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe></vb:if>

[Chainspell]

whats your url? you have to have the .js files