vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Forum Home Enhancements - [CM] Facebook & Twitter Badge (https://vborg.vbsupport.ru/showthread.php?t=286490)

ChiNa 08-09-2012 10:00 PM

[CM] Facebook & Twitter Badge
 
1 Attachment(s)
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

https://vborg.vbsupport.ru/external/2012/08/50.png


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!

RSNF 08-09-2012 10:15 PM

I have no need for it but great work you are doing and keep it up buddy!!!

ChiNa 08-09-2012 10:41 PM

RSNF, Than you mate, Its because of members like you I keep going! This is also why I have choosen to Support for all my mods. And I am totally new starting with vBulletin! Thanks for Installing and for 5 Stars! If I could help out with anything let me know!

ProFifaLeagues 08-11-2012 04:35 AM

Another Fine mod thanks mate great work

ChiNa 08-13-2012 10:00 PM

Thank you Pro... Your all amazing clicking on the Installed button,

otterag 08-24-2012 08:58 PM

ChiNa-Man,
Are you willing to do custom work, I am looking to pay for work and have looked at a few of the things you have done and I like them.
I have 2 projects in mind that i can't find mods for and would like to discuss them with someone.
You can contact me via private message or email here.

ChiNa 08-24-2012 09:58 PM

Sure mate, but it really depends on your choice! I am not good in XML Products, but I can try make you mods instead and obviously also install it for you! Try add me, so I can send you a message about what I need to know! I did message you, but your permission did not allow me...

Talk to you laters..

LgsOfChampions 08-28-2012 12:34 AM

China-Man

any chance to use this for the left side instead of the right? I use a peel back for the right corner, which when u highlite over it the page peels back. Obviously this will not work with the mod, unless I could get it for the use of left side.....is this possible

glen290 08-30-2012 09:59 PM

+1 as it covers the log out link in the header.

woffie 09-01-2012 10:02 AM

To place it left just change the 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>

woffie 09-01-2012 10:04 AM

http://charismaticcentral.com/forums...s/facebook.png

I changed the image too.

ChiNa 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 09-01-2012 11:30 AM

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

ChiNa 09-01-2012 12:22 PM

1 Attachment(s)

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 09-12-2012 04:32 PM

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

ChiNa 09-13-2012 12:48 PM

Quote:

Originally Posted by Crrrazzzy (Post 2364838)
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 09-25-2012 08:47 AM

Do you guys have the left side image for twitter?

TheSupportForum 09-25-2012 09:33 AM

Quote:

Originally Posted by RichieBoy67 (Post 2368353)
Do you guys have the left side image for twitter?

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

TheSupportForum 09-25-2012 09:36 AM

Quote:

Originally Posted by ChiNa-Man (Post 2365103)
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 10-26-2012 06:49 PM

1 Attachment(s)
Quote:

Originally Posted by RichieBoy67 (Post 2368353)
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>

XGC Paravain 10-26-2012 11:43 PM

1 Attachment(s)
Image is not showing up can you help I used Facebook on left the link works just no image im running Vb 4.2.0

TheSupportForum 10-27-2012 12:29 AM

Quote:

Originally Posted by XGC Paravain (Post 2376197)
Image is not showing up can you help I used Facebook on left the link works just no image im running Vb 4.2.0

you need to upload the images to the correct folder
ensure that facebook.png is located in /images/

XGC Paravain 10-27-2012 04:18 AM

Got it thank you

jaffaman 10-27-2012 07:51 AM

Nice work added to my site :)

ChiNa 10-29-2012 02:59 AM

@Simonhind Sir, Thank you for helping on my mods here, appreciate it a bunch!

@Thank you guys for commenting, I been away for sometime, but I am back!

@XGC Paravain Glad you fixed it

XGC Paravain 11-13-2012 12:57 AM

1 Attachment(s)
Yup fixed it and it works sweet!!!! :)

ChiNa 11-13-2012 08:27 PM

Quote:

Originally Posted by XGC Paravain (Post 2380681)
Yup fixed it and it works sweet!!!! :)

Thanks a lot for coming back to let us know! This is a true support and a great contribution to a developers work! I appreciate that mate!

XGC Paravain 12-07-2012 09:31 PM

Some thing is wrong with this addon it was working fine till this morning now when I click the facebook button it brings me to a list of pages I can go to not my ArmorGaming fan page

Please Help

smgxtreme 07-24-2013 03:06 AM

1 Attachment(s)
I edited Twitter for left side and I'm putting them here if you guys want them.

And including original Facebook one I used.

smgxtreme 07-26-2013 02:31 PM

1 Attachment(s)
Well I made a Youtube one for bottom left corner, feel free to use it if you want.
Tried my best, Youtube colors are weird. Make a better one maybe I will use that lol.

Code:

<a href="http://YOUR-YOUTUBE-URL" target="_blank"><img src="images/youtube.png" alt="YouTube" style="position: fixed; bottom:0; right:0; z-index:999;" title="Sub us on Youtube" /></a>


All times are GMT. The time now is 05:52 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01401 seconds
  • Memory Usage 1,824KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (13)bbcode_code_printable
  • (6)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (30)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete