How to create a floating social bar with HTML and CSS3

A few months ago we redesigned our website and one of the topics that we wanted to change were the buttons on social networks to share the content. The debate always revolved around two issues; on the one hand the location of the social bar (vertical or horizontal, floating or static) and on the other hand the social networks that we would include within that social bar (twitter, facebook, pinterest…)

Regarding the location of social icons, we were clear that it should go as unnoticed as possible, because the important thing is that the users read the content and if they like it and see it useful, they can share it. For that reason we saw interesting the location of the buttons of the networks at the end of the article, so that once read the post the user can share it. Remember, the user experience goes first.

But giving you the opportunity to use the buttons to share the post at any time seemed like a good option too. For this we had to design a floating social button panel that would be fixed in the vertical part of the screen when we were in a desk, and horizontally in the lower part in mobile and tablets. We made several designs and tests with HTML and CSS, and here we share one of the options that we liked the most.

Social network bar fixed with HTML and CSS3

For this design oriented to mobile phones and tablets we opted for a horizontal bar that remained fixed on the inside of the screen, occupying 100% of width. The social networks selected are Facebook, Twitter, Pinterest and Whatsapp, which are the four that give us the best results for our content. We also added two more blocks, one that takes us to the newsletter subscription form and another to go to the next article.

The HTML is composed of a container aside with a list ul, where each of the social icons will be an element of the list.

<aside class="social-sharing">
	<ul class="menu-social">
		<li class="social-item"><a href="http://twitter.com/intent/tweet?text=SiloCreativo&url=https://www.silocreativo.com/en/" target="_blank"><span class="screen-reader-text">Twitter</span></a></li>
		<li class="social-item"><a href="http://www.facebook.com/sharer.php?u=https://www.silocreativo.com/en/&t=SiloCreativo" target="_blank"><span class="screen-reader-text">Facebook</span></a></li>
		<li class="social-item"><a href="https://www.pinterest.com/pin/find/?url=https://www.silocreativo.com/en/" target="_blank"><span class="screen-reader-text">Pinterest</span></a></li>
		<li class="social-item"><a href="whatsapp://send?text=https://www.silocreativo.com/en/" data-action="share/whatsapp/share"><span class="screen-reader-text">Whatsapp</span></a></li>
		<li class="social-item newsletter"><span>Newsletter</span></li>     
		<li class="social-item next"><a href="#">Next</a></li>
	</ul>
</aside><!-- .social-sharing -->

The aside container with the .social-sharing class will be the social bar itself and will be positioned as fixed (although in the example you will see it as absolute, since it is only this way to position it in the example window created for that purpose.)

.social-sharing {
	display: block;
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
}

To organize the social icons we have opted for flexbox, granting a fixed width to the icons of the four social networks (40px) and distributing the remaining space between the newsletter block and the link to go to the next article.

.social-sharing ul.menu-social {
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrapwrap;
	flex-wrap: nowrap;
}

.social-sharing ul.menu-social li {
	flex: 0 1 40px;
	height: 40px;
}
.social-sharing ul.menu-social li.newsletter {
	flex: 1 1 auto;
	line-height: 40px;
	position: relative;
	background-color: #fafafa;
	background-image: repeating-linear-gradient(135deg, #ffe4e1 0px, #ffe4e1 5px, transparent 5px, transparent 10px, #e1f3ff 10px, #e1f3ff 15px, transparent 15px, transparent 20px);
}
.social-sharing ul.menu-social li.next {
	flex: 1 1 auto;
}

Regarding social icons, we have followed the steps and principles explained here. Using the same font of icons (FontAwesome in this case) that we already use in our web in the icons of the hamburger menu or searching for the icons of twitter, facebook and other networks is a positive point, because we do add neither images nor additional load to our web. The use of CSS pseudo elements allows us to generate these social icons without images to be seen correctly on retina screens.

ul.menu-social li a::before {
	content: "\f135";
	display: inline-block;
	font-family: FontAwesome;
	font-size: 20px;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 40px;
}
ul.menu-social li a[href*="facebook.com"]::before {
	content: "\f09a";
}
ul.menu-social li a[href*="twitter.com"]::before {
	content: "\f099";
}
ul.menu-social li a[href*="pinterest.com"]::before {
	content: "\f231";
}
ul.menu-social li a[href*="whatsapp://send"]::before {
	content: "\f232";
}

This CSS is applied globally to the entire web, but if you want to limit it so that it only shows on mobile phones and tablets, then you must use a mediaquery and contain all the CSS rules within it.

Floating social bar plugins and other options

Maybe you find it strange that in a WordPress project we choose to design the social bar with HTML and CSS and not using a plugin of the many that there are. The truth is that in version 2.0 of SiloCreativo we used the plugin Jetpack with its sharing module, but we decided to stop using it.

The reason is very simple. Most plugins use their own icon libraries, new styles and the JS file. This is to increase the load of the web to finally have to modify styles to adapt them to our design. The only thing we lost was being able to count the number of times it had been shared in networks, but honestly, we do not think that it has enough weight to load 3 or 4 extra files, in addition to the corresponding calls to post the number of shares.

So we opted for something lighter (HTML and CSS only) and customizable where to add, as you have seen, a subscription to the newsletter in addition to navigating to the next article. What do you think of this decision? How do you have the social icons implemented on your website?