Photo by dole777 on Unsplash

Adding share to social media platforms option on your website can help you greatly generate traffic on your website. You should minimise the user’s effort for sharing then only you can expect good sharing ratio.

Before we dive into technical details we first need to understand user’s expectations on different devices. When you are browsing on your laptop/desktop and you want to share something you expect it to be taken to social media website with as much as details filled in.

Things get a little more complicated on the mobile devices, since sharing feature is not only used for sharing on social media but for a variety of apps like bookmarking apps, messaging apps. User simply expect that your share should work with all the apps which supports sharing.

So we have two different behaviour to serve. Start with the easy one :

Sharing to Social Media on desktop :

We will only focus on Twitter, Facebook & LinkedIn. Sharing on desktop is pretty simple. All you have to do is add anchor tag with href as sharing urls.

Twitter :

<a href="https://twitter.com/intent/tweet?text=<Your text>" > Share On Twitter </a>

Try sharing this : Share on Twitter

You can simply put urls in the text and it will automatically be picked up. Please make sure you use encodeURI(text) for uri encoding your text.

Facebook :

<a href="https://www.facebook.com/sharer/sharer.php?u=<URL>" >Share To Facebook </a>

This will share url on Facebook : Share on Facebook

LinkedIn :

<a href="https://www.linkedin.com/shareArticle?mini=true&url=<Your URL" >Share on LinkedIn </a>

Here is a demo : Share on LinkedIn

Sharing on Mobile Devices:

Whenever you press share on most of the apps a little share window comes out of the bottom with list of all the apps you can share to. Something like this

Native Share window

This is possible because apps has access to platform’s Native Share APIs. Websites can also leverage native sharing through WebShare API. WebShare API. It is supported in both Android and IoS (Level 2 is not supported on IoS which allows file sharing).

You can check whether the browser supports sharing by checking if navigator.share exists. To check whether you can share files (.i.e. if Level 2 WebShare API is available) check if navigator.canShare exists.

Also WebShare API is only available on https and can not be accessed on http website.

Here is the code for sharing text and urls:

Sharing Files (not supported on IoS) :

If you want to see it working head over to coronadaily.org where I recently implemented share (only available on mobile) using WebShare API for both text and image (file).

Go make your website viral !!!