Postbit Legacy Social Network Icons

[stoute]

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:
https://vborg.vbsupport.ru/

This will not work in the postbit. Use this for postbit template: HERE (https://vborg.vbsupport.ru/showthread.php?t=287387)

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.

https://vborg.vbsupport.ru/

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

https://vborg.vbsupport.ru/

Continue to Step 3

Step 3: Adding the code

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

Find:
{vb:raw post.skypeicon}



Add After the next </vb:if>:

<!-- 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!

https://vborg.vbsupport.ru/

[Merjawy]

Should use the correct twitter logo https://twitter.com/logo

[stoute]

Added resized twitter icon to the attachments

[Gottcha]

installed ... followed directions and not showing up ...

[Gottcha]

This is the code i added with the correct field numbers inserted:

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

[JamalFree]

i will add this for my posbit thanx ..........

[Harpo]

Real cool. Going to install sometime this week.

[GameOverViper]

Followed instructions, not working. Tried different placements around the skype icon code and still nothing. Not showing up at all on postbit.

[TandyServices]

Here is my code that works for 4.2.2.. Difference is that I have Postbit Tabs. But will work..


<!-- Twitter -->
<vb:if condition="$post['field#']">
<a href="https://twitter.com/{vb:raw post.field#}" TARGET="_blank"><img src="/images/site_icons/socialpopup/twitter.png" alt="Twitter"> </a>
</vb:if>

<!-- Facebook -->
<vb:if condition="$post['field#']">
<a href="https://www.facebook.com/{vb:raw post.field#}" TARGET="_blank"> <img src="/images/site_icons/socialpopup/facebook.png" alt="Facebook"> </a>
</vb:if>

<!-- Google Plus -->
<vb:if condition="$post['field#']">
<a href="https://plus.google.com/{vb:raw post.field#}" TARGET="_blank"> <img src="/images/site_icons/socialpopup/googleplus.png" alt="Google+" /> </a>
</vb:if>

<!-- YouTube -->
<vb:if condition="$post['field#']">
<a href="http://www.youtube.com/user/{vb:raw post.field#}" TARGET="_blank"> <img src="/images/site_icons/socialpopup/youtube.png" alt="Youtube" /></a>
</vb:if>


The above code will line up the icons side by side. On in the on icon on each line like the above code. Of course replace # with your field number

[stoute]

Add on no longer supported by myself... if someone wants to take over, please do.

[MentorBR]

this works in 4.2.5?
Are these icons below the avatar?

[MentorBR]

I tried to add this to my forum and it doesn't work. Does anyone know of another method to do?