How to Create a fixed Social Media Sidebar

Create a fixed Social Media Sidebar. Social Media plays a vital role in your online marketing to reach more customers. The social media sidebar is very helpful for every website and it assists the user to get updates from the website. Also, the fixed/sticky social bar definitely increases the social media followers of your website and helps to encourage traffic to your website. In this tutorial, we are going to build a sticky social media sidebar with the help of HTML, CSS, and a bit of javascript without impacting website design.

We’ll give a simple CSS and a bit of javascript code to add an animated sticky social bar on the left side of your website. You can add this social media sticky sidebar with smooth hover-over animation using CSS.

In this example code, we’ll perform a social share button bar on the left side with pure CSS. In this social bar, some of the famous social media links will be included. Such as Facebook, Twitter, LinkedIn, Instagram, and Pinterest.

HTML Code

So, now just placed the following HTML in the <body> element of the webpage, and figure out your social profile links to the respective social icons.

<!DOCTYPE html><html>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<div class="s-soft">
<a href="/" class="s-item facebook">
<span class="fa fa-facebook"></span>
</a>
<a href="/" class="s-item twitter">
<span class="fa fa-twitter"></span>
</a>
<a href="/" class="s-item pinterest">
<span class="fa fa-pinterest"></span>
</a>
<a href="/" class="s-item linkedin">
<span class="fa fa-linkedin"></span>
</a>
<a href="/" class="s-item instagram">
<span class="fa fa-instagram"></span>
</a>
<a id="so-close" class="s-item print">
<span class="fa fa-arrow-left"></span>
</a></div>
<a id="so-open" class="s-item print so-collapse">
<span class="fa fa-arrow-right"></span></a>
</html>

CSS Code

The following short CSS is enough to implement a Sticky Social Icons bar on your website. Place this CSS in the <head> section of the web page.

<style>
*{margin:0;}.s-soft{ position: fixed; top: 100px ;
 left: 10; z-index: 1000; transition:all linear 0.2s ;}
.s-soft a:first-child{ border-radius: 0 5px 0 0;}
.s-soft a:last-child{ border-radius: 0 0 5px 0;}
.s-item { display:block; width: 60px;height: 60px;
color: white; font-size: 25px;line-height: 60px;
text-align: center;transition:all linear 0.2s ;}
.s-item:hover { width:110px;
border-radius:0px 20px 20px 0px;  }
#so-open { position: fixed; top: 100px ;
left: -90px;border-radius:0 30px 30px 0;
transition:all linear 0.2s ;}
.facebook {background-color:  #3b5999;}
.twitter {background-color: #3AAFD6;}
.print {background-color: #de3c7d;}
.pinterest{background-color: #BD081C;}
.linkedin{background-color: #0e76a8 ;}
.instagram{background-color:  #c32aa3;}
.so-collapse{left: -60px; }
</style>

Javascript Code

The following short CSS is enough to implement a Sticky Social Icons bar on your website. Place this javascript after the <head> section but before </head> of the web page.

<script>
  window.console = window.console || function(t) {};
</script><script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js">
$(document).ready(function () {
  $('#so-close').click(function () {
    $('.s-soft').addClass('so-collapse');
    $('#so-open').delay(300).css('left', '0');
  });

  $('#so-open').click(function () {
    $('#so-open').css('left', '-60px');
    $('.s-soft').removeClass('so-collapse');
  });}); </script>

Here we’ve figured only some most popular social icons to the sticky social sidebar, you can add other social media icons or useful links based on your requirement.

One thought on “How to Create a fixed Social Media Sidebar”

Leave a Reply Cancel reply