CSS:How To Create Fixed Position Share Box

CSS:How To Create Fixed Position Share Box
by Janeth Kent Date: 16-05-2013 css facebook share box fixed

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

 
by Janeth Kent Date: 16-05-2013 css facebook share box fixed hits : 4726  
 
Janeth Kent

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.

 
 
 

Related Posts

New graphic window units - CSS

''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience. The project has 15 focus areas and one…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Why shouldn't we use black?

Nowadays it is becoming more and more common for web pages to have the option to set them in dark mode, or to base their aesthetics directly on black or…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…