Miscellaneous Hacks - [CM] FaceBook SlideBox (LikeBox)

Brought to you by ChiNa-Man

I am a free soul, So if one of you guys decided to post this on other forums or a websites, I would be appreciated if you put some credits below: Credits to: ChiNa-Man!

Please do not EDIT or CHANGE the original content, Thank you!

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

Get this as Twitter SlideBox by a Click HERE! (NEW)
Get this for vBulletin 4.x by a 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 chooser "Edit Templates"! Now find "header" Template, and add the code below in your header template... Make sure to add it below all the other codes.

Code to add:

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>  

<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;
}
</style> 


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 3: 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 in the code below for the BLUE TEXT:

Add your code inside this code (Replace the Blue text):

<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 4: Below you will see the FULL CODE, Now add your IMRAME code instead of PUT YOUR IFRAME CODE HERE. You are then ready to add the full code in your header Template,

Full Code (With no iframe 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;
}
</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>

Just Replace the BLUE CODE with your IFRAME CODE and done!

STEP 5: Now copy the "fbslide.png" image from the attachment below, or from here, and upload it to forums "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!


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


BELOW IS THE FULL CODE, USED ON MY FORUM!
NOTICE THE BLUE IFRAME CODE BELOW!

MY FINISHED 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;
}
</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>

[cheech47]

Hi, installed ok, slides out , has like button etc, but doesnt show my latest posts, any ideas? Thanks

[cheech47]

My bad, made a like button instead of box, sorted

[ChiNa]

I am happy you sorted it out... Thanks for Installing

[cheech47]

Is there anything like this that can be done for twitter? eg have twitter above or below the facebook slidebar?

[ChiNa]

Yes you can: Here you go: https://vborg.vbsupport.ru/showthread.php?p=235471

I had the mod ready, but had no time to publish it, Thanks for mentioning it!

[uarujoey]

Any idea on an alternative place for step 2, other than the main CSS? I get "This CSS file is obsolete and is available here for reference purposes only." There is no button to save my changes.

EDITED: I posted this in the wrong thread.

[ChiNa]

Your looking at the wrong Thread Buddy. This is for vBulletin 3.8

The Obsolete message is only in vBulletin 4.x, so look below I have made this mod for vBulletin 4.x too, link below:

Here is the TUT I made for vBulletin 4.x:
https://vborg.vbsupport.ru/showthread.php?p=2354567

In vB4.x you have to Open go to EDIT TEMPLATES, and then CSS Templates, and add the code in the "additional.css" template!

Good luck

[CharlieDelta]

Great idea!
How can I switch it to the left side?

Great mod - installed.

Question - I want to run both this and the twitter slide at the same time. I can get them both working individually, and move them apart by changing 'top: 130px;' in the CSS to something lower for the FB one. However with both active, neither slide out.

What am I missing?

Thanks!