Adding a Sticky Social Share Bar to your Website

Increase social engagement by adding a sticky social share bar to your website. This allows visitors to share content on social media from wherever they are on your website.

Increase social engagement by adding a sticky social share bar to your website. This allows visitors to share content on social media from wherever they are on your website. In this article, Solodev will show you how to add this functionality to your website.

Below is the HTML, CSS, and JavaScript required.

Step 1 - social-share.html

Add the HTML below to your web page

<ul class="ct-socials">
  <li>
    <a href="/" target="_blank"><i class="fa fa-twitter"></i></a>
  </li>
  <li>
    <a href="/" target="_blank"><i class="fa fa-facebook"></i></a>
  </li>
  <li>
    <a href="/" target="_blank"><i class="fa fa-pinterest"></i></a>
  </li>
  <li>
    <a href="/" target="_blank"><i class="fa fa-linkedin"></i></a>
  </li>
  <li>
    <a href="/" target="_blank"><i class="fa fa-flickr"></i></a>
  </li>
</ul>
<section class="section triad-section">
  <div class="container">
    <div class="row">
      <div class="col-md-3 triad-sub-section">
        <p class="detail-paragraph"><strong>Business Intelligence</strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.</p>
        <p class="detail-paragraph"><strong>Mining your Data</strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.</p>
        <p class="detail-paragraph"><strong>Pattern Analysis</strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.</p>
        <p class="detail-paragraph"><strong>Data Visualizations</strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.</p>
      </div>
      <div class="col-md-3 triad-sub-section">
        <p class="detail-paragraph"><strong>Search</strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.</p>
        <p class="detail-paragraph"><strong>Dynamic Data</strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.</p>
        <p class="detail-paragraph"><strong>3rd-Party Integrations</strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.</p>
        <p class="detail-paragraph"><strong>Data Manager</strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc. </p>
      </div>
      <div class="col-md-6">
        <img src="https://www.solodev.com/assets/follow-me/devices.jpg" alt="">
      </div>
    </div>
  </div>
</section>

Note: While most of the above HTML is optional and to be replaced with your own content, what's imperative is the unordered list with the styling class "ct-socials". This list contains the individual social share buttons.

Step 2 - social-share.css

Download the CSS below and include it in your web page

social-share.css

Step 3 - Add the includes below to your web page

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="social-share.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

In this article, Solodev showed you how to add a sticky social share bar to your website. By making it easier to share your website content, you increase the chance that website visitors will share your website content across social media channels.

Download from Github

Share on Facebook Tweet It