The Arcive of Official vBulletin Modifications Site.

[CM] Facebook & Twitter Badge · **Released**: 08-09-2012

This was brought to you by ChiNa-Man

First of all I am a free soul, So if one of you guys decided to post this on another forum or a website, I would be appreciated if you give some CREDITs to the Developer simply typing his name: Credits to: ChiNa-Man, and do not CHANGE or DELETE the ORIGINAL CONTENT! Thank you!

:::::::::::::::::::::::::::::::::::::::::::::

Hey everyone, This mod is for Facebook & Twitter! Its like a Badge for your forumhome page! And it will appear in the corner of your homepage! A big thanks to MybbExtras.Net for giving me full permission and support to let us re-use some of their amazing plugins as a vBulletin mod! I am an old mybb board owner, and I decided to use all what I have learned about css and html, and forward it to you guys and to make vBulletin grow further! This is an amazing and easy setup, and I use it on my own forum too! I hope you will like this one!

-------------------
Version 1.00: This is very simple and just 1 Template Edit and 3 Steps
-------------------
Extra Credits to: RubberDuck (MybbExtras.Net) as Supporter / CoAuthor
-------------------

Facebook Badge Example

Twitter Badge Example

Lets Start..........

Step 1: First go to your ADMINCP, and Style & Templates. Now the right side of your Template name, you should see a dropdown menu! Click on the dropdown and choose Edit Template!

Step 2:The next thing we have to do is, to add the CODE for the Badge, and you can either add it in your "header" template or in your "footer" Template! Make sure to add it at the end of the template!

Below you will see 2 different Codes, 1 for Facebook, 1 for Twitter! need to add the URL of your facebook or twitter instead of RED TEXT!

Facebook Code: (Replace Red Text: With your Facebook or Twitter URL)

Code:

<a href="http://YOUR-FACEBOOK-URL" target="_blank"><img src="images/facebook.png" alt="Facebook" style="position: fixed; top:0; right:0; z-index:999;" title="Join our Facebook Page" /></a>

Twitter Code: (Replace Red Text: With your Facebook or Twitter URL)

Code:

<a href="http://YOUR-TWITTER-URL" target="_blank"><img src="images/twitter.png" alt="Twitter" style="position: fixed; top:0; right:0; z-index:999;" title="Follow us on Twitter" /></a>

Make sure to replace the Red Text With your Facebook or Twitter URL.

Notice: You cant add both of the codes, else they will make conflicts, and the code on top will cover the code below! So only add one of the codes.

Step 3: Now dont forget to copy the images from the attachments below! There are 2 images, one for facebook (facebook.png) and one for Twitter (twitter.png). Upload only one of the images, in your forums "images" folder that you want to use as your Badge!

Thats it, we are done.

Thank you for following up on this tutorial, and ones again thanks to all of you who have Installed my previouse mods and clicked on the Install Button! Its because of you guys I keep going! Thanks a lot!

Stay Tune for more, and please dont forget to click on INSTALLED!

How to install it on the LEFT side of the screen ?

Here is the CODES + Attached images below [Zip] for using it on the left side:

FACEBOOK ON LEFT:

Code:

<a href="http://YOUR-FACEBOOK-URL"  target="_blank"><img  src="images/facebook.png" alt="Facebook"  style="position: fixed; top:0;  left:0; z-index:999;" title="Join our  Facebook Page" /></a>

TWITTER ON LEFT:

Code:

<a  href="http://YOUR-TWITTER-URL"  target="_blank"><img  src="images/twitter.png" alt="Twitter"  style="position: fixed; top:0; left:0; z-index:999;" title="Follow us on  Twitter" /></a>

Images are inside the ZIP file, to make them separeted!

woffie · #12 09-01-2012, 10:04 AM

I changed the image too.

ChiNa · #13 09-01-2012, 10:35 AM

Hi woffie, Good job, but make sure to edit your facebook.png and twitter.png befor it works!

initiald · #14 09-01-2012, 11:30 AM

Can you tell me how to add both Facebook on left and right side at same time?

ChiNa · #15 09-01-2012, 12:22 PM

Here is the CODES + Attached images below for using it on the left side:

METHOD 1: Facebook on left + Twitter on right
FACEBOOK ON LEFT:

Code:

<a href="http://YOUR-FACEBOOK-URL" target="_blank"><img  src="images/facebook.png" alt="Facebook" style="position: fixed; top:0;  left:0; z-index:999;" title="Join our Facebook Page" /></a>

TWITTER ON RIGHT:

Code:

<a href="http://YOUR-TWITTER-URL" target="_blank"><img src="images/twitter.png" alt="Twitter" style="position: fixed; top:0; right:0; z-index:999;" title="Follow us on Twitter" /></a>

METHOD 2: Facebook on right + Twitter on left

FACEBOOK ON RIGHT:

Code:

<a href="http://YOUR-FACEBOOK-URL" target="_blank"><img  src="images/facebook.png" alt="Facebook" style="position: fixed; top:0; right:0; z-index:999;" title="Join our Facebook Page" /></a>

TWITTER ON LEFT:

Code:

<a  href="http://YOUR-TWITTER-URL" target="_blank"><img  src="images/twitter.png" alt="Twitter" style="position: fixed; top:0; left:0; z-index:999;" title="Follow us on Twitter" /></a>

Crrrazzzy · #16 09-12-2012, 04:32 PM

is there a way to make them both on the right?

ChiNa · #17 09-13-2012, 12:48 PM

Quote:

Originally Posted by Crrrazzzy

is there a way to make them both on the right?

Yes sure mate, but it takes a lot of work to change lots of the codes and images! Thats not worth it, at all!

RichieBoy67 · #18 09-25-2012, 08:47 AM

Do you guys have the left side image for twitter?

TheSupportForum · #19 09-25-2012, 09:33 AM

Quote:

Originally Posted by RichieBoy67

Do you guys have the left side image for twitter?

if you have a photo editing package just flip the image simple

TheSupportForum · #20 09-25-2012, 09:36 AM

Quote:

Originally Posted by ChiNa-Man

Yes sure mate, but it takes a lot of work to change lots of the codes and images! Thats not worth it, at all!

to be honest it takes 2 minutes to change the code, its simple HTML
and if anyone has an image editing package its easy for them to deal with the rest

this is a good template edit but it can be adapted to include the URL edits within the admincp rather than the template, i have complety rewrote the code to deal with this myself so i dont need to go into the template and add the url directly

ChiNa · #21 10-26-2012, 06:49 PM

Quote:

Originally Posted by RichieBoy67

Do you guys have the left side image for twitter?

@simonhind Its easy, Tho the images are the hard part for many on here, because they dont have the right tool) Thats why I think its a bit hard for THEM to change the images and codes! While It will take a 1 min for me or less!

@RichieBoyFirst of all sorry I had exams and been very tight working, and if you take a look on the first page, I did make the LEFT side codings! But here is it again!

CODE + Attached images below for using it on the left side:

METHOD 1: Facebook on left + Twitter on right
FACEBOOK ON LEFT:

Code:

<a href="http://YOUR-FACEBOOK-URL"    target="_blank"><img  src="images/facebook.png" alt="Facebook"    style="position: fixed; top:0;  left:0; z-index:999;" title="Join our    Facebook Page" /></a>

TWITTER ON RIGHT:

Code:

<a href="http://YOUR-TWITTER-URL"    target="_blank"><img src="images/twitter.png" alt="Twitter"    style="position: fixed; top:0; right:0; z-index:999;" title="Follow us    on Twitter" /></a>

METHOD 2: Facebook on right + Twitter on left

FACEBOOK ON RIGHT:

Code:

<a href="http://YOUR-FACEBOOK-URL"    target="_blank"><img  src="images/facebook.png" alt="Facebook"    style="position: fixed; top:0; right:0; z-index:999;" title="Join our    Facebook Page" /></a>

TWITTER ON LEFT:

Code:

<a  href="http://YOUR-TWITTER-URL"    target="_blank"><img  src="images/twitter.png" alt="Twitter"    style="position: fixed; top:0; left:0; z-index:999;" title="Follow us   on  Twitter" /></a>

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04685 seconds Memory Usage 2,345KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (12)bbcode_code (4)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (1)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!