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

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

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>

Most platforms try to push content creators into using their pre-built, easy-to-embed, JavaScript-powered social sharing buttons. While they are a perfectly viable option, the method above allow developers to provide their readers with a light-weight and privacy focused solution that is faster to load. And with the help of CSS and CSS Transitions you can create great looking buttons that looks as good as the original provided by these platforms, or maybe even better.

Freddie Freddie 1 month, 1 week 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...