Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
Reload this Page Forum Home Enhancements - [CM] FaceBook SlideBox (LikeBox)
FAQ Members List Calendar Search Today's Posts Mark Forums Read

Reply
Page 4 of 5 « First 23 4 5
 
Thread Tools
[CM] FaceBook SlideBox (LikeBox) Details »»
[CM] FaceBook SlideBox (LikeBox)
MOD Information
The Developer
 
Version: 1.00, by ChiNa ChiNa is offline
Developer Last Online: Feb 2023 Show Printable Version Email this Page
Category: Forum Home Enhancements - Version: 4.2.0 Rating:
Released: 08-04-2012 Last Update: Never Installs: 39
Uses Plugins Template Edits Auto-Templates
Additional Files Translations  
No support by the author.

This was brought to you by ChiNa-Man


First of all I am a free soul, So if one of you guys decided to post this on another forum or a website, I would be appreciated if you give some CREDITs to the Developer simply typing his name: Credits to: ChiNa-Man, and do not CHANGE or DELETE the ORIGINAL CONTENT! Thank you!

:::::::::::::::::::::::::::::::::::::::::::::

Get this as Twitter SlideBox. CLICK HERE (NEW)
Get this for vBulletin 3.8.x. 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!


Now there I will show you guys 2 METHODS in this TUTORIA, and I START WITH METHOD 1! Both METHTODS WILL WORK, but I prefer method 1, because it has 1 TEMPLATE EDIT! But it also depends on your template, if you use other JQUERY and or JAVASCRIPT then go for method 1.

Example 1:




Example 2:



==================== METHOD 1 - STARTS =====================

Step 1: Go to your ADMINCP, and then Styles & Templates. Find your Template, and in most cases the "HEADER" 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...

BUT DO NOT SAVE IT, ONLY HAVE ADDED, AND READY:

Add This 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;
}
div.likeboxwrap iframe {margin:-1px}

</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>
Now look look on the code on top, If you take a look you will see the BLUE text saying PUT YOUR IFRAME CODE HERE, Which is below everythign else ! This is where you should PLACE your FACEBOOK PAGE (IFRAME) CODE! Now without saving your header, Go to STEP 2 and get your IFRAME CODE from FACEBOOK.

Notice: You will be asked for your Facebook Page URL and choose the HEIGHT and WIDTH, here is what you choose for HEIGHT AND WIDTH:
Remember Width = 260, Height = 600!

Step 2: Go to facebook http://developers.facebook.com/docs/plugins/
or http://developers.facebook.com and make a like box. Make sure when your choosing your box, type 260 in "WIDTH" and 600 for "HEIGHT", click on GET CODE, and now you will see many options on top, BUT WE NEED the IFRAME for vBulletin! So on top you click on the IFRAME CODE for vBulletin!


Step 3: Now when you get the IFRAME code, GO BACK to your HEADER, and put the IFRAM code INSTEAD of the BLUE TEXT, right in between the symbyls > < INSTEAD OF THE BLUE TEXT.

Replace This Text --> PUT YOUR IFRAME CODE HERE <-- with your IFRAME CODE from facebook that you just got.

After Replace this --> "PUT YOUR IFRAME CODE HERE" , Your code in HEADER should be ready! Now after you added the IFRAME CODE, SAVE your HEADER,

That was easy right...AFTER HIT SAV, The last step is to upload your slide BOX image.

 STEP 4:Now copy the "fbslide.png" image from the attachment below, or below this text. 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!


WE ARE DONE WITH METHOD 1 - END

If you look below, this is how my FULL code looks like on my website..

EXAMPLE OF MY 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;
}
div.likeboxwrap iframe {margin:-1px} 
</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>
===================== METHOD 2 - STARTS =====================

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:
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 "Edit Templates"!

Now scroll down till you find the "additional.css" section! Add the following code below all the other codes: (If its empty, just add it in the front)

Code to add:
PHP Code:
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 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 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 below this text. 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

===================== METHOD 2 - FINISHED =====================

Extra Troubleshoots & Info

Below you see example of the full code used in my forum China-Cheats.com. The code in BLUE color is the facebook IFRAME code:

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



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

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.
Благодарность от:
artscripts

Comments
  #32  
Old 09-03-2012, 02:41 AM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by simonhind View Post
hi developer this suites my website perfectly but i have a question
Get it as Twitter SlideBox. Click HERE! (NEW)

^
the link doesn't work, and found it another way, but when using both together it only fb like box works


Here you go, *I will fix tha*

https://vborg.vbsupport.ru/showthread.php?t=286359

IF YOU NEEDED ANY HELP ELSE THAN THAT, LET ME KNOW
Reply With Quote
  #33  
Old 11-02-2012, 05:28 AM
jeffand77 jeffand77 is offline
 
Join Date: Oct 2010
Posts: 6
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I tried multiple ways to get the fb and twitter slider to work together but it constantly created an issue with the forumdisplay template. I was unable to reply or create a new thread. The text box would not load. So I had to reload the original template. Any thoughts of HOW to make these two slider co-exist? It doesnt seem right to have 1 without the other. I did edit the height of the facebook feed (iframe) from 600 to 260 to fit within a typical laptop screen. Could this be the cause?
Reply With Quote
  #34  
Old 11-03-2012, 11:03 PM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by jeffand77 View Post
I tried multiple ways to get the fb and twitter slider to work together but it constantly created an issue with the forumdisplay template. I was unable to reply or create a new thread. The text box would not load. So I had to reload the original template. Any thoughts of HOW to make these two slider co-exist? It doesnt seem right to have 1 without the other. I did edit the height of the facebook feed (iframe) from 600 to 260 to fit within a typical laptop screen. Could this be the cause?
Hi Mate, I think you are doing something wrong! I have used both on my site many many times, and I have helped many others too! If you look on the PAGE befor this, you can see the user "qpurser" installed 3 Of my addons on same side!

Here is the code for having both in same side, give this a try, If note then I will try make another code for you,,

Both Codes Add Below: (Twitter and Faceboo)
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: 430px;
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}  

.twitbox {
float:right;
width:288px;
height:345px;
background: url(images/twitbox.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 180px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap {
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.twitboxwrap iframe {margin:-1px} 
And below if you take a loo I have attached an image posted by qpurser.. And he installed also my SIDE BAR addon, now he has 3 Different Mods on the same side! If you keep having problems you can send me an Admin Login and a Pass, then I will try to fix it for you!
Attached Images
File Type: png Screen Shot 2012-08-09 at 1.31.13 PM.png (30.6 KB, 0 views)
Reply With Quote
  #35  
Old 11-19-2012, 06:15 AM
AURFSCAN AURFSCAN is offline
 
Join Date: Dec 2007
Posts: 328
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Great.. Installed and slightly tweaked to suit my forum style

to the left to the left....lol

I have added conditionals to the code also in that only members see the facebook slidebox plus it only displays on forumhome.

I could post the code and image if anyone is interested



Attached Images
File Type: jpg left1.jpg (15.1 KB, 0 views)
File Type: jpg left2.jpg (134.5 KB, 0 views)
Reply With Quote
Благодарность от:
ChiNa
  #36  
Old 11-19-2012, 11:16 PM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by AURFSCAN View Post
I have added conditionals to the code also in that only members see the facebook slidebox plus it only displays on forumhome.

I could post the code and image if anyone is interested
Well done mate, We need more users like you ! As you can see everyone has been very supportive especially on this addon! Thanks a lot mate. appreciate it
Reply With Quote
  #37  
Old 11-22-2012, 06:48 PM
Marcin1 Marcin1 is offline
 
Join Date: Sep 2012
Location: Poland
Posts: 49
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by AURFSCAN View Post
Great.. Installed and slightly tweaked to suit my forum style

to the left to the left....lol

I have added conditionals to the code also in that only members see the facebook slidebox plus it only displays on forumhome.

I could post the code and image if anyone is interested
I'd be grateful. I've been struggling on this for few hours... Slidebox situated on left side.
Reply With Quote
Благодарность от:
ChiNa
  #38  
Old 11-24-2012, 11:44 AM
AURFSCAN AURFSCAN is offline
 
Join Date: Dec 2007
Posts: 328
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Marcin1 View Post
I'd be grateful. I've been struggling on this for few hours... Slidebox situated on left side.
I havent included the viewing conditionals and this code with the fbslide3 displays as I posted previously.

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({left:"0"},"medium");
},function(){
jQuery(".s_likebox").stop(true, false).animate({left:"-250"},"medium");
},500);
return false;
});
</script><style type="text/css">
.s_likebox {
float:left;
width:289px;
height:590px;
background: url(images/fbslide3.png) no-repeat !important;
display:block;
left:-250px;
padding:0;
position:fixed;
top: 30px;
z-index:1002;

}
div.likeboxwrap {
margin-top:-8px;
margin-left:-48px;
background: #f7f7f7;
width:246px;
height:592px;
overflow:hidden;

}
div.likeboxwrap iframe {margin:-0px}

</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>
Attached Images
File Type: png fbslide3.png (6.0 KB, 0 views)
Reply With Quote
Благодарность от:
ChiNa
  #39  
Old 11-28-2012, 11:11 AM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by AURFSCAN View Post
I havent included the viewing conditionals and this code
@AURFSCAN Good job mate, Thanks for the help and support on my mods! I saw some of your work and I wish you all the best, and congurats with your Designer Rank.. Keep up your great work mate and if you ever needed some help with any coding or designings, let me know!
Reply With Quote
Благодарность от:
AURFSCAN
  #40  
Old 12-10-2012, 05:26 PM
patrick91 patrick91 is offline
 
Join Date: Aug 2009
Posts: 72
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
My facebook shows duplicate people in the box! What the hack is wrong with mine:P

Lol i see that are currently friends!

Thanks
Reply With Quote
  #41  
Old 10-31-2013, 12:12 PM
U-Fig U-Fig is offline
 
Join Date: Nov 2012
Posts: 10
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thank you China-Man! very good one and got them both on my forum home, left side
Reply With Quote
Reply
Page 4 of 5 « First 23 4 5

« Previous Thread | Next Thread »
Thread Tools

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 03:48 AM.

Contact Us - Archive - Top

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.05053 seconds
  • Memory Usage 2,425KB
  • Queries Executed 26 (?)
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
  • (4)bbcode_code
  • (4)bbcode_php
  • (6)bbcode_quote
  • (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
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (5)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (5)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (5)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)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_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