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

✨ HTML Share Buttons

submited by

Style Pass

2021-06-09 16:30:09

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

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

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.

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.