How to add Floating share box to your website

Posted In: Tutorials, By , 69 Comments
advertisement

After spending couple of hours searching for floating share box plugin for WordPress, I  finally decided not to use plugins. Those plugins were not good enough to produce what I thought of  like menus on Mashable or Hongkiat. Then I came across this article Scroll/Follow Sidebar, Multiple Techniques by Chris Coyier.

In this tutorial, I will use same jQuery code from Chris Coyier’s article and will add some bits and pieces to build a floating share box. Keep in mind this is not a plugin, but can be integrated with static as well as dynamic sites.

Floating share box

 

Enter your email and download it now!

Enter your email address and the download link will be sent right to your inbox.



Step 1

Create a HTML page and add Div’s with id’s to structure page.

<div id="wrapper">
			<div id="page-wrap">

					<div id="content">

						<div id="main">

						</div>

						<div id="sidebar">

						</div>
					</div>
					<!-- Content stops here -->
			</div>
			<!-- Page-wrap stops here -->
</div>

Step 2

Add a DIV just below the page-wrap DIV with your social media buttons (Retweet, Facebook, Stumbleupon…).

<div id="floating-box">
				<div id="box">
					<div><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div>
					<div><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div>
           			<div><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
				</div>
			  </div>

Step 3

From HTML IPSUM copy some dummy text to fill empty main and sideebar DIV.

Step 4

Next add jQuery code between head tag.

       $(function() {
            var offset = $("#box").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#box").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#box").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

Here we are not modifying code, it is identical to Chris Coyier’s article except #box :).

Step 5

Add following CSS code to create a layout for the page. You can create separate CSS file or embed it on the header within style tag.


* { margin: 0; padding: 0; }

body { font: 14px/1.4 Verdana, Arial, sans-serif; font-weight: normal;background-color: #f2f2f2;float: left;width: 100%; color: #333333;
}

#wrapper{width: 800px;margin: 0 auto;padding: 0px;}

#content{float: left;width: 100%;border: 1px solid #B5076D;background-color: #FFFFFF;font-size: 12px;line-height: 20px;}

#page-wrap {  position: relative;float: left; margin: 50px 0;}

h1{font-size: 1.6em;color: #B5076D; font-style: italic;padding: 20px;}

p { margin: 0 0 10px 0; }

#main { width: 460px; float: left; padding: 20px; background-color: #f1f1f1;border: 1px solid #DDDDDD; margin: 20px;display: inline;}

#sidebar { width: 215px; float: right;border: 1px solid #DDDDDD; background-color: #f1f1f1;margin: 20px; display: inline;}

#sidebar ul{padding: 10px;}

#sidebar ul li{font-size: 0.9em;margin: 0 0 0 20px;}

Step 6

To make social media float box beautiful and working, add the following CSS code.


#box{position: absolute;left: -70px;border: 1px solid #B5076D; border-right: 0px;padding: 10px;background-color: #FFF;}

#box div{margin: 10px 0;}

All done, you can see floating share box on left hand side of the page.

This is very simple and easy tutorial that works on most browsers (IE6, IE7, IE8, Safari, FIrefox). Hope everyone can create their own floating share box.

Enter your email and download it now!

Enter your email address and the download link will be sent right to your inbox.



We are the leading the world in providing best actualtests cdl test and realtests sat exam prep solutions. Our incredible offers for certkiller gre preparation dumps.

About the Author:

Web designer / developer keen and passionate about designing and developing websites.
  • Pingback: [User Link:How to add Floating share box to your website] | Tips for Designers and Developers | tripwire magazine

  • http://NoneYet Bhaskar

    If you want to have a div in a fixed position that does not move no matter how much you scroll, and don’t want to wait for the floating box to float into position, the you can use simple HTML style tag.

    Just note that it won’t have the “cool” effect of actually moving but it does the job. Something like a poor man’s CGI.

  • http://NoneYet Bhaskar

    update: some problem caused my code to “disappear”, so here’s the code again. (Fingers crossed)…

    style=”position:fixed; top:150px; width:120px; height:300px;”

  • Pingback: How to add Floating share box to your website | reADactor

  • http://www.graphicdesignblog.org Graphic design

    Nice tutorial. It gives me new concepts for updating my web. I haven’t used all of them yet, hopefully it will give a nice look to my web.

  • http://www.samirtuladhar.com Samir

    @Bhaskar Its true that you can use style=”position:fixed;” to fix a position no matter how much scroll but in that case it will only position on the left or right side of your window. In this tutorial it actually shows the floating box is scroll next to outer boundary of the page.

    That’s why we need to use position : absolute and position: relative on parent div of the box.

  • http://www.samirtuladhar.com Samir

    @Graphic design Thanks. Surely it will help your website.

  • http://theurbn.com The Urban Times

    Hi Samir,

    Thanks for the tutorial.

    The css and html worked fine, the box is successfully installed down the left side of my content.

    However, the jQuery code is not working, which I wrapped it like so:

    ***jquery code***

    I put it above the tag in my header.php but all that it does is put an ‘e’ in my header above the entire site.

    What do I do to fix this issue?

  • http://www.samirtuladhar.com Samir

    @The Urban Times

    Add line no 12 (link to jquery.min.js) from the download file on your header.php. This should solve your problem. Unfortunately I can’t show you the code here. :(

  • http://theurbn.com The Urban Times

    WAD,

    Thanks, but I was unable to understand your response.

    Please email me at charliehilton[at]gmail[dot]com

    The download file only had basic css and and index.html

    • http://www.samirtuladhar.com Samir

      @The Urban Times Check your mail for steps to add.

  • http://NoneYet Bhaskar

    @WAD and Samir – I just had a chance to look at this website in my “other” work computer and noticed a peculiar problem with this floating box. If you can have a look at the design at the resolution of 1024×768 you will understand what I mean. I am using mozilla.

    This is not a criticism, it’s just a mental note for all designers. I believe designers need to understand that there are still people who use older computers that do not support more than 1024×768 resolution (or maybe less).

    This design of WAD is for 1024×768, yes, but the addition of the floating box made it a bit wider and “ALL” designers should make a note of making sure it works in these “low” resolutions as well.

    • http://www.webanddesigners.com WAD

      @Bhaskar Minimum browser size people using these days are 1024 X 768 and webanddesigners is designed for 1024 X 768. We know the floating box cannot be seen in browsers 1024 or less but we have no option to show floating box within 1024 window size. To share articles you can still use share box on bottom of each article. Thanks any way for your suggestion.

  • Pingback: 200 Fresh Articles for Designers, Developers and Freelancers | tripwire magazine

  • http://krazzycollections.blogspot.com subhrajyoti

    sir ,
    i am subhrajyoti , i have a blog

    http://krazzycollections.blogspot.com

    I want to use floating follow(google friend connect) button using html. please reply

  • Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.39) - Speckyboy Design Magazine

  • Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.39) - Programming Blog

  • http://karnlabs.com karan

    Thanks dude for this info.
    I was really in search of such a plugin or a function that would enable me to add a floating share box.
    Its cool….

  • http://www.cssfind.com Sivaranjan

    This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time. I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)

  • Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.39) « Son of Byte & Web Design & Development Magazine

  • http://www.myunv.com/ Sunny Singh

    As cool as this may seem, I think it’s pretty annoying to have this box keep following you when you scroll. Also I feel a bit pressured to share the article/page which will make me do the opposite and simply ignore it. If an article really is that great, people will share it naturally without the aid of a following share box.

    However great article on the use of this concept.

  • http://www.samirtuladhar.com Samir

    @Sunny Your statement is true in one way but I did find people who didn’t share the article cause they couldn’t find any share thingy on the website. Its just a way of convenience to reader. May be I should write another tutorial for those who are annoyed by the floating box would be able to hide it by a click of a button. :)

  • http://digiknowzone.com digiknowzone

    Awesome tute! Being a webby guy myself, I grew tired of plugins that don’t meet my requirements. This was very helpful. I’m applying it to my site right away. Thanks man!

  • http://digiknowzone.com digiknowzone

    I have a question, where in a WP theme’s files would you insert these codes? It’s easy to do this in a regular html doc, but i’m having a difficult time with a wp-template. Any enlightenment would be very helpful. Thanks!

  • http://www.webanddesigners.com WAD

    @digiknowzone For your website just add the HTML code below

    inside single.php . Hope it works
  • http://digiknowzone.com digiknowzone

    @WAD: I already tried it but it does not appear. I’m using a mystique theme.

  • Carl

    Am I the only person who finds moving objects on the left margin extremely annoying? A stationary column is tolerable but this constant motion outside the center of my focus is very distracting. When I come to a page that uses this technique I usually close it as quick as I can. Someday these moving floats will be as derided as HTML .

  • http://www.millgrinding.com grinding mill

    i’m looking this. nice. but i want to the box fixed.how to set?

  • nimad

    hi i did everything in the toturial but the floating effect is not working i put the css for box id and the jquery script but only the css applied and the box is still not moving down when i scroll . is all the css in the tutorial necessary or just the box id and the script ??

    • http://www.webanddesigners.com WAD

      Can you provide me the URL where you are implementing this code. You don’t need all CSS except #page-wrap { position: relative;float: left; margin: 50px 0;} and #box{position: absolute;left: -70px;border: 1px solid #B5076D; border-right: 0px;padding: 10px;background-color: #FFF;}.

  • Raiman

    Thanks for taking the time to document it all out! I was wondering if I could get some help, though, because I also can’t seem to get the floating effect to work. I tested to see if jquery is working via an alert, and it is. So I can’t figure out what’s going wrong? I made sure to have the #page-wrap and #box divs and CSS. The URL I’m working on is http://bit.ly/fonoVY

    • http://www.samirtuladhar.com Samir

      Checked the site you are working on, only problem on the page is change your javascript source from ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js to http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2.

      Sorry to mention above it needs to be ver=1.3.2 .

      • Raiman

        Samir! Thanks so much for getting back to me! I went ahead and took your suggestion, fiddled a bit with wordpress, and changed the jQuery version to 1.3.2. Still no success, though. Would you have a look for me again? Would love to get this working! =D

      • Raiman

        Also, just so you know what I’m trying to create, it’s actually not a share box (sorry!) but a floating table of contents using the same jQuery effect. I replaced the box from where it was yesterday, to the right side of the actual content of the page. Hoping to get it to scroll down as people read the content.

        Thanks again for the time you’ve put it, Samir!

        • http://www.samirtuladhar.com Samir

          The plugin inline-mp3-player is clashing with the jquery for floating box. Try to deactivate the plugin, I think it will work.

          Removing prototype.js of inline-mp3-player plugin worked for me.

          • Raiman

            SAMIR!
            IT WORKS NOW!

            I’m ecstatic now, lol.

            Thank you so much for caring enough to respond, reach out, and help. I really, really appreciate it.

  • http://www.samirtuladhar.com Samir

    No problem

  • http://www.jobvirtue.com Jodi

    Thanks for the post, I’ll have to work on getting my coding up to par.

  • http://www.ronnatal.com Ron

    what if you wanted it to stop floating after a certain distance… or for example on this page you have it floating from the top but what if you don’t want to it hover over your footer.

  • http://www.rickaurora.com Brampton Realtor

    I am a newbie at coding and I am learning new techniques and strategies. Thank you for posting this code as I have used it on my website.

    How would you change the social network sites that you want to include in the share box?

  • http://www.sclzsx.com Free Link Directory

    great guide thank you for sharing.

  • http://www.squidoo.com/brampton-real-estate22 Brampton Real Estate

    Thank you for the great information. I am using this code on my new website.

    • http://www.webanddesigners.com WAD

      Thanks for using our code

  • http://www.codemyconcept.com/ CodeMyConcept

    Thanks for showing the “how to do it”

    With this information we could see more amazing web designs

  • http://www.best-of-european-union.eu lentak

    Hi,

    could you please add an article about how to add such floating box just for banner? With as much simple code as it can? Thank you.

  • http://www.sstudio.me Web dizajn Crna Gora\

    Great, I need this

  • http://www.processflows.co.uk Tim

    Very helpful article. I used your code to add a floating ‘call to action’ box on the right-hand side of our WordPress-driven site and blogs.

    One note is that if you have jQuery.noConflict(); set somewhere in your other coding, you’ll need to change the $ to jQuery in the code for this float.

    Works beautifully in all browsers and has received many good comments. Thanks very much.

    • http://www.webanddesigners.com WAD

      Thanks for the comment. For WordPress you need to replace $ with jQuery.

  • http://www.ebuybeauty.com/ winkey

    it is very useful, i have found it for a long time

  • Travis

    Great tutorial! I am implementing this share box on my site and i got it all to work right but, is their a way for the share box to not keep scrolling but instead for it just stay at the top of the page? For example the share box on this page.

    Any help is greatly appreciated. Thanks

  • http://mymonkeydo.com/ Funkysmell

    Sweeet… This is exactly what I was looking for. You may want to change the jquery ready function so that it works well with wordpress and if there are other scripts involved:
    jQuery(document).ready(function($) {

    });

  • floater

    Hi I’m using this script to move a div on the right alongside content to the left, My problem is that my div is slightly below the fold line to begin with, so when scrolling down it scrolls infinitely can it be stopped when it gets to the foot of the page, at the moment its pushing past my footer and can keep going, thanks

  • http://brunomontei.ro/ Bruno Monteiro

    Exactly what I was looking for! Many thanks for your help. :-)
    Works like a charm.

  • http://peakzen.com Ron

    How would this be done on blogger??
    tnx :)

  • http://camera.areadigital.tv Best Digital Camera

    Great tutorial..
    I will definitely use it on my website.

    thanx

  • Manish

    Hi,

    Nice script but just want to know whether can I use it for my commercial project i.e., I am web developer and have to integrate it in my clients’ websites.

    • http://www.webanddesigners.com WAD

      Sure you can.

  • nold

    hey man whats the plugin you use on your website
    the one thats floating on the left side , the one that has social networking media icons

    can you let me know , thanks

  • http://www.go2mobiles.com Jacob Oram

    I am new web designer. very helpful post for me think all. great post.
    thanks.

  • http://www.adriancrellin.co.uk Adrian

    Hey, seems to be working, but was wondering if there is any easy way to get the floating div to stop at the footer, rather than scrolling past the footer an off the bottom of the page?

    Any ideas would be great! :)

  • http://www.vormetric.com Vormetric Encryption

    Thanks for the tutorial, I tried to implement this on our website, but the float goes all the way to the left, instead of to the left of the page which is narrower than the screen. I adjusted the left = -70px, but that still does not solve the issue, any suggestion ??