Social Networks in Postbit

Social Networks in Postbit

Mod Version: 1.00, by zerovenom

vB Version: 3.8.4	Rating: (2 votes - 5.00 average)	Installs: 19
Released: 11 Jan 2010	Last Update: Never	Downloads: 96
Not Supported Template Edits Re-usable Code

My Social Networks

I'd like to add my first modification because I feel like I just leech everything and don't give back, so I decided to start trying.

I don't take credit for this mod, it's based off of UKBusinessLive's Twitter profile link.
UKBL ~ Twitter profile link on Postbit ~ Clickable

I simply edited it and added 2 more for Facebook and MySpace as well.

This should work with vBulletin 3.7 and Up. I'm not sure as I've only tested on 3.8.4. If you can test this on previous versions, it would be great if you can post that. Thanks!

Here's a live demo on my development site: http://www.waloosh.com/showthread.php?p=35

You'll need to create 3 new User Profile Fields.
AdminCP>User Profile Fields>Add New User Profile Field

Profile Field Type: Single-Line Text Box

Title: Twitter Username
Description: Please Enter your Twitter Username
Profile Field Category: Choose your category (if you have extra custom ones)
Default Value: Leave Blank
Max length of allowed user input: 20
Field Length: Leave Default
Display Order: Choose any number that hasn't already been taken in your profile fields.
Field Required: No
Field Editable by User: Yes
Private Field: No
Field Searchable on Members List: No
Show on Members List: Yes
Regular Expression: Leave Blank

Save.

You'll need to make one for Facebook, Twitter, and MySpace using the same settings except you need to change the names to the proper social network.

For Display Order, I used 5 for Twitter, 6 for Facebook, and 7 for MySpace.
If you've made previous custom profile fields, then please enter your own numbers.

Remember which number you chose for Display Order.

Now go to AdminCP>Styles & Templates>Style Manager>Edit Templates and choose your template.

Scroll down and choose Postbit Templates. You can edit either postbit or postbit_legacy

Find:

Code:

<if condition="$post['joindate']"><div class="postbit">$vbphrase[join_date]: $post[joindate]</div></if>

And add this before:

Code:

<div align="center">
My Social Networks:<br /><br />
<if condition="is_member_of($bbuserinfo, 2, 6, 7, 9)">
<if condition="$post['field5']">
<a href="https://twitter.com/$post[field5]" target="_blank">
<img alt="Twitter" border="0" src="$stylevar[imgdir_misc]/twitter.png"/></a></if>
&nbsp;&nbsp;
<if condition="$post['field6']">
<a href="https://facebook.com/$post[field6]" target="_blank">
<img alt="Facebook" border="0" src="$stylevar[imgdir_misc]/facebook.png"/></a></if>
&nbsp;&nbsp;
<if condition="$post['field7']">
<a href="https://myspace.com/$post[field7]" target="_blank">
<img alt="MySpace" border="0" src="$stylevar[imgdir_misc]/myspace.png"/></a></if>
</div>
</if>

This is the default code that I created, but felt like it needed work. This style is still available to use if you don't need any special look or feel to it.

Everything in red should be the only items you need to change. However, you may need to edit it further for different styles.

To change which usergroups can see these links, you can edit this code with the usergroup number you want to be able to view them.

Code:

<if condition="is_member_of($bbuserinfo, 6, 7, 9)">

Or you can simply delete this code to allow everybody to view them, but you'll also need to delete the </if> at the very end of the full code.

If you'd like to create a box specifically for it for more design and better formatting, then continue reading--

I don't take credit for this change either.
This modification is based off of jacki's Pro. Postbit Legacy.
Pro. Postbit Legacy

You'll need to edit your template's CSS by going here:
AdminCP>Styles & Templates>Style Manager>All Style Options

Scroll down to Additional CSS Definitions and in the second box, scroll all the way down and add:

Code:

.mysocialnetworks {
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
background-color: #FFFFFF;
border-top: 1px solid #dadada;
border-right: 2px solid #dadada;
border-left: 1px solid #dadada;
border-bottom: 2px solid #dadada;
margin-bottom: 3px;
}

The items highlighted in red can be changed. These are the image codes and can be changed to your templates colors.

Now, you basically just need to follow the previous steps for adding it to your postbit or postbit_legacy. Except with minor changes to include the CSS and center it.

Find:

Code:

<if condition="$post['joindate']"><div class="postbit">$vbphrase[join_date]: $post[joindate]</div></if>

And add this before:

Code:

<div align="center" class="mysocialnetworks">
My Social Networks:<br /><br />
<if condition="is_member_of($bbuserinfo, 2, 6, 7, 9)">
<if condition="$post['field5']">
<a href="https://twitter.com/$post[field5]" target="_blank">
<img alt="Twitter" border="0" src="$stylevar[imgdir_misc]/twitter.png"/></a></if>
&nbsp;&nbsp;
<if condition="$post['field6']">
<a href="https://facebook.com/$post[field6]" target="_blank">
<img alt="Facebook" border="0" src="$stylevar[imgdir_misc]/facebook.png"/></a></if>
&nbsp;&nbsp;
<if condition="$post['field7']">
<a href="https://myspace.com/$post[field7]" target="_blank">
<img alt="MySpace" border="0" src="$stylevar[imgdir_misc]/myspace.png"/></a></if>
</div>
</if>

Since Facebook's Username system is fairly new, a lot of people don't know it exists as Facebook never fully advertised it. In order to create a Facebook username, you need to simply click on "Settings" on Facebook and you'll see "Username", click on "Change" and you can change your Facebook username to anything you want and be able to use it for this mod.

If you'd like further help, please click Install and I'll be more than happy to provide support.

The uploaded file includes the 20x20 icons. Place these in your template's images "misc" folder.

Download

mysocialnetworks.zip (15.9 KB, 109 downloads)

Screenshots

vBulletin LTS