[CM] FaceBook SlideBox (LikeBox)
Mod Version: 1.00, by ChiNa
This modification is in the archives.
| vB Version: 3.7.6 | Rating:  (2 votes - 5.00 average) |
Installs: 3 |
| Released: 24 Aug 2012 | Last Update: Never | Downloads: 0 |
 Not Supported
 Template Edits
Additional Files
Translations
|
||
Get it as Twitter SlideBox. http://www.vbulletin.org/forum/showthread.php?p=2354715 (NEW)
Get this for vBulletin 4.x http://www.vbulletin.org/forum/showthread.php?p=2354567
Credits to 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!
Only 3 Template Edits
http://www.china-cheats.com
Step 1: Go to your ADMINCP, and then Styles & Templates. Find your Template, and in most cases the "headinclude" is the best place to add your Javascript or Jquery codes. And thats whats what we are going to do! Scroll all the way down, and to add the code below everything else...
Code to add:
Step 2: Now we have to add the CSS, Go back to your Styles & Templates in (ADMINCP) and in your Templates Dropdown choose "Main CSS"! In your Main CSS scroll all the way down till you find the "Additional CSS Definitions" section! Add the following code below all the other codes:
Code to add:
Step 3: Go to facebook https://developers.facebook.com/docs/plugins/
or https://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 4: 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 for the BLUE TEXT in the code below:
Code to add:
The BLUE text should be replaced with the IFRAME code:
Replace this --> "PUT YOUR IFRAME CODE HERE" with the IFRAME CODE.
STEP 5: When your are done putting the IFRAME code inside the real code, now put the full code in your Header or Forumhome Template, Put the code below everything else in the tempplate. And you are DONE!
STEP 6: Now copy the "fbslide.png" image from the attachment below, or from here, and upload it in your "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=====================
Extra Troubleshoots & Info
Example of my Code:
Slide Issues & Troubleshoots
If you have issues and your button will not SLIDE in or out, then try ADD the code from the HEADINCLUDE in another spot, Try add right below the stylesheet!
Find:
And add code in you "headinclude" template, right below the CSS Stylesheet! Its because the code can make conflict with other jquery / Javascripts! So keep changing spot, and you will see that it will work!
Get this for vBulletin 4.x http://www.vbulletin.org/forum/showthread.php?p=2354567
Credits to 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!
Only 3 Template Edits
http://www.china-cheats.com
Example 1:
Example 2:
==================== Modification Starts =====================Example 2:
Step 1: Go to your ADMINCP, and then Styles & Templates. Find your Template, and in most cases the "headinclude" is the best place to add your Javascript or Jquery codes. And thats whats what we are going to do! Scroll all the way down, and to add the code below everything else...
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>
Step 2: Now we have to add the CSS, Go back to your Styles & Templates in (ADMINCP) and in your Templates Dropdown choose "Main CSS"! In your Main CSS scroll all the way down till you find the "Additional CSS Definitions" section! Add the following code below all the other codes:
Code to add:
PHP Code:
.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;
}
div.likeboxwrap iframe {margin:-1px}
Step 3: Go to facebook https://developers.facebook.com/docs/plugins/
or https://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 4: 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 for the BLUE TEXT in the code below:
Code to add:
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 5: When your are done putting the IFRAME code inside the real code, now put the full code in your Header or Forumhome Template, Put the code below everything else in the tempplate. And you are DONE!
STEP 6: Now copy the "fbslide.png" image from the attachment below, or from here, and upload it in your "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!
I would Get very happy if you nominate this as (MOTN) Mod of the Month
=====================Modification Ends=====================
Extra Troubleshoots & Info
Example of my Code:
Code:
<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&width=260&height=590&colorscheme=light&show_faces=true&border_color&stream=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>
Slide Issues & Troubleshoots
Find:
PHP Code:
<!-- CSS Stylesheet -->
And add code in you "headinclude" template, right below the CSS Stylesheet! Its because the code can make conflict with other jquery / Javascripts! So keep changing spot, and you will see that it will work!
Download
No files for download.
Screenshots
