Create Social Sharing Buttons without JavaScript and Third-party Tracking

Getting content to go viral is a key part of driving traffic to any website. To increase the chances of that happening, it's important to provide readers with an easy way to share the content you have created.

Social media platforms like Twitter, Facebook, Reddit, LinkedIn and others provide pre-built share buttons that can easily be copied and pasted within your code. However, there is a downside to this, these snippets of code comes with a lot of cruft, like complicated JavaScript and third-party user tracking which creates external loading of files and scripts.

There is a simple way around this though, you can just use hypermedia and link to the share URLs provided by the social media platform specific APIs by yourself.

1. Configure Meta Tags

Before we start implementing social sharing buttons it's important to have your Meta and OpenGraph tags in order. These HTML tags allow social media site to show your content in a manner that adheres to individual platform standards. When the meta information is added correctly you can control how your content will be displayed on the platform and show thumbnails, add hashtags, titles, description and more.

The meta information is added to your <head> tag of your main .html document. Below you will find detail how to implement the tags for each platform.

Twitter Meta

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@tutdotio">
<meta name="twitter:creator" content="@tutedotfreddie">
<meta name="twitter:title" content="Create Social Sharing Buttons Without JavaScript and Third-party Tracking">
<meta name="twitter:description" content="Getting content to go viral is a key part of driving traffic to any website. To increase the... ">
<meta name="twitter:image" content="https://images.tute.io/social-sharing-buttons.png">
<meta name="twitter:image:alt" content="Social Sharing Buttons">

Twitter provide a tool called Twitter Card Validator that can be used to validate the meta tags specific to Twitter Cards.

Facebook OpenGraph

For Facebook, these are the most important meta tags to use:

<meta property="og:url"                content="https://tute.io/social-sharing-buttons" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="Create Social Sharing Buttons Without JavaScript and Third-party Tracking" />
<meta property="og:description"        content="Getting content to go viral is a key part of driving traffic to any website. To increase the... " />
<meta property="og:image"              content="https://tute.io/social-sharing-buttons" />
<meta property="og:image:alt"          content="Social Sharing Buttons" />

How you implement these values is up to you but a decent templating language with some form of inheritence might come in handy when you want to create meta tags that is utilized by all pages across your site.

You can validate your OpenGraph meta tags with the tool opengraph.xyz

2. Create Social Sharing Buttons

Twitter

Twitter URL Example

https://twitter.com/intent/tweet?url=https://tute.io/socail-sharing-buttons&via=tutedotio

Twitter Link Example

<a href="https://twitter.com/share?url=https://tute.io/socail-sharing-buttons" title="Share on Twitter" rel="nofollow" target="_blank">
    Share on Twitter
</a>

Tweet Button Parameter Reference

Parameter	Description	Example
text	Pre-populated text highlighted in the Tweet composer.	custom share text
url	URL included with the Tweet.	https://tute.io/social-sharing-buttons
hashtags	A comma-separated list of hashtags to be appended to default Tweet text.	example,demo
via	Attribute the source of a Tweet to a Twitter username.	Auser
related	A comma-separated list of accounts related to the content of the shared URI.	twitterapi,twitter

Facebook

Facebook URL Example

https://www.facebook.com/sharer.php?href=https://tute.io/socail-sharing-buttons&display=popup

Facebook Link Example

<a href="https://www.facebook.com/sharer/sharer.php?u=https://tute.io/https://tute.io/socail-sharing-buttons&display=popup" title="Share on Facebook" rel="nofollow" target="_blank">
    Share on Facebook
</a>

Reddit URL Example

http://www.reddit.com/submit?url=https://tute.io/socail-sharing-buttons&title=Hello,%20Reddit!

Reddit Link Example

<a href="http://www.reddit.com/submit?url=https://tute.io/socail-sharing-buttons&title=Social%2Sharing%20Buttons" title="Share on Reddit" rel="nofollow" target="_blank">
    Share on Reddit
</a>

linkedIn URL Example

https://www.linkedin.com/shareArticle?mini=true&url=https://tute.io/socail-sharing-buttons&title=Social%20Sharing%20Buttons&summary=Learn%20how%20to%20create%20social%20sharing%20buttons%20without%20JavaScript%20and%20third-party%20tracking

linkedIn Link Example

<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://tute.io/socail-sharing-buttons&title=Social%20Sharing%20Buttons&summary=Learn%20how%20to%20create%20social%20sharing%20buttons%20without%20JavaScript%20and%20third-party%20tracking" title="LinkedIn" rel="nofollow" target="_blank">
    Share on LinkedIn
</a>

Conclusion

Social sharing buttons is a great tool that can be used to increase the potential reach of your content. If the right person shares your creation, it will reach a greater percentage of the 8 billion people in the world.

While most social media platforms provide pre-built JavaScript-powered social sharing buttons that are easy to embed. It is important to understand that they can slow down your website since they include scripts that must be loaded from external source. They also include user tracking that might be invasive to some. So if you want your site to be privacy focused, they are not a good option.

Thus, creating your own social sharing buttons with regular hypermedia might be a better solution. It will make your site load faster and will be more privacy friendly. With the help of CSS and CSS Transitions you can improve the buttons further, and make them look as good as the original provided by these platforms, or maybe even better.