Go Back   vb.org Archive > vBulletin Modifications > vBulletin 3.8 Modifications > vBulletin 3.8 Add-ons
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
[CM] FaceBook SlideBox (LikeBox) Details »»
[CM] FaceBook SlideBox (LikeBox)
Version: 1.00, by ChiNa ChiNa is offline
Developer Last Online: Feb 2023 Show Printable Version Email this Page

Category: Miscellaneous Hacks - Version: 3.8.7 Rating:
Released: 07-30-2012 Last Update: Never Installs: 7
Template Edits
Re-useable Code Additional Files Translations  
No support by the author.

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(truefalse).animate({right:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(truefalse).animate({right:"-250"},"medium");
},
500);
return 
false;
});
</
script>  

<
style type="text/css">
.
s_likebox {
float:right;
width:288px;
height:345px;
backgroundurl(images/fbslide.pngno-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top130px;
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>

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>

Screenshots

File Type: png fbslide.png (10.7 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
2 благодарности(ей) от:
Nimchan, ricardoNJ

Comments
  #22  
Old 02-06-2013, 04:10 AM
ricardoNJ ricardoNJ is offline
 
Join Date: Sep 2008
Posts: 295
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

How can I put an scroll bar?
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:15 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04184 seconds
  • Memory Usage 2,266KB
  • Queries Executed 19 (?)
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
  • (3)bbcode_code
  • (1)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
  • (2)post_thanks_box
  • (2)post_thanks_box_bit
  • (2)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (2)post_thanks_postbit_info
  • (1)postbit
  • (1)postbit_attachment
  • (2)postbit_onlinestatus
  • (2)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