 |
|
|
Mod Options |
[CM] FaceBook SlideBox (LikeBox) Details »
|
|||||||||||||||||||||||||||||||
|
[CM] FaceBook SlideBox (LikeBox)
Developer Last Online: Jul 2019 
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: ==================== METHOD 1 - STARTS ===================== Example 2:  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:
===================== 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:
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:
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:
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: 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!
Slide Issues & Troubleshoots 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 Now Only licensed members can download files, Click Here for more information. Screenshots
Show Your Support
The following members like this post: artscripts
|
|||||||||||||||||||||||||||||||
About Developer
Not Supported 
Uses Plugins|
Similar Mod
|
||||
| Mod | Developer | Type | Replies | Last Post |
| Miscellaneous Hacks [CM] FaceBook SlideBox (LikeBox) | ChiNa | vBulletin 3.8 Add-ons | 20 | 06 Feb 2013 05:10 |
| vBulletin CMS Widgets Facebook LikeBox Plug-In [1.1.0] (CMS Widget) | ChriDevelop | vBulletin 4.x Add-ons | 7 | 25 Apr 2012 10:26 |
| Comments |
|
#2
05 Aug 2012, 05:31
|
||||
|
||||
|
Nice
 "Software hay gianh cho nguoi viet" should be "Phần mềm hay dành cho người Việt" :P
__________________
vivut.vn No members have liked this post.
|
|
#3
05 Aug 2012, 09:15
|
||||
|
||||
|
Very nifty. My only issue was the graphic posted is not the correct size. I took the image from the 3.8 thread.
Thanks for the up! No members have liked this post.
|
|
#4
05 Aug 2012, 19:02
|
|||
|
|||
|
MR xixxon's, If you speak chinese then I dont understand. I am not chinese sir..
Now, I have added an Original Image! Strange, I did add the full image, but glad you got it done.. I have today published another mod for like this, for Twitter! CLICK HERE or on the linke below: http://www.vbulletin.org/forum/showthread.php?t=286356
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
No members have liked this post.
Last edited by ChiNa; 05 Aug 2012 at 21:38.
|
|
#5
09 Aug 2012, 03:59
|
|||
|
|||
|
wow Im impressed with this, got confused little with the iframe but got it to work perfectly, thanks
No members have liked this post.
|
|
#6
09 Aug 2012, 13:13
|
|||
|
|||
|
Very nice.
However one small issue. When you go to the FB plugin page it says: The minimum supported plugin width is 292px. Therefore as you can see in the screenshot the content got cutoff on the right. Maybe you need to get the image a little wider and change the css template accordingly? Michael edit: One more issue (sorry) The FB button was positioned a little to high for my purposes and changed the TOP value to 230px which worked fine. Now I tried to add also your Twitter button also and followed the instructions again. Because of the same TOP settings in both CSS files I used 330px for the Twitter button but this doesnt work. The FB box doesn't slide open anymore neither does the Twitter box. No members have liked this post.
Last edited by qpurser; 09 Aug 2012 at 13:52.
|
|
#7
09 Aug 2012, 16:46
|
|||
|
|||
|
Thank you guys, and here is a bit info;
Qpursur: Please take a look an EXAMPLE of my IFRAME below, AFTER ITS GENERATED, you can choose the size to what you want! Change the code marked in RED, for your HEIGHT AND WIDTH: <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&a mp;show_faces=true&border_color&stream=true&header=true&appId=10 4331886356261" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:590px;" allowTransparency="true"></iframe> But rememeber, to change the size first "AFTER" you have generated your IFRAME, DONE! This is so simple, but thanks for mentioning, now people will see this, and it might help them About positioning: I will wait a bit more, and I am sure people will let me know if! In long terms, I will change the whole setting! Thanks alot guys for for your time, and clicking installl, and to put images up, and mot of all to letting me know, now this is a good thing for a developer! Amazing job, I will take all your comments in my bag, and let you all know when next update is out!
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
No members have liked this post.
Last edited by ChiNa; 09 Aug 2012 at 16:56.
|
|
#8
09 Aug 2012, 19:37
|
||||
|
||||
|
Thanks for the fix for the box size.
Just let me illustrate the positioning a bit more. When using your FB and Twitter mod at the same time: As you can see in the screenshot I had to change the TOP settings to place the buttons. However they really need to be placed very far apart which doesn't look very good. If you place them closer to each other and you hoover with the mouse over the Twitter box the FB box would open. Probably just a CSS issue but don't know how to solve it This is the css I am using now:
No members have liked this post.
|
||||
|
#9
11 Aug 2012, 11:05
|
|||
|
|||
|
it didn't work.
No members have liked this post.
|
|
#10
11 Aug 2012, 15:11
|
|||
|
|||
|
Q Purser.. The reason why I do not recommend people to use them all at ones is because it can make conflicts if with other JS or JQUERY......... And the reason why they wont work, is because the CSS is reading the HEIGHT of your box! So there is not really a fix for that! Thats totally normal..btw great job putting all the buttons on your site! One more thing, if you ever get a problem with your other CSS or JQUERY in future, then you know why!
And there is a new update out for the SideBar, now with more options! Check them out, and make sure to download and replace the old Icons with the new ones. Good luck & Good job posting the new updates on your site! kfyonur .... You are doing something wrong, since it does not work out for you! Try to put the code below in your header template, if not working then put it in your footer! If you want me to check your website, send me the info and i will check it for you! And please click on installed for support! Thank you!
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
No members have liked this post.
Last edited by ChiNa; 11 Aug 2012 at 15:19.
|
|
#11
11 Aug 2012, 21:50
|
||||
|
||||
|
i put everywhere but didn't work.
No members have liked this post.
|
||||
|
#12
12 Aug 2012, 00:04
|
|||
|
|||
|
Great idea!
How to move it to the left side? No members have liked this post.
|
|
#13
30 Aug 2012, 19:21
|
||||
|
||||
|
Originally Posted by kfyonur
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:
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
No members have liked this post.
Last edited by ChiNa; 30 Aug 2012 at 19:47.
|
||||
|
#14
30 Aug 2012, 19:27
|
||||
|
||||
|
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. The following members like this post: ChiNa
|
|
#15
30 Aug 2012, 19:42
|
|||
|
|||
|
Originally Posted by bzcomputers
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: 
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
No members have liked this post.
Last edited by ChiNa; 30 Aug 2012 at 20:00.
|
|
«
Previous Mod
|
Next Mod
»
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Mod Options | |
|
|
| New To Site? | Need Help? |
All times are GMT. The time now is 01:23.
Powered by vBulletin® Version 3.8.14
Copyright © 2021, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright © 2021, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Design by Princeton
Copyright ©2001 - , vbulletin.org. All rights reserved.
vBulletin® is a registered trademark. 