If you are developing a website, it is imperative to have social sharing buttons to increase social engagement which in turn will result in higher traffic. A lot of widgets are available for this purpose.
The Pros
Adding a single line of Javascript adds all the popular sharing buttons to your website. Some services allow you to customize them through remote dashboards. They also add share count and other metrics to your buttons.
From button styling to icons, everything is handled by these widgets. All you have to do is select which buttons to show and style of those buttons.
These services also provide cloud-hosted analytics data where you can easily monitor the visitor and their sharing pattern of different posts.
The Cons
When you add these widgets, they simply add the Javascript SDKs of these social websites which load the sharing button and other metrics like the number of shares, likes, etc. along with the buttons.
This may seem good, but it adds a lot of processing to the webpage. This results in higher load time and thus, lower ranking in search engine result pages (SERP).
A major portion of your added analytics becomes redundant if you already have Google Analytics code installed on your website. Social analytics can also be implemented through events in Google Analytics, thus making additional tracking redundant. In most cases, social analytics added by these sharing buttons adds little value.
Also, many of these services, track your visitors and you have no option to opt-out of it. They get all the traffic data of your website, slowing down your website with their trackers, and you have no control of that. For a webmaster, this is an uneasy situation.
The Simple Solution: No Javascript
The simple solution is to eliminate all the Javascript and add simple HTML buttons with sharing links provided by almost all social networks. This entire code will be purely HTML and CSS without Javascript.
I have created sharing buttons for some popular social networks and included the required CSS for the buttons. You can add your styles as well. In case you need an even better look, you can also add icons to your buttons.
The CSS
First, let’s create CSS for these buttons.
.button {
text-decoration: none;
display: inline-block;
text-align: center;
padding: .25rem .5rem;
font-size: 1rem;
font-weight: 300;
border-radius: .2rem;
color: black;
background-color: white;
}
.button-facebook {
background-color: #4267b2;
color: white;
}
.button-twitter {
background-color: #1DA1F2;
color: white;
}
.button-whatsapp {
background-color: #25D366;
color: white;
}In the case of Facebook, you will also need a Facebook App ID which is very easy to get. Don’t worry, you do not have to create an app. Just go to Facebook for Developers dashboard, and fill the form with new app details. A Facebook app will be created and added to your Facebook developers account. Once you get the app id, use it in the following code to add simple Facebook sharing buttons.
<a href="https://www.facebook.com/dialog/share?app_id=your-app-id&href=https://example.com/link-to-your-post" target="_blank" title="Share on Facebook" class="button button-facebook" rel="noopener noreferrer">Facebook</a><a href="https://twitter.com/intent/tweet?url=https://example.com/link-to-your-post&text=Post-Title&via=your-twitter-username" target="_blank" title="Share on Twitter" class="button button-twitter" rel="noopener noreferrer">Twitter</a><a href="//example.com/link-to-your-post" target="_blank" title="Share on WhatsApp" class="button button-whatsapp" rel="noopener noreferrer">WhatsApp</a>These are just three, but you can add any number of buttons of different social networks based on the sharing link provided in their documentation.
These links are simple HTML and CSS with NO Javascript. They do not add extra load on your page and give you the required functionality. You may miss the share count displayed on your sharing buttons, but it is not needed and the downsides of adding it to your website are simply not worth it.
So, just add these buttons to your website posts and pages to replace the heavy sharing widgets, and move towards a faster, cleaner code and a fast loading website.