Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
[CM] FaceBook SlideBox (LikeBox) Details »
[CM] FaceBook SlideBox (LikeBox)
Mod Version: 1.00, by ChiNa (Coder/Designer) ChiNa is offline
Developer Last Online: Jul 2019 I like it Show Printable Version Email this Page

vB Version: 4.2.0 Rating: (5 votes - 4.60 average) Installs: 39
Released: 05 Aug 2012 Last Update: Never Downloads: 0
Supported Uses Plugins Template Edits Auto-Template Additional Files Translations External Content  

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View 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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View 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:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View 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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View 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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



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

Click image for larger version

Name:	fbslide.png
Views:	62
Size:	10.7 KB
ID:	140343  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Miscellaneous Hacks [CM] FaceBook SlideBox (LikeBox) ChiNa vBulletin 3.8 Add-ons 20 06 Feb 2013 04:10
vBulletin CMS Widgets Facebook LikeBox Plug-In [1.1.0] (CMS Widget) ChriDevelop vBulletin 4.x Add-ons 7 25 Apr 2012 09:26

  #16  
Old 30 Aug 2012, 19:30
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
Here are the ones I played around with if someone wants to use them...


Last edited by bzcomputers; 31 Aug 2012 at 03:19. Reason: Image Update
Reply With Quote
  #17  
Old 31 Aug 2012, 22:13
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
What would the jquery code change be if I wanted to activate this on a click versus the current hover?
Reply With Quote
  #18  
Old 01 Sep 2012, 03:54
Andrei29 Andrei29 is offline
 
Join Date: Mar 2010
Hi I installed and follow ur instructions but nothing turns out. Any expert could help advise?
Reply With Quote
  #19  
Old 01 Sep 2012, 03:57
Andrei29 Andrei29 is offline
 
Join Date: Mar 2010
Anyone could help me make it work ?
Reply With Quote
  #20  
Old 01 Sep 2012, 13:54
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
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..
__________________
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
Reply With Quote
  #21  
Old 01 Sep 2012, 13:56
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Originally Posted by bzcomputers View Post
Here are the ones I played around with if someone wants to use them...




Originally Posted by bzcomputers View Post
What would the jquery code change be if I wanted to activate this on a click versus the current hover?

Well done, the images looks perfect with different TOP and BODY..
Impressed

And about the Jquery didnt really understand.. If you could explain why you wanted to change it to a click.. and what would the other option be?

Thanks for replying back mate, I really like that people dont forget to come back and reply what they asking about! Thanks for the amazing job with the images..
__________________
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

Last edited by ChiNa; 01 Sep 2012 at 14:02.
Reply With Quote
  #22  
Old 01 Sep 2012, 20:44
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
Originally Posted by ChiNa-Man View Post
...about the Jquery didnt really understand.. If you could explain why you wanted to change it to a click.. and what would the other option be?
I had a couple people using touchscreens (iPads, tablets, etc.) saying they had issues getting it to close. It will slide out on touch but there is no way to close it currently on a touchscreen unless you refresh the page. Was looking for a solution to this by either switching the whole thing to open and close on click, or at least an added option to also close on a click. Not sure how to implement it, but it would have to be something that would close the slidebox on any click on the page that is not a associated with a hyperlink.
Reply With Quote
  #23  
Old 02 Sep 2012, 16:14
CharlieDelta CharlieDelta is offline
 
Join Date: Apr 2010
Originally Posted by bzcomputers View Post
I had a couple people using touchscreens (iPads, tablets, etc.) saying they had issues getting it to close. It will slide out on touch but there is no way to close it currently on a touchscreen unless you refresh the page. Was looking for a solution to this by either switching the whole thing to open and close on click, or at least an added option to also close on a click. Not sure how to implement it, but it would have to be something that would close the slidebox on any click on the page that is not a associated with a hyperlink.
+1. I have had the same complaints.
Reply With Quote
  #24  
Old 02 Sep 2012, 17:45
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Originally Posted by bzcomputers View Post
I had a couple people using touchscreens (iPads, tablets, etc.) saying they had issues getting it to close. It will slide out on touch but there is no way to close it currently on a touchscreen unless you refresh the page. Was looking for a solution to this by either switching the whole thing to open and close on click, or at least an added option to also close on a click. Not sure how to implement it, but it would have to be something that would close the slidebox on any click on the page that is not a associated with a hyperlink.

Hey Thanks for notice
, if its a SLIDE problem, then Its all about this code here: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

It seems that there is a conflict somewhere! Now about the Issues for IPAD or other 3rd Party Device, I dont know what kinda sulotion can be used to fix SLIDE problem from an IPAD since this is a CODE used for normal BROWSER and from a normal PC, But I will try give it a shot and see what could be wrong, thats all what I can do... I let you know!
__________________
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

Last edited by ChiNa; 02 Sep 2012 at 19:23.
Reply With Quote
  #25  
Old 02 Sep 2012, 19:11
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Originally Posted by [B
bzcomputers[/b];2361805]I had a couple people using touchscreens (iPads, tablets, etc.) saying they had issues getting it to close. It will slide out on touch but there is no way to close it ........
Originally Posted by [B
CharlieDelta[/b];2361989]+1. I have had the same complaints.
Update for, CharlieDelta and bzcomputers:

So I am back, and I forgot to tell, that I updated the Facebook Slidebox tutorial to a much better and easier tutorial! There are 2 METHODS! Method 1 is the new Tutorial, and METHOD 2 the old one which I think you both are still using!
The NEW Method 1, has only 1 TEMPLATE EDIT. And I can only hope for it works for you, I have added an extra FIELD called the JAVASCRIPT "NO CONFLICT" variable, Now its upto you if you wanna try the new method and see if it works for the people with the IPad problem!

First of all REMOVE all the codes used from the old FACEBOOK TUTORIAL! The codes should be in 3 template. In your Headinclude + Additional.css + header template. If you dont remember how, then take a look at "METHOD 2". And use it to remove the codes..

Step 1: Here is the NEW CODE and new METHOD to add the facebook slider! Add the whole code thar you see below in your header template, Add it BELOW EVERYTHING ELSE IN YOUR HEADER, And DO NOT SAVE IT YET.

============================
ADD THE CODE BELOW IN HEADER:
============================

<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>
<script>
jQuery.noConflict();
</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>

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

============================
After adding, move on to STEP 2, without SAVE!
============================

Step 2: We are still in your HEADER template, and you havnt saved it yet! Now if you take a look ABOVE in the code you just added in your header, you will see the BLUE TEXT saying PUT YOUR IFRAME CODE HERE! Add your FACEBOOK IFRAME code instead of the text PUT YOUR IFRAME CODE HERE! Exactly as you did in my first Tutorial! After you added that, make sure that your fbslide.png image is in your "images" folder! Then your CODE is done in the header. HIT SAVE to save your HEADER!

NOW WE ARE DONE!

Try now use the IPAD to see if it still have the conflict! And from now on, if anything use always this METHOD, or my METHOD 1 ! Good luck, and waiting for an update!
__________________
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

Last edited by ChiNa; 02 Sep 2012 at 19:21.
Reply With Quote
  #26  
Old 02 Sep 2012, 19:18
TheSupportForum TheSupportForum is offline
 
Join Date: Jan 2007
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
__________________
http://www.multihunters.co.uk - all your coding needs
Reply With Quote
  #27  
Old 02 Sep 2012, 21:50
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
I'm still getting the same results. The no conflict variable was already in there in line three, not sure if having it twice is needed (but I personally have no idea).

The issue is with the "hover" affect. It is not fully compatible with any touchscreens, which is typically about 25% of any website's traffic these days and why you see the "hover" affect used less and less. The hover affect will activate on a touchscreen to open but will not close with any input on a touchscreen. There needs to be another variable/option added to initiate the slidebox close.
Reply With Quote
  #28  
Old 03 Sep 2012, 01:14
Andrei29 Andrei29 is offline
 
Join Date: Mar 2010
Originally Posted by ChiNa-Man View Post
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..
I wanted to say a BIG THANK YOU to Mr China-Man for his professional assistance to my request. He actually help me to fix the FB slider and making it work perfectly. Not only that, he put up screen shots and guide to teach me what went wrong in my slider as there isn't a fan page.

I am really thankful to such a rare nice soul in vb org as most experts here would charge a fee for such professional job but not mr China-man, who went all out to help me with passion.

Words alone cant express my gratitude to him but I wanted to take this opportunity to share his professional knowledge and attitude with everyone so if you have complex paid request, you can definitely approach him. He will ensure that everything is done up nicely accordingly.

Highly recommended and I will definitely go back to him. Thanks Mr China-man! God bless.
Reply With Quote
  #29  
Old 03 Sep 2012, 03:31
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Originally Posted by Andrei29 View Post
I wanted to say a BIG THANK YOU to Mr China-Man for his professional assistance to my request. He actually help me to fix the FB slider and making it work perfectly. Not only that, he put up screen shots and guide to teach me what went wrong in my slider as there isn't a fan page.

I am really thankful to such a rare nice soul in vb org as most experts here would charge a fee for such professional job but not mr China-man, who went all out to help me with passion.

Words alone cant express my gratitude to him but I wanted to take this opportunity to share his professional knowledge and attitude with everyone so if you have complex paid request, you can definitely approach him. He will ensure that everything is done up nicely accordingly.

Highly recommended and I will definitely go back to him. Thanks Mr China-man! God bless.
I am seriously very humbled! Thank you for your nice words! Me myself I really look up to each and everyone on here, and the help I provide is just the human that I am. I do my best to help people, and thats also the reason I build my forum so I could help people needed help! Thank you MATE, you trully put a big smile on my face... I really appreciate it. It makes me go on and on, because of people like you! I really wish you and your family all the best, and if anything in future you can always pm me,,, always...
__________________
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

Last edited by ChiNa; 03 Sep 2012 at 03:49.
Reply With Quote
  #30  
Old 03 Sep 2012, 03:33
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Originally Posted by bzcomputers View Post
I'm still getting the same results. The no conflict variable was already in there in line three, not sure if having it twice is needed (but I personally have no idea).
Ok I think I know what could be wrong, I spoke to an IPAD developer which is my good friend, first of all ask the persons using the IPAD, and ask them what was the name of the browser system they for the forum. And we all know like INTERNET EXPLORER and FIREFOX has also have conflicts that not really works JQUERY and JAVASCRIPTS!

This is the exactly same thing with IPADS and what browser they use, its a very common thing, and so far there is no right fix for that.. And many systems cannot tolerate some of the slide systems and codings the jqeury uses. And even if you use the BEST computer out there, you still have to have the right BROWSER and the RIGHT system..
Lets stick to our desktop systems, and laptop... And i think I used more than 3 days to find a sulotion for this, and i finally figured out that there is not really any fix for this... and true i stick to that.. and we did what we could... At least i did my best..
__________________
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

Last edited by ChiNa; 03 Sep 2012 at 04:16.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

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


New To Site? Need Help?

All times are GMT. The time now is 10:14.

Layout Options | Width: Wide Color: