Miscellaneous Hacks - [CM] FaceBook SlideBox (LikeBox) [Archive]

View Full Version : Miscellaneous Hacks - [CM] FaceBook SlideBox (LikeBox)

ChiNa

07-30-2012, 10:00 PM

Brought to you by ChiNa-Man (https://vborg.vbsupport.ru/member.php?u=483671)

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! (https://vborg.vbsupport.ru/showthread.php?p=2354715) (NEW)
Get this for vBulletin 4.x by a Click HERE! (https://vborg.vbsupport.ru/showthread.php?p=2354567)
Credits to Leandro M. (http://www.mybb-es.com/Usuario-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!

https://vborg.vbsupport.ru/external/2012/08/10.gif

Only 3 Template Edits

DEMO HERE (http://www.china-cheats.com)

Example 1:

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

Example 2:

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

==================== 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:
<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>
https://vborg.vbsupport.ru/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%2Fp ages%2FChina-Cheatscom%2F160389837398598&width=260&height=590&c olorscheme=light&show_faces=true&border_color&stre am=true&header=true&appId=104331886356261" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:590px;" allowTransparency="true"></iframe></div></span></div></div>

cheech47

08-02-2012, 06:37 PM

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

cheech47

08-02-2012, 06:48 PM

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

ChiNa

08-03-2012, 02:02 PM

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

cheech47

08-05-2012, 12:44 PM

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

ChiNa

08-05-2012, 03:28 PM

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

08-06-2012, 02:25 AM

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

08-06-2012, 02:36 AM

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

08-11-2012, 09:50 PM

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

Guest210212002

08-12-2012, 03:30 PM

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!

ChiNa

08-12-2012, 04:09 PM

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

11-25-2012, 07:12 PM

thanx

J19784B5A39B

11-26-2012, 09:58 AM

Does not work with version 3.8.5.?

ChiNa

11-28-2012, 11:02 AM

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

01-07-2013, 09:14 PM

not working with 3.8.7..any help please

matrex722

01-07-2013, 09:49 PM

not working with 3.8.7 too

ChiNa

01-07-2013, 10:40 PM

not working with 3.8.7..any help please

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:

https://vborg.vbsupport.ru/external/2013/01/2.gif

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:
<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%2Fp ages%2FChina-Cheatscom%2F160389837398598&width=260&height=590&c olorscheme=light&show_faces=true&border_color&stre am=true&header=true&appId=104331886356261" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:590px;" allowTransparency="true"></iframe></div></span></div></div>

SyRiAn BoY

01-08-2013, 04:51 AM

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

ChiNa

01-11-2013, 02:47 PM

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

01-17-2013, 06:56 AM

its working now
very nice
good work ChiNa-Man

ricardoNJ

02-06-2013, 04:10 AM

How can I put an scroll bar?