Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
[CM] FaceBook SlideBox (LikeBox) Details »
[CM] FaceBook SlideBox (LikeBox)
Mod Version: 1.00, by ChiNa (Coder/Designer) ChiNa is offline
Developer Last Online: Jul 2019 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 3.7.6 Rating: (2 votes - 5.00 average) Installs: 3
Released: 24 Aug 2012 Last Update: Never Downloads: 0
Not Supported Template Edits Additional Files Translations  

Get it as Twitter SlideBox. Click HERE! (NEW)
Get this for vBulletin 4.x Click HERE!
Credits to Leandro M.

Hey Everyone, This is my first modification for vBulletin ever! Its very small and simple! I hope you will like it.. And what you will achieve with this tutorial is that when mouse over the image, it will shift / slide your facebook page.

The modification may look a bit scary or confusing, but its very easy and after 1 time, you will install it without any help the next time!




Only 3 Template Edits

DEMO HERE

Example 1:




Example 2:



==================== Modification Starts =====================


Step 1: Go to your ADMINCP, and then Styles & Templates. Find your Template, and in most cases the "headinclude" is the best place to add your Javascript or Jquery codes. And thats whats what we are going to do! Scroll all the way down, and to add the code below everything else...

Code to add:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.




Step 2: Now we have to add the CSS,
Go back to your Styles & Templates in (ADMINCP) and in your Templates Dropdown choose "Main CSS"! In your Main CSS scroll all the way down till you find the "Additional CSS Definitions" section! Add the following code below all the other codes:

Code to add:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Step 3:
Go to facebook http://developers.facebook.com/docs/plugins/
or http://developers.facebook.com and make a like box. Make sure when your done choosing your box, click on GET CODE, and you need the IFRAME CODE for vBulletin!

Step 4:
Add the IFRAME code inside the the code showen like below. Instead of the BLUE TEXT. After you have added the code, your code should be ready!

Look for the BLUE TEXT in the code below:

Code to add:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



The BLUE text should be replaced with the IFRAME code:

Replace this --> "PUT YOUR IFRAME CODE HERE" with the IFRAME CODE.

STEP 5:
When your are done putting the IFRAME code inside the real code, now put the full code in your Header or Forumhome Template, Put the code below everything else in the tempplate. And you are DONE!



STEP 6:
Now copy the "fbslide.png" image from the attachment below, or from here, and upload it in your "images" folder in the root of your ftp!

We are DONE, Please its very important that you click INSTALLED after Installing, for future support! Thank you!

I would Get very happy if you nominate this as (MOTN) Mod of the Month

=====================Modification Ends=====================


Extra Troubleshoots & Info


Example of my Code:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



Slide Issues & Troubleshoots

If you have issues and your button will not SLIDE in or out, then try ADD the code from the HEADINCLUDE in another spot, Try add right below the stylesheet!

Find:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



And add code in you "headinclude" template, right below the CSS Stylesheet! Its because the code can make conflict with other jquery / Javascripts! So keep changing spot, and you will see that it will work!

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	fbslide.png
Views:	11
Size:	10.7 KB
ID:	140721  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Forum Home Enhancements [CM] FaceBook SlideBox (LikeBox) ChiNa vBulletin 4.x Template Modifications 41 04 Aug 2019 01:39
Miscellaneous Hacks [CM] FaceBook SlideBox (LikeBox) ChiNa vBulletin 3.8 Add-ons 20 06 Feb 2013 05:10
[CM] Twitter SlideBox (Widget) ChiNa vBulletin 3.5 Template Modifications 0 24 Aug 2012 16:46
vBulletin CMS Widgets Facebook LikeBox Plug-In [1.1.0] (CMS Widget) ChriDevelop vBulletin 4.x Add-ons 7 25 Apr 2012 10:26

Comments
  #2  
Old 14 Sep 2012, 19:48
SIINSI SIINSI is offline
 
Join Date: Mar 2003
Installed! Works perfectly. Thanks!
__________________
JDM Universe.com
Reply With Quote
  #3  
Old 16 Sep 2012, 17:18
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Originally Posted by SIINSI View Post
Installed! Works perfectly. Thanks!
Thanks buddy, this is the first vb3.7 Installation! enjoy
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #4  
Old 25 Sep 2012, 06:41
SIINSI SIINSI is offline
 
Join Date: Mar 2003
Question... Is there any way to give users the option to close it out or just not have it there if they choose to? Maybe an "x" on it to close...
__________________
JDM Universe.com
Reply With Quote
  #5  
Old 29 Sep 2012, 01:27
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Originally Posted by SIINSI View Post
Question... Is there any way to give users the option to close it out or just not have it there if they choose to? Maybe an "x" on it to close...
No Thats not possible with this code! You cant use the x for this kind of a slide module! But sure you can use a click on a BUTTON to slide in and out! There are many short descriptions on google!
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #6  
Old 08 Oct 2012, 15:56
SIINSI SIINSI is offline
 
Join Date: Mar 2003
Thanks! One last question. If I wanted it on the left, do I just change everything that says right to left in the css?

Do you have a PNG image for left?

Thanks,
Miguel
__________________
JDM Universe.com
Reply With Quote
  #7  
Old 15 Dec 2012, 08:50
itilm's Avatar
itilm itilm is offline
 
Join Date: Aug 2011
Location: Karachi
Real name: smartyounus
waooo awesome Thanks for sharing
__________________
Pakistan's It education Forum
Come and join us
www.itilm.com
Reply With Quote
  #8  
Old 15 Dec 2012, 12:43
itilm's Avatar
itilm itilm is offline
 
Join Date: Aug 2011
Location: Karachi
Real name: smartyounus
Originally Posted by SIINSI View Post
Thanks! One last question. If I wanted it on the left, do I just change everything that says right to left in the css?

Do you have a PNG image for left?

Thanks,
Miguel
i have created that's for you

fbslideleft1.png
__________________
Pakistan's It education Forum
Come and join us
www.itilm.com
Reply With Quote
  #9  
Old 19 Dec 2012, 14:27
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Originally Posted by SIINSI View Post
Thanks! One last question. If I wanted it on the left, do I just change everything that says right to left in the css?

Do you have a PNG image for left?

Thanks,
Miguel
To @SIINSI, Hi Buddy, Here is one created by itilm, and I edited it for you, so you are good to go!
Thanks to Itilim for his help.. You can use the one that is called After Edit (Good to go)..

Good luck


Originally Posted by itilm View Post
i have created that's for you
To @itilm, Hi Mate, Thanks alot for your help, I noticed that there was a tiny spot not that needed to be edited.. And I did that for you...

Ps, The "Befor Edit" is the one you posted.... Thanks mate

After Edit (Good to go):
fbslideleft1.png

Befor Edit (Dont use):
little error.png
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #10  
Old 13 Feb 2013, 18:25
itilm's Avatar
itilm itilm is offline
 
Join Date: Aug 2011
Location: Karachi
Real name: smartyounus
Originally Posted by ChiNa-Man View Post
To @SIINSI, Hi Buddy, Here is one created by itilm, and I edited it for you, so you are good to go!
Thanks to Itilim for his help.. You can use the one that is called After Edit (Good to go)..

Good luck




To @itilm, Hi Mate, Thanks alot for your help, I noticed that there was a tiny spot not that needed to be edited.. And I did that for you...

Ps, The "Befor Edit" is the one you posted.... Thanks mate

After Edit (Good to go):
Attachment 142963

Befor Edit (Dont use):
Attachment 142962
Thanks China man
__________________
Pakistan's It education Forum
Come and join us
www.itilm.com
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 07:22.

Layout Options | Width: Wide Color: