✨ HTML Share Buttons

• 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>

Style Share Buttons with CSS

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 🤗

Now look what you've done 🌋
Stop clicking and run for your life! 😱
Uh oh, I don't think the system can't handle it! 🔥
Stop it, you're too kind 😄
Thanks for the love! ❤️
Thanks, glad you enjoyed it! Care to share?
Hacker News Reddit

×

Recommended Posts ✍🏻

See All »
• 3 min read
🚅 Next Stop, Yaak
Read Post »
• 4 min read
💻 Wait for User to Stop Typing, in JavaScript
Read Post »
• 8 min read
🚜 A Simple Web Scraper in Go
Read Post »