Home / FAQs / Social Media Share Buttons with Vanilla JavaScript

Social Media Share Buttons with Vanilla JavaScript

December 17, 2022 0

Last updated: March 3, 2023.

When clicked, social media share buttons make a request to a social media platform’s API.

Apart from the link to the post or page you want to share, each API accepts different information.

For example, some platforms accept just a link while others accept a title and/or message.

The first step is to create some HTML anchor elements that contain social media icons. In the example below, Font Awesome 5 icons:

<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="share-buttons">

  <!-- facebook -->
  <a class="facebook" target="blank"><i class="fab fa-facebook"></i></a>
  
  <!-- twitter -->
  <a class="twitter" target="blank"><i class="fab fa-twitter"></i></a>
  
  <!-- linkedin -->
  <a class="linkedin" target="blank"><i class="fab fa-linkedin"></i></a>
  
  <!-- reddit -->
  <a class="reddit" target="blank"><i class="fab fa-reddit"></i></a>

  <!-- whatsapp-->
  <a class="whatsapp" target="blank"><i class="fab fa-whatsapp"></i></a>

  <!-- telegram-->
  <a class="telegram" target="blank"><i class="fab fa-telegram"></i></a>

</div>

Then, add some styling:

#share-container span {
  display: block;
  margin: 3rem auto;
  font-size: 50px;
  padding: 1rem;
  margin: 1rem;
}
#share-buttons i {
  font-size: 100px;
  margin: 20px;
}
.facebook {
      color: #3b5998;
}
.twitter {
    color: #55acee;
}
.linkedin {
    color: #0077b5;
}
.reddit {
    color: #cb2027;
}
.whatsapp {
    color: #25D366;
}
.telegram {
    color: #229ED9;
}
.facebook, .twitter, .linkedin, .reddit, .whatsapp, .telegram {
  opacity: 0.6;
}
.facebook:hover, .twitter:hover, .linkedin:hover, .reddit:hover, .whatsapp:hover, .telegram:hover {
  opacity: 0.9;
}

Then, for the JavaScript. It’s most efficient to create values for all the inputs you will use when making requests to the social media APIs.

It is important to run all inputs through the encodeURIComponent function as this will ensure they are URL compliant (e.g. replace empty spaces with %20).

Afterwards, select each anchor element and create its respective request URL. Then set it as the href attribute of the anchor element:

const link = encodeURI(window.location.href);
const msg = encodeURIComponent('Hey, I found this article');
const title = encodeURIComponent('Article or Post Title Here');

const fb = document.querySelector('.facebook');
fb.href = `https://www.facebook.com/share.php?u=${link}`;

const twitter = document.querySelector('.twitter');
twitter.href = `http://twitter.com/share?&url=${link}&text=${msg}&hashtags=javascript,programming`;

const linkedIn = document.querySelector('.linkedin');
linkedIn.href = `https://www.linkedin.com/sharing/share-offsite/?url=${link}`;

const reddit = document.querySelector('.reddit');
reddit.href = `http://www.reddit.com/submit?url=${link}&title=${title}`;

const whatsapp = document.querySelector('.whatsapp');
whatsapp.href = `https://api.whatsapp.com/send?text=${msg}: ${link}`;

const telegram = document.querySelector('.telegram');
telegram.href = `https://telegram.me/share/url?url=${link}&text=${msg}`;

Now when a user clicks on one of the icons, it will make a request to the appropriate social media API through the browser. The user will then be able to share the link URL.

Happy sharing!

Related posts

Related Posts: