Social Share Buttons Generator
A social share generator builds the markup for share buttons so you do not have to write it. Tick the networks, set the style, size, radius and gap, and the Embed code box updates live. With the four default networks the Hosted JS tab returns one tag — <script src="https://www.freewebtools.com/js/widgets/social-share.min.js" data-platforms="facebook,twitter,linkedin,whatsapp"> — and the HTML links tab returns the same buttons as plain anchors.
Platforms
Customize
Presets
Live Preview
Embed Code
Popular Tools
About Social Share Buttons Generator
This generator produces ready-to-paste share buttons for eight destinations: Facebook, X (Twitter), LinkedIn, WhatsApp, Pinterest, Reddit, Telegram and email. Tick the ones you want under Platforms, then shape them under Customize: style (filled, outline or minimal), layout (horizontal or vertical), position (inline or floating at the left or right edge), icon size from 28 to 56 pixels, corner radius from square to circle, and the gap between buttons from 2 to 16 pixels. Two checkboxes control whether network names appear next to the icons and whether the attribution line is kept. Five presets — Default, Compact icons, Floating sidebar, Outline and Minimal — set all of it in one click.
The preview is a mock browser window, so you see the buttons against a page rather than on their own, and it redraws on every change. The Embed code panel offers two outputs. Hosted JS is a single script tag with data- attributes: only the settings that differ from the defaults are written out, which keeps the tag short. HTML links is a div of plain anchor tags pointing at each network's share endpoint, with target="_blank" and rel="noopener noreferrer" already set — nothing to load and nothing to execute.
Leave Custom URL empty and the HTML output uses the placeholder PAGE_URL, which you replace with the address you want shared; the hosted script reads the current page address instead, so it works unchanged on every article of a site. Anything you type into Custom URL is HTML-escaped before it reaches the generated attribute.
What it does not do: it does not count shares, and it sets no cookies of its own. The buttons are links to each network's own share dialog, so the counters and consent rules belong to those networks, not to this page.
Use Cases
How to use
Under Platforms, tick the networks you want. Facebook, X (Twitter), LinkedIn and WhatsApp are selected by default; Pinterest, Reddit, Telegram and email are also available.
In Customize, pick a style, a layout and a position, then use the Size and Gap sliders and the Border radius dropdown to match your page.
Use the Show labels and Show branding checkboxes to decide whether network names and the attribution line appear.
Optionally paste a page address into Custom URL. Leave it empty to share whichever page the buttons end up on.
Check the Live preview, which shows the buttons inside a mock browser window and redraws after every change.
Switch the Embed code panel between Hosted JS and HTML links, then press Copy and paste the result into your page.
Pro Tips
- The hosted tag only writes out the settings you changed. If it looks suspiciously short, that is because style, layout, size 36, radius 8 and gap 8 are the defaults and are left implicit.
- Leave Custom URL empty when you want the buttons to share whichever page they sit on. The HTML output then carries the literal PAGE_URL, which you must replace before pasting it.
- Show labels changes the geometry, not just the text: with labels off each button becomes a square of exactly the pixel size on the Size slider, with labels on it grows to fit the name.
- Floating left and Floating right ignore the Layout dropdown — a floating rail is always a vertical column — so set Layout only when Position is Inline.
- The Minimal style draws the icon in the network colour with no background and no border. On a dark page check it against your own background before shipping, since it inherits nothing.
Troubleshooting
The generated HTML links all point at PAGE_URL.
That is the placeholder used when Custom URL is empty. Either type the address you want shared into Custom URL and copy again, or replace PAGE_URL in the pasted code with the page's own address. The Hosted JS output does not need this, because the script reads the current address at run time.
Choosing a floating position does not change the layout dropdown.
A floating rail is always stacked vertically, so Layout is only applied when Position is Inline. Set Position back to Inline if you need a horizontal row, or leave it floating and use the Gap slider to control the spacing of the column.
The minimal style buttons are hard to see on my page.
Minimal draws the icon in the network's own colour with no background and no border, so it relies entirely on your page contrast. Switch the style to Filled, or to Outline, which keeps a coloured two-pixel border around each icon.
Frequently Asked Questions
Tick the networks under Platforms, set the look under Customize, then copy one of the two outputs. Hosted JS is a single script tag you paste where the buttons should appear. HTML links is a block of anchor tags you can paste into any template, including one that must not load external JavaScript.
It is an ordinary link to the network's share endpoint. Facebook uses https://www.facebook.com/sharer/sharer.php?u= followed by the URL-encoded address; X uses https://twitter.com/intent/tweet?url=; LinkedIn uses /sharing/share-offsite/?url=. The HTML links tab writes all of them for you with target="_blank" and rel="noopener noreferrer".
Eight: Facebook, X (Twitter), LinkedIn, WhatsApp, Pinterest, Reddit, Telegram and email. The first four are ticked by default. Email uses a mailto: link with the address in the body, so it opens the visitor's own mail client rather than a web service.
The HTML links output does. It is a div of anchor tags, so it renders and works with scripting disabled and adds no third-party requests to your page. The Hosted JS output needs JavaScript because the script draws the buttons and reads the current page address at run time.
Yes, and the generated code is yours to paste anywhere. Show branding adds an attribution line; untick it if you do not want it. The HTML links output is fully self-contained, while the hosted script is loaded from freewebtools.com, so keep that in mind if your site blocks external scripts.
Yes. Type it into Custom URL and both outputs use it: the hosted tag gains a data-url attribute and the HTML anchors point at that address. Leave the field empty and the HTML output falls back to the placeholder PAGE_URL, while the hosted script reads whatever page it runs on.
Untick Show labels, set Border radius to Circle and pick a size on the slider — 32 pixels is what the Compact icons preset uses. With labels off, each button becomes a square of exactly that size, which the circular radius turns into a disc.
Filled paints the button in the network's brand colour with a white icon. Outline keeps the background transparent and draws a two-pixel border in the brand colour, with the icon in the same colour. Minimal removes the background and the border, leaving only the coloured icon.
No. They are links that open each network's own share dialog, and none of the networks expose a public counter to arbitrary sites any more. If you need numbers, take them from your analytics or from each network's own reporting rather than from the button.
Yes. Set Position to Floating left or Floating right, or press the Floating sidebar preset, which also switches to a vertical column, hides the labels and sets the size to 40 pixels. The preview moves the rail to the matching edge of the mock browser window so you can see the result.