Social media sites like Twitter, Linkedin, FB, etc are a great source to share your content. You have a new product/blog and you would want to add ability to share it across social media on your websites.

In this tutorial, I’ll cover how to add a sticky vertical social media share on your website. If you want to add dark mode to your website - check this article.

Let’s design a simple div which contains a link to twitter and a icon (logo for social media we are referring).

<div class="icons twitter">
  <a href="https://twitter.com/mkfeuhrer" aria-label="Twitter - Mohit Khare">
    <i class="fab fa-twitter"></i>
    <!-- <fa :icon="['fab', 'twitter']" /> Vue.js/Nuxt.js-->
  </a>
</div>

Here we added two user defined CSS classes icons and twitter

.icons {
  margin: 0.25rem;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 10%;
}

.twitter {
  background-color: #00aced;
}

i {
  color: white;
}

Let’s add other social media icons as well with respective CSS properties. We would also wrap this within a div

<div class="social-container">
  <div class="icons twitter">
    <a href="https://twitter.com/mkfeuhrer" aria-label="Twitter - Mohit Khare">
      <i class="fab fa-twitter"></i>
    </a>
  </div>
  <div class="icons github">
    <a
      class
      href="https://github.com/mkfeuhrer"
      aria-label="Github - Mohit Khare"
    >
      <i class="fab fa-github"></i>
    </a>
  </div>
  <div class="icons linkedin">
    <a
      href="https://www.linkedin.com/in/mohitkhare1996"
      aria-label="Linkedin - Mohit Khare"
    >
      <i class="fab fa-linkedin-in"></i>
    </a>
  </div>
  <div class="icons facebook">
    <a
      href="https://www.facebook.com/mkfeuhrer"
      aria-label="Facebook - Mohit Khare"
    >
      <i class="fab fa-facebook-f"></i>
    </a>
  </div>
  <div class="icons reddit">
    <a
      href="https://www.reddit.com/user/mkfeuhrer"
      aria-label="Reddit - mkfeuhrer"
    >
      <i class="fab fa-reddit"></i>
    </a>
  </div>
</div>

Complete CSS classes for code above -

.social-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.icons {
  margin: 0.25rem;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 10%;
}

.facebook {
  background-color: #3b5998;
}

.twitter {
  background-color: #00aced;
}
.linkedin {
  background-color: #007bb6;
}

.github {
  background-color: black;
}

.reddit {
  background-color: #ff4301;
}

i {
  color: white;
}

Awesome, we have a nice looking social media component.

Now We wrap our social container in another div sticky-media-bar which decides the location where we show our social media bar. Let’s fix this to left end in center and see how this looks.

.sticky-media-bar {
  position: fixed;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

You can directly use this wherever you want and change the orientation by changing the flex-direction property in social-container class. Feel free to play around and change position from left to right as well by changing left: 0; to right: 0;

Note: You can add this as a separate component in React/Vue/Nuxt.js and just import the component wherever you need to avoid code duplication :)

Here’s a complete codepen demo for you to play with.

See the Pen Sticky Social Share Component - mohitkhare.com by Mohit Khare (@mkfeuhrer) on CodePen.

---

I hope you learned something new. Feel free to suggest improvements ✔️

I share regular updates and resources on Twitter. Let’s connect!

Keep exploring 🔎 Keep learning 🚀