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>

[ChiNa]

CharlieDelta: yes sure, i will get the code for you when i am home later today or tomorrow! btw make sure click installed buddy!

Chris-777 yes you can mate, click on the link for the vb 4.x version below, a user called "qpurser" has the fix below! Good luck, and here is the link https://vborg.vbsupport.ru/showthread.php?p=2354567

And thanks for clicking install! You guys rock

[al2thero]

thanx

[J19784B5A39B]

Does not work with version 3.8.5.?

[ChiNa]

Originally Posted by J19784B5A39B

Does not work with version 3.8.5.?

Yes, works on all vBulletin versions... Yet if you install it make sure to click on the Installed button, for further support..

Good luck mate

[bigs15]

not working with 3.8.7..any help please

[matrex722]

not working with 3.8.7 too

[ChiNa]

Originally Posted by bigs15

not working with 3.8.7..any help please

Originally Posted by matrex722

not working with 3.8.7 too

Hi guys, I just installed it on my board 3.8.7 again just to test it! WORKED the first time.....

And here is it after INSTALLED it on our test board:

I have tried to make the Installing easy for you now, try once again and dont forget to upload the fbslide image to your IMAGES folder...... And follow the tutorial.. I have 3 friends installed this last week, so please make sure to do it as it says!

Make sure not make any mistakes..


And below is basicly how the FULL Code looks like, and I use it on our test board now.. You can add it in your HEADER and see:

My full 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>  

<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> 


[SyRiAn BoY]

how i can use both Facebook and twitter at the same time?
See here: http://syrianboy.net

[ChiNa]

Originally Posted by SyRiAn BoY

how i can use both Facebook and twitter at the same time?
See here: http://syrianboy.net

Very nice and clean forum, I think the others have problems with it! I have made it a bit easier.... Thanks for the support and keep your forum as clean as it is.. looks good

[matrex722]

its working now
very nice
good work ChiNa-Man