Show Thread Enhancements - Linked Profile Postbit Legacy Enhancement

First of all a SHOUT OUT to boydy and his template modification titled Social Networking in Postbit / Postbit Legacy.

His thread was ticked as being re-usable code, and I was going to post this over in that thread however thought that the information I was/am about to give could benefit more than just people interested in doing Social Media, it could benefit a wide range of websites and so those not interested in Social Media may miss out on the opportunity to have this on their site.

Okay so start off with let me just say that I am far from a developer and all of my knowledge in vBulletin is self taught, and learned from reading through threads and articles right here on vBulletin.org.

WHAT DOES THIS DO?!?
This will add a number of custom fields to your vBulletin Board, which if information is entered into them will display a small image on your Postbit Legacy - primarily used on my website to link numerous user accounts.

DOES THIS WORK ON POSTBIT?
It should work on both Postbit and Postbit Legacy however since day one on my website I have only ever used Postbit Legacy, however will do my best to support Postbit enhancement as well - but just know you may have to do some of the work yourself as I won't be able to hold your hand through every step of the way.

Okay so here we go with my instructions:

.::-=// Step One \\=-::.

The first step you will need to go through is creating the custom profile fields for the following:

Profile Field Type - Single-Line Text Box
Title - Twitter
Description - Add a link to your Twitter profile.
Field Searchable on Members List - NO
Show on Members List - NO

Profile Field Type - Single-Line Text Box
Title - Facebook
Description - Add a link to your Facebook profile.
Field Searchable on Members List - NO
Show on Members List - NO

Profile Field Type - Single-Line Text Box
Title - MySpace
Description - Add a link to your MySpace profile.
Field Searchable on Members List - NO
Show on Members List - NO

Profile Field Type - Single-Line Text Box
Title - Bebo
Description - Add a link to your Bebo profile.
Field Searchable on Members List - NO
Show on Members List - NO

Profile Field Type - Single-Line Text Box
Title - Youtube
Description - Add a link to your Youtube profile.
Field Searchable on Members List - NO
Show on Members List - NO

^^^ PLEASE NOTE: The Custom Profile Fields above are primarily for Social Media, if you a running a sports website you may want to create things such as:
ESPN - Add a link to your ESPN Profile
Sports Force - Add a link to your Sports Force Profile

Or if you run a Webmasters Website stuff like:
WordPress - Add a link to your WordPress Profile
vBulletin.com - Add a link to your vBulletin.com Profile
vBulletin.org - Add a link to your vBulletin.org Profile

More or less Custom Profile Fields for whatever suits your website's niche.

.::-=// Step Two \\=-::.
Gather up your images that you wish to be displayed in your Postbit, I haven't even bothered to attempt to upload anything here because there are so many better graphic designers out there than me, and the possibilities are endless with this modification that no matter how many I added into the attachment there would still be countless requests for many other websites.

Once you have all of your images, for the websites you are willing your members to link to on their postbit simply upload them to the following destination:

www.yoursite.com/yourforum/images/postbit_social/

.::-=// Step Three \\=-::.
Open Template - Postibit Templates -> postbit_legacy
Find -

 <div class="imlinks">
                    {vb:raw post.icqicon} {vb:raw post.aimicon} {vb:raw post.msnicon} {vb:raw post.yahooicon} {vb:raw post.skypeicon}
                </div>
            </vb:if>

Add Under -

<vb:if condition="$post['fieldx']">
<a target ="blank" href="http://twitter.com/#!/{vb:raw post.fieldx}"><img src="images/postbit_social/twitter.png" onmouseover="this.src='images/postbit_social/twitter_a.png'" onmouseout="this.src='images/postbit_social/twitter.png'" alt="Follow {vb:raw post.username} On Twitter" /></a>
</vb:if>

<vb:if condition="$post['fieldx']">
<a target ="blank" href="http://www.facebook.com/profile.php?id={vb:raw post.fieldx}"><img src="images/postbit_social/facebook.png" onmouseover="this.src='images/postbit_social/facebook_a.png'" onmouseout="this.src='images/postbit_social/facebook.png'" alt="Add {vb:raw post.username} on Facebook" /></a>
</vb:if>

<vb:if condition="$post['fieldx']">
<a target ="blank" href="http://www.myspace.com/{vb:raw post.fieldx}"><img src="images/postbit_social/myspace.png" onmouseover="this.src='images/postbit_social/myspace_a.png'" onmouseout="this.src='images/postbit_social/myspace.png'" alt="Add {vb:raw post.username} on MySpace" /></a>
</vb:if>

<vb:if condition="$post['fieldx']">
<a target ="blank" href="http://www.bebo.com/Profile.jsp?MemberId={vb:raw post.fieldx}"><img src="images/postbit_social/bebo.png" onmouseover="this.src='images/postbit_social/bebo_a.png'" onmouseout="this.src='images/postbit_social/bebo.png'" alt="Add {vb:raw post.username} on Bebo" /></a>
</vb:if>

<vb:if condition="$post['fieldx']">
<a target ="blank" href="http://www.youtube.com/user/{vb:raw post.fieldx}"><img src="images/postbit_social/youtube.png" onmouseover="this.src='images/postbit_social/youtube_a.png'" onmouseout="this.src='images/postbit_social/youtube.png'" alt="Visit {vb:raw post.username}'s Youtube Channel" /></a>
</vb:if>

Then click Save - travel to your profile and enter your profile links, click save and then check out your new postbit with the images.

Obviously:
1) Replace all fieldx with the corrosponding field number given to you in the User Profile Field Manager.

2) The above is a list for Social Media. These can be easily edited to what you want - for example if you were putting vBulletin.org the link would be:
https://vborg.vbsupport.ru/member.php?u={vb:raw post.fieldx}

- To get the correct link go to the website you wish to link to, log in and click on your profile to see what the websites correct profile link is.

- For the above vb.org link to work (using my details) I would go into my profile and put 240499 in the Custom Profile Field for vBulletin.org - therefore the image in your postbit legacy when clicked would take me to https://vborg.vbsupport.ru/member.php?u=240499

Let me know if you have any questions, issues and I will do my best to support, I do not mind re-writing some of the links to help you out if you tell me what websites you are trying to get to link up HOWEVER I do have my website to worry about and work on, and you can not expect people to hold your hand while trying to customize your website - this is relatively simple.

[merk_aus]

RESERVED FOR FAQ's / GENERAL ASSISTANCE

[mikem164]

Screenshots plz!

[merk_aus]

Screenshot has been added as requested - it is hard to add a screenshot as it depends on what you want to have your profiles linked to.

All of those buttons in the screenshot link directly to the profile themself whereas the other modification mentioned above is a messy way to do it mine is more direct, and is set up to allow you to select what type of accounts you want people to link to.

If you have any other questions please feel free to ask.

[clutchthese]

my images are showing up to the right on my avatar... how can i get them below the yahoo icon and skype icon...or better yet, on the same line as them.

[nomoreturn]

not works for me in vBulletin Version 4.1.3

[mattyphatty]

Works great here, I'm linkin it thanks! vb 4.1.5