Frontend Social Buttons without JavaScript

ow 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.

Linked Technologies

What it's made of

illustration of HTML
HTML

The backbone of the web. Master it to craft structured, accessible content for any online project, from simple sites to complex applications!

Linked Categories

Where it's useful

illustration of Frontend Development
Frontend Development

Explore the latest tools and techniques for crafting responsive designs, enhancing user interfaces, and optimizing web performance.

illustration of SEO
SEO

Make your digital content discoverable and digestable by web crawlers. Ensure that visitors have a straightforward experience.