The Arcive of Official vBulletin Modifications Site.

[CM] FaceBook SlideBox (LikeBox) · **Released**: 08-04-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!

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

Get this as Twitter SlideBox. CLICK HERE (NEW)
Get this for vBulletin 3.8.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!

Now there I will show you guys 2 METHODS in this TUTORIA, and I START WITH METHOD 1! Both METHTODS WILL WORK, but I prefer method 1, because it has 1 TEMPLATE EDIT! But it also depends on your template, if you use other JQUERY and or JAVASCRIPT then go for method 1.

Example 1:

Example 2:

==================== METHOD 1 - STARTS =====================

Step 1: Go to your ADMINCP, and then Styles & Templates. Find your Template, and in most cases the "HEADER" 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...

BUT DO NOT SAVE IT, ONLY HAVE ADDED, AND READY:

Add This Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".s_likebox").hover(function(){
jQuery(".s_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script><style type="text/css">
.s_likebox {
float:right;
width:288px;
height:345px;
background: url(images/fbslide.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

</style><div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'>PUT YOUR IFRAME CODE HERE</div> </span></div></div>

Now look look on the code on top, If you take a look you will see the BLUE text saying PUT YOUR IFRAME CODE HERE, Which is below everythign else ! This is where you should PLACE your FACEBOOK PAGE (IFRAME) CODE! Now without saving your header, Go to STEP 2 and get your IFRAME CODE from FACEBOOK.

Notice: You will be asked for your Facebook Page URL and choose the HEIGHT and WIDTH, here is what you choose for HEIGHT AND WIDTH:
Remember Width = 260, Height = 600!

Step 2: Go to facebook http://developers.facebook.com/docs/plugins/
or http://developers.facebook.com and make a like box. Make sure when your choosing your box, type 260 in "WIDTH" and 600 for "HEIGHT", click on GET CODE, and now you will see many options on top, BUT WE NEED the IFRAME for vBulletin! So on top you click on the IFRAME CODE for vBulletin!

Step 3: Now when you get the IFRAME code, GO BACK to your HEADER, and put the IFRAM code INSTEAD of the BLUE TEXT, right in between the symbyls > < INSTEAD OF THE BLUE TEXT.

Replace This Text --> PUT YOUR IFRAME CODE HERE <-- with your IFRAME CODE from facebook that you just got.

After Replace this --> "PUT YOUR IFRAME CODE HERE" , Your code in HEADER should be ready! Now after you added the IFRAME CODE, SAVE your HEADER,

That was easy right...AFTER HIT SAV, The last step is to upload your slide BOX image.

STEP 4:Now copy the "fbslide.png" image from the attachment below, or below this text. 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!

WE ARE DONE WITH METHOD 1 - END

If you look below, this is how my FULL code looks like on my website..

EXAMPLE OF MY CODE:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".s_likebox").hover(function(){
jQuery(".s_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script><style type="text/css">
.s_likebox {
float:right;
width:288px;
height:345px;
background: url(images/fbslide.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px} 
</style>

<div class="s_likebox"><div style="color: rgb(255,255,255); padding: 8px 5px 0pt 50px;"><span><div  class='likeboxwrap'><iframe  src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FChina-Cheatscom%2F160389837398598&amp;width=260&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;appId=104331886356261" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:590px;" allowTransparency="true"></iframe></div></span></div></div>

===================== METHOD 2 - 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: PHP Code:

PHP Code:


			
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".s_likebox").hover(function(){
jQuery(".s_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

Step 2: Now we have to add the CSS, Go back to your Styles & Templates in (ADMINCP) and in your Templates Dropdown choose "Edit Templates"!

Now scroll down till you find the "additional.css" section! Add the following code below all the other codes: (If its empty, just add it in the front)

Code to add:
PHP Code:

PHP Code:


			
.s_likebox {
float:right;
width:288px;
height:345px;
background: url(images/fbslide.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

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:

Code:

<div class="s_likebox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'>PUT YOUR IFRAME CODE HERE</div></span></div></div>

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 below this text. 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

===================== METHOD 2 - FINISHED =====================

Extra Troubleshoots & Info

Below you see example of the full code used in my forum China-Cheats.com. The code in BLUE color is the facebook IFRAME code:

Example of my Code:

Code:

     <div class="s_likebox"><div style="color: rgb(255, 255, 255); padding:8px 5px 0pt 50px;"><span><div  class='likeboxwrap'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FChina-Cheatscom%2F160389837398598&amp;width=260&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;appId=104331886356261" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:590px;" allowTransparency="true"></iframe></div></span></div></div>

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:

PHP Code:


			
<!-- CSS Stylesheet -->

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!

xixxon · #2 08-05-2012, 03:31 AM

Nice

"Software hay gianh cho nguoi viet" should be "Phần mềm hay d?nh cho người Việt" :P

Krusty1231 · #3 08-05-2012, 07:15 AM

Very nifty. My only issue was the graphic posted is not the correct size. I took the image from the 3.8 thread.

Thanks for the up!

ChiNa · #4 08-05-2012, 05:02 PM

MR xixxon's, If you speak chinese then I dont understand. I am not chinese sir..

Now, I have added an Original Image! Strange, I did add the full image, but glad you got it done..

I have today published another mod for like this, for Twitter! CLICK HERE or on the linke below:
https://vborg.vbsupport.ru/showthread.php?t=286356

hrenos · #5 08-09-2012, 01:59 AM

wow Im impressed with this, got confused little with the iframe but got it to work perfectly, thanks

qpurser · #6 08-09-2012, 11:13 AM

Very nice.

However one small issue.
When you go to the FB plugin page it says: The minimum supported plugin width is 292px.

Therefore as you can see in the screenshot the content got cutoff on the right.
Maybe you need to get the image a little wider and change the css template accordingly?

Michael

edit:
One more issue (sorry)
The FB button was positioned a little to high for my purposes and changed the TOP value to 230px which worked fine.
Now I tried to add also your Twitter button also and followed the instructions again.
Because of the same TOP settings in both CSS files I used 330px for the Twitter button but this doesnt work.
The FB box doesn't slide open anymore neither does the Twitter box.

ChiNa · #7 08-09-2012, 02:46 PM

Thank you guys, and here is a bit info;

Qpursur:
Please take a look an EXAMPLE of my IFRAME below, AFTER ITS GENERATED, you can choose the size to what you want!

Change the code marked in RED, for your HEIGHT AND WIDTH:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fp ages%2FChina-Cheatscom%2F160389837398598&width=260&heig ht=590&colorscheme=light&show_faces=true&a mp;border_color&stream=true&header=true&am p;appId=104331886356261" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:590px;" allowTransparency="true"></iframe>

But rememeber, to change the size first "AFTER" you have generated your IFRAME, DONE!
This is so simple, but thanks for mentioning, now people will see this, and it might help them

About positioning:
I will wait a bit more, and I am sure people will let me know if! In long terms, I will change the whole setting!

Thanks alot guys for for your time, and clicking installl, and to put images up, and mot of all to letting me know, now this is a good thing for a developer! Amazing job, I will take all your comments in my bag, and let you all know when next update is out!

qpurser · #8 08-09-2012, 05:37 PM

Thanks for the fix for the box size.
Just let me illustrate the positioning a bit more.
When using your FB and Twitter mod at the same time:
As you can see in the screenshot I had to change the TOP settings to place the buttons.
However they really need to be placed very far apart which doesn't look very good.
If you place them closer to each other and you hoover with the mouse over the Twitter box the FB box would open.
Probably just a CSS issue but don't know how to solve it
This is the css I am using now:

Code:

.s_likebox {
float:right;
width:288px;
height:345px;
background: url(images/fbslide.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 430px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}  



.twitbox {
float:right;
width:288px;
height:345px;
background: url(images/twitbox.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 180px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap iframe {margin:-1px}

kfyonur · #9 08-11-2012, 09:05 AM

it didn't work.

ChiNa · #10 08-11-2012, 01:11 PM

Q Purser.. The reason why I do not recommend people to use them all at ones is because it can make conflicts if with other JS or JQUERY......... And the reason why they wont work, is because the CSS is reading the HEIGHT of your box! So there is not really a fix for that! Thats totally normal..btw great job putting all the buttons on your site! One more thing, if you ever get a problem with your other CSS or JQUERY in future, then you know why!

And there is a new update out for the SideBar, now with more options! Check them out, and make sure to download and replace the old Icons with the new ones. Good luck & Good job posting the new updates on your site!

kfyonur .... You are doing something wrong, since it does not work out for you! Try to put the code below in your header template, if not working then put it in your footer! If you want me to check your website, send me the info and i will check it for you! And please click on installed for support! Thank you!

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06509 seconds Memory Usage 2,394KB 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 (4)bbcode_code (3)bbcode_php (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 (10)post_thanks_box (1)post_thanks_box_bit (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (10)post_thanks_postbit_info (9)postbit (4)postbit_attachment (10)postbit_onlinestatus (10)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_postinfo_query fetch_postinfo 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 fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end 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:

Благодарность от:
artscripts

The Arcive of Official vBulletin Modifications Site.

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