vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.8 Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=235)
-   -   Miscellaneous Hacks - [CM] FaceBook SlideBox (LikeBox) (https://vborg.vbsupport.ru/showthread.php?t=286151)

ChiNa 07-30-2012 10:00 PM
[CM] FaceBook SlideBox (LikeBox)
 
1 Attachment(s)
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

==================== 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):
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 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):
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:
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 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
Quote:
Originally Posted by J19784B5A39B (Post 2385223)
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
Quote:
Originally Posted by bigs15 (Post 2395392)
not working with 3.8.7..any help please
Quote:
Originally Posted by matrex722 (Post 2395401)
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:
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 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
Quote:
Originally Posted by SyRiAn BoY (Post 2395468)
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?


All times are GMT. The time now is 07:57 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01302 seconds
  • Memory Usage 1,843KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (2)bbcode_php_printable
  • (4)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (21)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete