Social sharing is a standard in our daily lives nowadays and is often a requirement for projects I work on. I’ve recently stumbled upon a nice easy way to include it using Web Share API and Social Share URLs – which I wanted to make a note of going forward.
WebShare API is a code standard that allows the sharing of content (url / image / text) on any installed social media or messaging app. This is done via the native browser share interface of the device you’re opening it on (this is currently only compatible with Mobile Devices and Safari on Mac OS).
Sharer URLs are links that allow the sharing of content (url / image / text) on a social media platform that the url is written for. In this example this is done for Facebook, Twitter, WhatsApp and Pinterest.
Visual explanation of the code I’ve written below, that allows you to play with in your browser. It demonstrates social sharing implemented with Web Share API if you’re viewing this page on a compatible device (e.g Mobile Devices / safari on Mac OS), or Sharer Urls if you’re viewing on a device which is not compatible with Web Share API (e.g most laptops).
To edit the code, open the HTML, CSS or JS tabs – or just have a cheeky click around on the Result tab! Have fun with Web Share API and enjoy 
Top comments (0)