Create Social Sharing Buttons without JavaScript and Third-party Tracking

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="">
<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="" />
<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="" />
<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

2. Create Social Sharing Buttons


Twitter URL Example

Twitter Link Example

<a href="" title="Share on Twitter" rel="nofollow" target="_blank">
    Share on Twitter

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.
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 URL Example

Facebook Link Example

<a href="" title="Share on Facebook" rel="nofollow" target="_blank">
    Share on Facebook


Reddit URL Example,%20Reddit!

Reddit Link Example

<a href="" title="Share on Reddit" rel="nofollow" target="_blank">
    Share on Reddit


linkedIn URL Example

linkedIn Link Example

<a href="" title="LinkedIn" rel="nofollow" target="_blank">
    Share on LinkedIn


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.

Freddie Freddie 1 year, 11 months ago 0
Login to Comment
No comments have been posted yet, be the first one to comment.
Mentioned Topics
Twitter Twitter
Twitter is a microblogging and social networking platform that allow you to follow current events and share them as they happen. The platform has over 300 million members globally that you can engage with in forms of "tweets", messages that cont...
Twitter Marketing Twitter Marketing
Twitter Marketing is the process of generating engagement from the social networking platform Twitter. This can be done organically or through the use of Twitter Ads, to platform's native advertisement solution. ...
Reddit Reddit
Reddit is a community-based social network where people can discover the latest regarding their hobbies or interests. Create your own or join already existing communities to discuss and share your passions with like minded. Reddit has over 400 million use...
Facebook Facebook
Facebook is the worlds largest social network with over 2.5 billion users. ...
Facebook Marketing Facebook Marketing
Facebook Marketing is the process of reaching and harnessing an audience of the Facebook platform. Facebook currently has a user-base of over 2.4 billion people that can be reach by utilizing Facebook Pages, Facebook Groups or through Facebook Ads. ...
Social Media Marketing
LinkedIn LinkedIn
LinkedIn is a business and employment-oriented social network with over 500 million members. With LinkedIn you can manage your professional identity. Allowing yourself to build and engage with your professional network and access knowledge, insights and o...
LinkedIn Marketing LinkedIn Marketing
LinkedIn is a business and employment-oriented social network with over 500 million members. A perfect target for commercial leads and long lasting partnerships. LinkedIn Marketing is the process of acquiring views, leads and engagement from the network i...
Open Graph
Open Graph is a protocol designed to enable websites to become a rich object in a social graph. The protocol is used by social media platforms like Facebook. When a websites utilize the Open Graph tags in their HTML, users can share content on Facebook th...