Social Sharing Buttons without Javascript in HTML Frontends

How to embed some social sharing buttons in a website without Javascript or any third party code

If you want to make a website easy to share, you actually don't need to require external javascript SDKs (including privacy violations) at all. All the major services do have a static HTTP endpoint you can link to. This example includes facebook, twitter and whatsapp:

<p class="sharing-buttons">
  <a
    target="_blank"
    class="facebook"
    href="//www.facebook.com/sharer/sharer.php?u={{url}}"
    >Facebook</a
  >
  <a
    target="_blank"
    class="twitter"
    href="//twitter.com/share?url={{url}}&text="
    >Twitter</a
  >
  <a target="_blank" class="whatsapp" href="//wa.me/?text={{url}}">Whatsapp</a>
</p>

just replace {{url}} with the current page url you want to get shared!

.sharing-buttons {
  text-align: center;
  a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    display: inline-block;
  }
  a:hover {
    color: white;
    cursor: pointer;
  }
  .twitter {
    background: #41b7d8;
  }
  .facebook {
    background: #3b5997;
  }
  .whatsapp {
    background: #25d366;
  }
}

This SCSS snippet will make them look usable right away, but you can customize as you like.

Technologies: