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 : 2830  
 
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 END DEVELOPMENT.

 
 
 

Related Posts

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…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

Small and medium enterprises can now earn money by holding online events on Facebook

Facebook has launched a new feature that allows small and medium enterprises, large companies, content creators, educators, media... to earn money by holding online events on the social network. Corporate…

Facebook, three questions to recognize fake news (and not share it)

Where's it coming from? What's missing? How do you feel? These are the three questions that Facebook recommends to all users to ask themselves before sharing news. The initiative is…

Introduction to BEM (Block Element Modifier)

Problems with naming CSS classes I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving…

Facebook: how to remove hidden data and personal information

Facebook is a great social network that allows us to be always updated on all the news of our friends or family or even the most relevant news of the…

There are 470,000 WhatsApp groups indexed on Google and Facebook says it's not his fault

Want to find new WhatsApp groups? Google it. Reporter Jordan Wildon has discovered hundreds of thousands of private groups through the search engine thanks to public invitation links. Not all were…

Styling React components: recommendations and suggestions

With CSS we can set the presentation of a document through the rules that control the formatting of an element on a web page. Using CSS techniques, we can make…

How To Create a Logo SVG Animation Using Only CSS

Web animations are a joy. They enhance the user experience by providing visual feedback, guiding tasks, and vitalize a website. Web animations can be created in several ways, including JavaScript libraries,…

CSS in JavaScript (CSS-in-JS) Vs CSS in CSS

What actually is CSS-in-JS? You've certainly heard or read words like CSS-in-JS, Styled Components, Radium, Aphrodite and you're and you're stuck in limbo there, "why is it? I'm completely happy about CSS…

Best 5 Frontend Development Topics in 2019

Ah, a new year. A time of positivity, a time to restart. For new objectives and proposals. And in the world of developers, to look at the scenery and decide…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration