OneTaskBy Tim King · Updated
Share Button Builder
Social Share Buttons in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Share Button Builder works
A share button lets visitors post your page to a social network in one click. Pick the networks, choose brand colours or your own, show labels or icons only, and copy plain HTML, CSS and a few lines of JavaScript, with no third-party widget or tracking script.
Each button is an ordinary link to the network's own share page, with your URL and text passed in the query string. Leave the page URL blank and a small script fills in the current address and title, so one snippet works on every page of a site.
How the share buttons work
Facebook, X, LinkedIn, Reddit and Pinterest have share URLs that take the link as a parameter.
WhatsApp, Threads and Bluesky take one text field, so the share text and link go in together. Email
uses a mailto: link with the title as the subject. Every link opens in a new tab with
rel="noopener noreferrer", and the URL is encoded so spaces and ampersands survive.
The device share button
The Share button uses the Web Share API, which opens the phone or computer's own share sheet with
every app the visitor has installed. The script only reveals it when navigator.share exists, so
browsers without the API never see a button that does nothing.
Why not use the networks' own widgets?
Official embed scripts load extra JavaScript, set cookies and let the network track visitors on your page. Plain links are faster, need no cookie consent and still open the same share dialog.
FAQ
What image and text appear when someone shares my page?
The network reads your page's Open Graph tags: og:title, og:description and og:image. The
share button only passes the URL, and sometimes a line of text. Set the tags with an Open Graph
generator so every share shows the right picture and headline.
Can I track how often my share buttons are clicked?
The links carry no tracking, so add it yourself. Put a UTM-tagged URL in the page URL field to see
shared traffic in your analytics, or add a click listener to .social-btn that sends an event to
your analytics tool.
Why does the device share button not show on my desktop browser?
The Web Share API is supported by Safari, Chrome and Edge on most systems, but Firefox on the desktop does not support it yet. It also needs HTTPS. Where it is missing the button stays hidden and the network links still work.
Are the share button icons free to use?
The network logos come from Simple Icons, which releases its SVG paths under CC0, so you can use them without credit. Each network still has brand guidelines, so keep the logos unmodified and in their own colours or plain white.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Open Graph Tags Generator
Generate Open Graph and Twitter card meta tags for rich link previews.
Twitter Card Preview
Preview your link as an X (Twitter) card and copy the meta tags.
Social Post Maker
Instagram stories, square posts and other social images at exact sizes. No watermark.
UTM Campaign URL Builder
Build correctly encoded UTM campaign links with consistent naming.
Copy To Clipboard Button Generator
Copy to clipboard button for code blocks, inputs or fixed text.