✨ HTML Share Buttons Oct 22, 2014 • 3 min read • 428 votes

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.1 em 0.6 em ; outline : none ; text-align : center ; font-size : 0.9 em ; margin : 0 0.2 em ; } . 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 🤗