CSS:How To Create Fixed Position Share Box

Do you want your social media buttons to always be on the screen for your visitors to click on?

If yes then you want to have a fixed position share box on your website. This allows your social media buttons to always be on the screen even when the user scrolls to read the rest of the page, giving them easy access to click on a button to share your article.

To achieve this it's relatively easy all it is a bit of CSS to make your social buttons stay in the same place even as you scroll. In this tutorial I will teach how to achieve this goal and make your social media buttons always be on the page even when you scroll, additional I will show you how to take this code and add it to your WordPress blog. Click on the button below to see a demo this in action.

Demo

Build The HTML

This is the HTML that will be used as the floating box. All your social media button will go inside here to be displayed to the visitor.

This can just be a simple div or you can style it in whatever you like, for this example it will just be a simple div with the buttons inside.

<div class="share_box">
    	<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="paulund_">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    	<!-- Place this tag where you want the +1 button to render -->
	<g:plusone size="tall"></g:plusone>
	<!-- Place this tag after the last plusone tag -->
	     <script type="text/javascript">
	(function() {
	     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
	     po.src = 'https://apis.google.com/js/plusone.js';
	     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	})();
	</script>
        <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>

In the code above I have created a DIV with 3 social media buttons in there. The buttons I am using are from Twitter, Google+ and StumbleUpon but you can use what ever social networks you want.

Fixed Position CSS

To get the HTML to stay in the same place even as you scroll all you have to do is use the CSS attribute position with the value fixed, with a top and left value and it will stay in this position.

..share_box{
	position:fixed;
	width:50px;
	top:10%;
	left:10%;
}

Now the DIV will stay in the same position on the page and the top left corner of the page.

Now we can style it to make it stand out even more.

.share_box{
	position:fixed;
	width:50px;
	top:10%;
	left:10%;
	border:3px solid #a1a1a1;
	background:#FFF;
	padding:15px;
	-webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

This will make the background white to stand out with a border around the whole box. But to make the buttons easier to see we add some padding inside the box to give it some more white space.

Add To WordPress Blog

Now you have created a fix position DIV you can simply add this to your blog by quickly changing the theme. If you are using WordPress the files you will need to change is the header.php and the style.css.

In the header.php find where your header ends and add your HTML in here.

<div class="header"></div>
<div class="share_box">
    	<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="paulund_">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    	<!-- Place this tag where you want the +1 button to render -->
	<g:plusone size="tall"></g:plusone>
	<!-- Place this tag after the last plusone tag -->
	     <script type="text/javascript">
	(function() {
	     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
	     po.src = 'https://apis.google.com/js/plusone.js';
	     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	})();
	</script>
        <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class="content"></div>

Then open your style.css file and add your CSS to the end.

.share_box{
	position:fixed;
	width:50px;
	top:10%;
	left:10%;
	border:3px solid #a1a1a1;
	background:#FFF;
	padding:15px;
	-webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

Save both files now look at your blog you will have a fixed position share box which will always be on the page as you scroll.

Things To Be Careful Of

The problem with this is for visitors which are using small resolution on their monitor or have zoomed in on the browser. This is because your box is positioned using percentage so it will be placed 10% from the left and 10% from the top of the page. But if there isn't enough space for the box it fit in the box will move over your content.

Therefore make sure you are aware of the most common lowest resolution your visitors are using, which can be found from your analytic reports. Once you know this value you can change the top and left attributes to make sure your share box fits in on all your visitors browsers. If you want you can put the left values at 0% so the box will be on the edge of the page, but make sure you give the top attribute a value or it will go over your header.

If you get stuck on anything let me know.

Demo

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.