✨ HTML Share Buttons

Oct 22, 2014 • 3 min read

Today we’re going to be making some HTML-only social share buttons like the ones shown below. That’s right, No JavaScript required! 🧙‍♀️

⚠️ Can’t see them? Try disabling your ad-blocker.

Share buttons are a great way to make sharing content easier, leading to make engagement and visitors down the road. Unfortunately, most first-party share widgets are ugly and require loading external scripts. Yuck. Not only that, but many also install 3rd-party tracking cookies that invade the reader’s privacy.

Luckily, it’s possible to create your own share buttons using a single <a /> tag. The reason this is possible is because social networks need to provide methods of sharing that work inside of emails (email clients don’t execute JavaScript).

🔗 The full source code can be downloaded on GitHub

A Simple Anchor Tag is All You Need

Share links are very simple. All we need to do is create an anchor tag that points to a special URL of the desired social network, then fill in the required query parameters with the desired page meta-data like URL and title.

Here is some basic markup for Twitter, Google Plus, Facebook, StumbleUpon, Reddit, LinkedIn, and Email share links:

<!-- Basic Share Links -->

<!-- Twitter (url, text, @mention) -->
<a href="https://twitter.com/share?url=<URL>&text=<TEXT>via=<USERNAME>">
    Twitter
</a>

<!-- Facebook (url) -->
<a href="https://www.facebook.com/sharer/sharer.php?u=<URL>">
    Facebook
</a>

<!-- Reddit (url, title) -->
<a href="https://reddit.com/submit?url=<URL>&title=<TITLE>">
    Reddit
</a>

<!-- Hacker News (url, title) -->
<a href="https://news.ycombinator.com/submitlink?u=<URL>&t=<TITLE>">
    Hacker News
</a>

<!-- LinkedIn (url, title, summary, source url) -->
<a href="https://www.linkedin.com/shareArticle?url=<URL>&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>">
    LinkedIn
</a>

<!-- Email (subject, body) -->
<a href="mailto:?subject=<SUBJECT>&body=<BODY>">
    Email
</a>

The share buttons above are basic HTML tags, which means we can style them however we want, using CSS. To keep things simple, we’re just going to style a basic button shape and background.

Here, we’ll add some classes so they can be targeted with CSS:

<a href="..." class="share-btn twitter">Twitter</a>
<a href="..." class="share-btn facebook">Facebook</a>
<a href="..." class="share-btn reddit">Reddit</a>
<a href="..." class="share-btn hackernews">Hacker News</a>
<a href="..." class="share-btn linkedin">LinkedIn</a>
<a href="..." class="share-btn email">Email</a>

And here is the CSS:

/** Social Button CSS **/

.share-btn {
  display: inline-block;
  color: #ffffff;
  border: none;
  padding: 0.1em 0.6em;
  outline: none;
  text-align: center;
  font-size: 0.9em;
  margin: 0 0.2em;
}

.share-btn:focus,
.share-btn:hover {
  text-decoration: none;
  opacity: 0.8;
}

.share-btn:active {
  color: #e2e2e2;
}

.share-btn.twitter     { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.reddit      { background: #ff5700; }
.share-btn.hackernews  { background: #ff6600; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.email       { background: #444444; }

And that’s it! Your own nice-looking share buttons that can be used anywhere. I hope you found this useful and please consider sharing this post if you found it useful. 😀❤️🚀

If you enjoyed this tutorial, please consider sponsoring my work on GitHub 🤗

A Simple Anchor Tag is All You Need

Style Share Buttons with CSS

Recommended Posts ✍🏻