Social Media Share Buttons Widget

Add share buttons that let readers pass your page to Facebook, X, LinkedIn, WhatsApp, Reddit, Pinterest, Threads, Bluesky, email and more. Place them in a row under a post, as a rail floating at the side, as a bar along the bottom of a phone screen or behind a single Share button - and none of it loads a social network's script until a visitor actually chooses one.

Social Media Social No trackers, no cookies Free · no ads

Customize your widget

Networks
Share buttons

Loading networks…

Click to add or remove; drag or use the arrows to change the order.
Layout
Floating layouts only. Blank shows them straight away.
Style
Shown before the buttons, on the rail, or on the Share button.
Share data
Leave blank to share the page the buttons are on.
Blank uses the page's own title.
Advanced
Light or dark
Match page reads the background behind the component.

Live preview

Exactly what your visitors will see

Embed code

<div data-a2z-kit="social-share-buttons" data-networks="facebook,x,linkedin,whatsapp,email,copy"></div>
<script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>

One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.

Works with

How it works

Paste one empty div and the A2Z kit script; the kit draws the buttons inside a Shadow DOM on your own page, so your theme's CSS cannot distort them and theirs cannot leak into your site. When a visitor clicks a network, the share address is built at that moment from the page being read: the address you fixed in the builder, otherwise the page's canonical link, otherwise the address in the browser with the hash and advertising parameters (utm_*, fbclid, gclid and similar) removed. Each network receives only the fields it actually reads - Facebook and LinkedIn take the address alone and read the title and image from your Open Graph tags, X takes text, hashtags and a via handle, Pinterest an image, email a subject and body - and every value is URL-encoded, so a title containing quotes, ampersands or script tags reaches the network as plain text. On a desktop a web network opens in a centred window; on a phone it opens the app or a new tab. Copy link, Print, QR code and the device's own share sheet run entirely in the page.

Method

  • Shared address = fixed URL (http/https only) || canonical link (unless it points at the home page from a deeper page) || location without #hash and without utm_*, fbclid, gclid, msclkid and similar
  • Share link = network base + only the parameters that network documents, each value encodeURIComponent-encoded; empty values are omitted
  • Allowed link schemes: https:, mailto:, sms: and viber: - anything else is refused before a link is drawn
  • Floating layouts become a bottom bar, a single Share button or nothing below the breakpoint (768 px by default)
  • Native share: navigator.share({ title, text, url }) where the browser supports it, otherwise the share panel or Copy link

Worked examples

A title with symbols, shared on X

Inputs: Fixed address https://example.com/blog/tips, title Pasta & "quick" sauces <b>, hashtags #cooking, quick dinner, X handle @greenleaf

Result: https://x.com/intent/post?text=Pasta%20%26%20%22quick%22%20sauces%20%3Cb%3E&url=https%3A%2F%2Fexample.com%2Fblog%2Ftips&hashtags=cooking%2Cquickdinner&via=greenleaf

The ampersand, quotes and angle brackets arrive at X as plain characters; the hashtag list loses its # signs and spaces, and the @ is dropped from the handle.

The same page on Facebook and WhatsApp

Inputs: Same address and title

Result: Facebook: https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fblog%2Ftips - WhatsApp: https://wa.me/?text=Pasta%20%26%20%22quick%22%20sauces%20%3Cb%3E%20https%3A%2F%2Fexample.com%2Fblog%2Ftips

Facebook takes only the address (the preview comes from Open Graph tags); WhatsApp gets one message line: the title, a space, then the address.

A visitor arriving from an advert

Inputs: No fixed address; the browser shows https://example.com/guide?id=7&utm_source=news&fbclid=AbC#comments

Result: Shared address: https://example.com/guide?id=7

The #comments fragment and the utm_source and fbclid tracking parameters are removed; id=7 is kept because it may select the content.

A hostile fixed address

Inputs: Address to share set to javascript:alert(1)

Result: No share link is drawn for it; the page's own address is used instead

Only http and https addresses are accepted, and every finished link must start with https:, mailto:, sms: or viber:.

Limitations

  • Share counts are not shown - the major networks no longer publish them.
  • Facebook, LinkedIn, LINE and XING read only the page address; their previews come from your page's Open Graph tags.
  • Instagram, TikTok, Snapchat and Messenger have no documented web share link and are not offered; Viber and SMS open an installed app.
  • Microsoft Teams sharing works in desktop Edge and Chrome; Mastodon asks visitors for their server unless you set one.
  • Pages that block third-party scripts with a strict Content-Security-Policy must allow https://a2z.tools for scripts and styles.

Where publishers use it

  • A recipe or travel blog adding Pinterest, Facebook and WhatsApp buttons under the lead photo, with a floating rail on desktop that turns into a bottom bar on phones
  • A B2B article page offering LinkedIn, X, email and Copy link, styled in the company accent colour, with no third-party tracking that would need a cookie banner entry
  • A news or community site using one compact Share button that opens the phone's own share sheet, and a panel of networks on desktop
  • A documentation site adding Hacker News, Reddit, Bluesky, Mastodon and Copy link for developer audiences

Questions

Do these share buttons slow my page down or track my visitors?

No social network code is loaded. The kit script, the network list and the icons it needs come from A2Z (about 25 KB compressed for a typical set - a fraction of a single social network SDK) and the buttons are ordinary links. Facebook, X or LinkedIn only learn about a visitor if the visitor clicks their button - exactly as if they had pasted the address themselves.

Why do Facebook and LinkedIn ignore my custom title?

Both networks accept only the page address in a share link and build the preview from your page's Open Graph tags (og:title, og:description, og:image). The builder's title and text fields are used by the networks that read them - X, Threads, Bluesky, Reddit, Telegram, WhatsApp, email and others. To change what Facebook and LinkedIn show, edit your Open Graph tags.

Can it show how many times my page was shared?

No, deliberately. Facebook, X and LinkedIn no longer offer public share counts, so any total shown by a widget would be invented or scraped. A2Z shows no counts rather than a misleading number.

Will a floating share bar cover my content on phones?

Not by default. Below 768 px a side rail turns into a bottom bar (or a single Share button, or disappears - your choice), and the kit adds a matching spacer at the end of your page so the bar never hides your last lines. The bar respects the iPhone home-indicator safe area.

Which networks support Instagram or TikTok sharing?

Neither Instagram nor TikTok offers a link that shares a web page, so they are not offered as share buttons. Use the Social Follow Buttons widget to link to your Instagram or TikTok profile instead.

Does it work with WordPress, Shopify, Wix and React?

Yes. Paste the code in a Custom HTML block (WordPress), theme.liquid or a Custom Liquid section (Shopify), Custom Code (Wix), an Embed element (Webflow) or a Code Injection footer (Squarespace). In React, Next.js, Vue or Angular render the empty div and load the script once; the kit notices divs added later by your router.

Sources

  1. X web intents: Post intent - X Developer Platform . text, url, hashtags, via parameters
  2. Share to Threads with a web intent - Meta for Developers . threads.com/intent/post
  3. Action intent links - Bluesky documentation . bsky.app/intent/compose?text=
  4. Share to Teams from web apps - Microsoft Learn . teams.microsoft.com/share
  5. Web Share API - W3C . navigator.share()

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Social Media Share Buttons
https://a2z.tools/embed/social-share-buttons

Related widgets

More Social Media widgets →

  • Native Share Button

    Social Media Social New

    One Share button that opens the phone's own share sheet, with a tidy fallback panel on desktop.

    Get code

  • Copy Link Button

    Social Media Social New

    A Copy link button or address box that puts a clean page URL on the clipboard and confirms it.

    Get code

  • Social Media Follow Buttons

    Social Media Social New

    Follow buttons for up to 20 profiles in brand colours - icons, labels, card, list or tiles. No social scripts.

    Get code

  • Floating Social Media Icons

    Social Media Social New

    A slim strip of profile icons pinned to the side of the screen that becomes a bottom row on phones.

    Get code

  • Click to Share Quote

    Social Media Social New

    A styled pull quote with X, Threads, Bluesky and LinkedIn buttons that fit the text to each network's limit.

    Get code

  • Share by Email Button

    Social Media Social New

    An 'Email this page' button that opens the reader's mail app with your subject, message and the link.

    Get code

Preview

CustomizeGet code
A2Z EMBEDS FOR YOUR WEBSITE