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

Comments
  #2  
Old 05 Aug 2012, 04:31
xixxon's Avatar
xixxon xixxon is offline
 
Join Date: Jun 2007
Real name: X muội
Nice
"Software hay gianh cho nguoi viet" should be "Phần mềm hay dnh cho người Việt" :P
__________________
vivut.vn
Reply With Quote
  #3  
Old 05 Aug 2012, 08:15
Krusty1231's Avatar
Krusty1231 Krusty1231 is offline
 
Join Date: Aug 2010
Real name: Jerry
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!
Reply With Quote
  #4  
Old 05 Aug 2012, 18:02
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
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

Last edited by ChiNa; 05 Aug 2012 at 20:38.
Reply With Quote
  #5  
Old 09 Aug 2012, 02:59
hrenos hrenos is offline
 
Join Date: Jul 2012
wow Im impressed with this, got confused little with the iframe but got it to work perfectly, thanks
Reply With Quote
  #6  
Old 09 Aug 2012, 12:13
qpurser qpurser is offline
 
Join Date: Aug 2011
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.
Attached Images
File Type: png Screen Shot 2012-08-09 at 7.09.41 AM.png (45.8 KB, 44 views)

Last edited by qpurser; 09 Aug 2012 at 12:52.
Reply With Quote
  #7  
Old 09 Aug 2012, 15:46
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
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&amp;width=260&amp;height=590&amp;colorscheme=light&a mp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;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

Last edited by ChiNa; 09 Aug 2012 at 15:56.
Reply With Quote
  #8  
Old 09 Aug 2012, 18:37
qpurser qpurser is offline
 
Join Date: Aug 2011
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:

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

Attached Images
File Type: png Screen Shot 2012-08-09 at 1.31.13 PM.png (30.6 KB, 64 views)
Reply With Quote
  #9  
Old 11 Aug 2012, 10:05
kfyonur kfyonur is offline
 
Join Date: Apr 2008
it didn't work.
Attached Images
File Type: jpg ekraaaan.jpg (83.9 KB, 49 views)
Reply With Quote
  #10  
Old 11 Aug 2012, 14:11
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
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

Last edited by ChiNa; 11 Aug 2012 at 14:19.
Reply With Quote
  #11  
Old 11 Aug 2012, 20:50
kfyonur kfyonur is offline
 
Join Date: Apr 2008
i put everywhere but didn't work.


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

Reply With Quote
  #12  
Old 11 Aug 2012, 23:04
CharlieDelta CharlieDelta is offline
 
Join Date: Apr 2010
Great idea!
How to move it to the left side?
Reply With Quote
  #13  
Old 30 Aug 2012, 18:21
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
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:

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

__________________
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; 30 Aug 2012 at 18:47.
Reply With Quote
  #14  
Old 30 Aug 2012, 18:27
bzcomputers's Avatar
bzcomputers bzcomputers is offline
 
Join Date: Apr 2012
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
  #15  
Old 30 Aug 2012, 18:42
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
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:


__________________
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; 30 Aug 2012 at 19:00.
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 19:30.

Layout Options | Width: Wide Color: