Postbit Social Network Icons

Postbit Social Network Icons

Mod Version: 1.00, by stoute

vB Version: 4.2.0	Rating: (2 votes - 3.00 average)	Installs: 16
Released: 02 Sep 2012	Last Update: Never	Downloads: 120
Not Supported Template Edits Additional Files Re-usable Code Translations

This is a quick template modification that works with the "User Profile Fields" and adds a social network icon for; Twitter, Facebook, Google+, and YouTube. Once Completed you will see this:
Image Removed by Staff (image changed with new domain owner etc)

This will not work in the postbit_legacy. Use this for postbit_legacy template: HERE

Spoiler (click to open)

This is a quick template modification that works with the "User Profile Fields" and adds a social network icon for; Twitter, Facebook, Google+, and YouTube. Once Completed you will see this:

This will not work in the postbit. Use this for postbit template: HERE

Step 1: Create your User Profile Fields

Make Custom Profile Fields for each of the four social networks; Twitter, Facebook, Google+, and Youtube.

ACP> User Profile Fields> Add New User Profile Field

Profile Field Type: Single-Line Textbox

Create your profile fields as below. you can leave "default value" blank.

Make one of these for each of the social networks. Once you have created your fields for Twitter, Facebook, Google+, and YouTube.

Continue to Step 2

Step 2: Locate the Correct Field Names

ACP> User Profile Fields> User Profile Field Manager

Take note of your "field name". Below you will find a screen shot; notice I have labeled the field names A - D. for refrence a = twitter; b = facebook; c = google+; d = youtube

Continue to Step 3

Step 3: Adding the code

ACP> Styles & Templates> [Your Style]> Edit Templates> Postbit Templates > postbit_legacy

Find:

Code:

{vb:raw post.skypeicon}

Add After the next </vb:if>:

Code:

<!-- Social Networking -->
</br>
<!-- Twitter -->
<ul>
<li class="right">
<vb:if condition="$post['A']">
            <a href="http://twitter.com/{vb:raw post.{A}" alt="Twitter" TARGET="_blank"><img src="./images/site_icons/socialpopup/twitter.png" /></a>
</vb:if>
</li>
<!-- Facebook -->
<li class="right">
<vb:if condition="$post['B']">
            <a href="http://facebook.com/{vb:raw post.B}" alt="Facebook" TARGET="_blank"><img src="./images/site_icons/socialpopup/facebook.png" /></a>
</vb:if>
</li>
<!-- Google+ -->
<li class="right">
<vb:if condition="$post['C']">
             <a href="http://plus.google.com/{vb:raw post.C}" alt="Google+" TARGET="_blank"><img src="./images/site_icons/socialpopup/googleplus.png" /></a>
</vb:if>
</li>
<!-- YouTube -->
<li class="right">
<vb:if condition="$post['D']">
            <a href="http://youtube.com/{vb:raw post.D}" alt="Youtube" TARGET="_blank"><img src="./images/site_icons/socialpopup/youtube.png" /></a>
</vb:if>
</li>
</ul>
<!-- #Social Networking -->

CHANGE THE RED LETTERS above or this will NOT work!

Step 4: Images!!!

Upload the extracted zip to your forum root.

Step 5: Enjoy!

Attached Images

Attached Files

images.zip (3.8 KB, 143 views)

Step 1: Create your User Profile Fields

Make Custom Profile Fields for each of the four social networks; Twitter, Facebook, Google+, and Youtube.

ACP> User Profile Fields> Add New User Profile Field

Profile Field Type: Single-Line Textbox

Create your profile fields as below. you can leave "default value" blank.

Image Removed by Staff (image changed with new domain owner etc)

Make one of these for each of the social networks. Once you have created your fields for Twitter, Facebook, Google+, and YouTube.

Continue to Step 2

Step 2: Locate the Correct Field Names

ACP> User Profile Fields> User Profile Field Manager

Take note of your "field name". Below you will find a screen shot; notice I have labeled the field names A - D. for refrence a = twitter; b = facebook; c = google+; d = youtube

Image Removed by Staff (image changed with new domain owner etc)

Continue to Step 3

Step 3: Adding the code

ACP> Styles & Templates> [Your Style]> Edit Templates> Postbit Templates > Postbit

Find:

Code:

{vb:raw post.skypeicon}

Add After:

Code:

<!-- Social Networking -->
<!-- Twitter -->
<vb:if condition="$post['A']">
            <a href="http://twitter.com/{vb:raw post.A}" alt="Twitter" TARGET="_blank"><img src="./images/site_icons/socialpopup/twitter.png" /></a>
</vb:if>
<!-- Facebook -->
<vb:if condition="$post['B']">
            <a href="http://facebook.com/{vb:raw post.B}" alt="Facebook" TARGET="_blank"><img src="./images/site_icons/socialpopup/facebook.png" /></a>
</vb:if>
<!-- Google+ -->
<vb:if condition="$post['C']">
             <a href="http://plus.google.com/{vb:raw post.C}" alt="Google+" TARGET="_blank"><img src="./images/site_icons/socialpopup/googleplus.png" /></a>
</vb:if>
<!-- YouTube -->
<vb:if condition="$post['D']">
            <a href="http://youtube.com/{vb:raw post.D}" alt="Youtube" TARGET="_blank"><img src="./images/site_icons/socialpopup/youtube.png" /></a>
</vb:if>
<!-- #Social Networking -->

CHANGE THE RED LETTERS above or this will NOT work!

Step 4: Images!!!

Upload the extracted zip to your forum root.

Step 5: Enjoy!

Image Removed by Staff (image changed with new domain owner etc)

Download

images.zip (3.8 KB, 128 downloads)

Screenshots

vBulletin LTS

Spoiler (click to open)