✨ HTML Share Buttons

• 3 min read • 240 votes

Updated

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. 😀❤️🚀

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?
HN Reddit

More Posts ✍🏻

See All »
• 4 min read • 3354 votes 🔥
😈 Productive Procrastination
Read Post »
• 5 min read • 310 votes
🚀 Getting Over the Fear of Launching
Read Post »
• 2 min read • 282 votes
🗓 2019 Year in Review: Prioritizing Health
Read Post »
• 6 min read • 137 votes
🎈 Abandoning the Static Site
Read Post »
• 5 min read • 302 votes
👨🏼‍💻 Indie, a Competitive Advantage
Read Post »
• 4 min read • 486 votes
💻 Wait for User to Stop Typing, in JavaScript
Read Post »
• 3 min read • 244 votes
📈 Indie to Acquisition
Read Post »

Be the first to hear about posts, right in your inbox 💌