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 Community Calendar Today's Posts Search

Reply
Page 2 of 5 1 2 34 Last »
 
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
  #12  
Old 08-11-2012, 07:50 PM
kfyonur kfyonur is offline
 
Join Date: Apr 2008
Posts: 177
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
i put everywhere but didn't work.

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%2FAudi-T%25C3%25BCrkiye-Kul%25C3%25BCb%25C3%25BC%2F114904325236579&amp;width=292&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe></div></span></div></div>
Reply With Quote
  #13  
Old 08-11-2012, 10:04 PM
CharlieDelta CharlieDelta is offline
 
Join Date: Apr 2010
Posts: 616
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Great idea!
How to move it to the left side?
Reply With Quote
  #14  
Old 08-30-2012, 05:21 PM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by kfyonur View Post
i put everywhere but didn't work.
Hi kfyonur, I tried to add your code, and it worked, I think you do something wrong, but I have made a new code for you, much better.. and your facebook code is good,,

Here is prove from your facebook page:


I have made another code for you, Copy all the code below, put it in your HEADER template,below everything else.. and click SAVE!

You dont have to touch the Additional.css! Simply copy my code, and past in your header.. OK

Dont forget to put the fbslide.png in your images folder:

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;
}
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%2FAudi-T%25C3%25BCrkiye-Kul%25C3%25BCb%25C3%25BC%2F114904325236579&amp;width=292&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe></div></span></div></div> 
Reply With Quote
  #15  
Old 08-30-2012, 05:27 PM
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
Location: TX
Posts: 503
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks for the mod! Hadn't had a new Facebook like in weeks installed this a couple days ago and have already gotten results.

One request ...could you produce a background image with the tab on the top instead of the bottom? I tried to modify it myself but the results were not very good!

I actually think if you offered 4 image options (tab bottom right, tab top right, tab bottom left, tab top left), for both this and your Twitter Slidebox mod it would allow a lot more placement options and probably quite a few more installs.

Thanks again.
Reply With Quote
Благодарность от:
ChiNa
  #16  
Old 08-30-2012, 05:42 PM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by bzcomputers View Post
Thanks for the mod! Hadn't had a new Facebook like in weeks installed this a couple days ago and have already gotten results.

One request ...could you produce a background image with the tab on the top instead of the bottom? I tried to modify it myself but the results were not very good!

I actually think if you offered 4 image options (tab bottom right, tab top right, tab bottom left, tab top left), for both this and your Twitter Slidebox mod it would allow a lot more placement options and probably quite a few more installs.

Thanks again.

I hope I understood you right, If I did then it sounds like a great Idea, and glad you made it work.. I let you know about the other options If it was possible. Thanks for keeping me updated..

Here is the BOX, with the tab on top:

Reply With Quote
  #17  
Old 08-30-2012, 06:30 PM
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
Location: TX
Posts: 503
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Here are the ones I played around with if someone wants to use them...

Reply With Quote
Благодарность от:
CharlieDelta
  #18  
Old 08-31-2012, 09:13 PM
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
Location: TX
Posts: 503
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
What would the jquery code change be if I wanted to activate this on a click versus the current hover?
Reply With Quote
  #19  
Old 09-01-2012, 02:54 AM
Andrei29 Andrei29 is offline
 
Join Date: Mar 2010
Posts: 44
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hi I installed and follow ur instructions but nothing turns out. Any expert could help advise?
Reply With Quote
  #20  
Old 09-01-2012, 02:57 AM
Andrei29 Andrei29 is offline
 
Join Date: Mar 2010
Posts: 44
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Anyone could help me make it work ?
Reply With Quote
  #21  
Old 09-01-2012, 12:54 PM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Andre, sorry for late reply, I would help you mate. Send me your website URL, and info! And make me an ADMIN LOGIN, PM me and I will pm you back when its done!

Thats all what I can offer..
Reply With Quote
Reply
Page 2 of 5 1 2 34 Last »

« Previous Thread | Next Thread »

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 04:15 PM.

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.05592 seconds
  • Memory Usage 2,408KB
  • 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
  • (2)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
  • (3)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (3)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (1)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