So you want to implement social sharing buttons on your site or application, but don’t want the performance hit that results form including each social network’s JavaScript API? Smart move! Just modify the simple code below and your on your way.

We’ll be using the glorious FontAwesome 5 to render our social media icons. For the demo you can see the buttons are displayed in a Boostrap modal, but you don’t want to use any JavaScript at all then just copy and paste the code below directly into your website.


To implement the buttons on your own site, just follow the simple steps below.

Add the FontAwesome 5 stylesheet to the <head> section of your website, or for more configuration options check the guide.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

Replace the variables in curly brackets with your own data, and copy the HTML code below into your site:

<div class="social-links-demo">
  <a href="https://www.facebook.com/sharer/sharer.php?u={PAGEURL}&t={PAGETITLE}" target="_blank" title="Share on Facebook"><i class="fab fa-facebook"></i></a>
  <a href="https://twitter.com/intent/tweet?source={PAGEURL}&text={PAGETITLE}:{PAGEURL}&via={TWITTERUSERNAME}" target="_blank" title="Tweet"><i class="fab fa-twitter-square"></i></a>
  <a href="https://plus.google.com/share?url={PAGEURL}" target="_blank" title="Share on Google+"><i class="fab fa-google-plus-square"></i></a>
  <a href="http://pinterest.com/pin/create/button/?url={PAGEURL}&media={PAGEIMAGEURL}&description={PAGEDESCRIPTION}" target="_blank" title="Pin it"><i class="fab fa-pinterest-square"></i></a>
  <a href="mailto:?subject={PAGETITLE}&body={PAGEDESCRIPTION}:{PAGEURL}" target="_blank" title="Share via Email"><i class="fab fa-envelope-square"></i></a>
</div>

Add the following CSS code to your stylesheets. Note that this is a very minimal example, so you can go ahead and spruce it with hover effects and animations to improve the buttons to your liking.

.social-links-demo a {     
  font-size: 42px;
  margin: 5px;
  display: inline-block;
}
.social-links-demo .fa-facebook { color: #3b5998 }
.social-links-demo .fa-twitter-square { color: #55acee }
.social-links-demo .fa-google-plus-square { color: #dc4e41 }
.social-links-demo .fa-pinterest-square { color: #bd081c }
.social-links-demo .fa-envelope-square { color: #666 }

Now refresh your page and you should see your shiny new buttons in all their glory! Happy coding!