> Markdown version of [/magazine/505-creating-a-social-network-independent-share-this-button-in-5-lines-of-javascript](https://www.wearedevelopers.com/magazine/505-creating-a-social-network-independent-share-this-button-in-5-lines-of-javascript). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Creating a social network independent "share this" button in 5 lines of JavaScript **By:** [Chris Heilmann](https://www.wearedevelopers.com/@chris-heilmann) **Published:** November 19, 2024 Share buttons on the web work and make it easier for people to send your content to others and social media platforms. There are a few issues with them though. The web is full of broken buttons pointing to now defunct social media platforms and often buttons by social networks get rightfully blocked by privacy extensions. There is a standardised Web API though that allows you to create a product independent share button in a few lines of JavaScript. The WebShare API. ## Performance, privacy and security problems of share buttons The problems with adding a share button to the currently fashionable social media platform are many. - You add extra code to your product that you don't control. - The share button code could contain anything as you are not auditing it. - It may track your users - Facebook grew a lot with buttons in third party sites. - Depending how the buttons were implemented, it could drag down the performance of your site. The bigger problem though is that there is a lot of fluctuation in the social space, and that Digg or Stumbleupon button that decades ago got you a lot of traffic is now dead code. Unmaintained dead code that could any time be taken over by people who like to distribute malware on the web. The same fluctuation also means that you offer a lot of unnecessary functionality - if your end users are not on Instagram, why should I care for that button? ## The WebShare API - a web standard that gives your users control This is why we have the [WebShare API](https://w3c.github.io/web-share/) which is so basic, it is a crime people don’t use it more. Instead of guessing how your visitors want to share the current URL or a file you provide, you can call the API and they can pick their favourite: [ ![Animation of the web share API in action. With 10 lines of Code you can turn a button into a share button](https://wearedevelopers.imgix.net/public/magazine/articles/505/images/673ca2960df03ce0dfdaac6b_webshare.gif) ](https://codepen.io/codepo8/pen/rNXbjgJ) Yes, this is all the code you need as you can see on [codepen.](https://codepen.io/codepo8/pen/rNXbjgJ) The WebShare API works on Desktop and Mobile and your users control what platforms or contacts show up as the first choice to share your content with. In this example, the `url` parameter is empty, which means it shares the page you are currently on. You can add parameters to the URL if you want to enable tracking. You can also add a text to explain more what the URL is about. In addition to URLs, you can also share files. There are more [examples and explanations on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share). Browser support is good, with the exception being Firefox. You can, however, [offer a copy button](https://devrel.wearedevelopers.com/quicktricks/copy-button/) which works everywhere and enhance it to become a share button. ‍ ## Related Articles - [5 Tips for Using the <button> HTML Element](https://www.wearedevelopers.com/magazine/666-5-tips-for-using-the-button-html-element) - [The Overflow: 4 Tools for Fast File Sharing](https://www.wearedevelopers.com/magazine/697-the-overflow-4-tools-for-fast-file-sharing) - [Building a "shoutout" component in plain HTML/CSS/JavaScript](https://www.wearedevelopers.com/magazine/556-building-a-shoutout-component-in-plain-html-css-javascript) - [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents) ## Related Videos - [Web APIs you might not know about](https://www.wearedevelopers.com/videos/281-web-apis-you-might-not-know-about) - [Making of paint.js.org—a Web Component-based Productivity PWA](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) - [Possibilities with Web Capabilities](https://www.wearedevelopers.com/videos/1575-possibilities-with-web-capabilities) - [Catching up on the basics you don't really need that much code](https://www.wearedevelopers.com/videos/903-catching-up-on-the-basics-you-don-t-really-need-that-much-code) ## Related Jobs - [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda** - [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda** - [Senior Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/1927757-senior-software-engineer-angular-b2c-web-platform) at **Bitpanda** - [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group** - [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**