Social Share Button Builder

About the Social Share Button Builder

This assembles one HTML snippet containing six real share links, each built with the exact URL format the platform documents: wa.me for WhatsApp, the Web Intent for Twitter/X, sharer.php for Facebook, share-offsite for LinkedIn, t.me/share/url for Telegram, and a mailto: link for email. Every button is a plain anchor tag with inline styling and target="_blank" plus rel="noopener noreferrer", so there's nothing to wire up beyond pasting the markup into your page. The preview above renders the same markup this tool outputs, not a separate mockup, so what you see is what you'll get after pasting.

The Title field is silently ignored by the LinkedIn and Facebook buttons

Worth knowing before you rely on it: LinkedIn's share-offsite endpoint and Facebook's sharer.php both only accept a URL parameter in their public share links — neither has any parameter for custom text, so whatever you type in the Title/Text field has zero effect on those two specific buttons. Both platforms instead pull their own preview text from the target page's Open Graph meta tags when the share dialog opens. The Title field does actively shape the WhatsApp, Twitter/X, Telegram, and Email buttons, since those four platforms' share endpoints do accept custom text.

WhatsApp's link combines title and URL into a single field, unlike the others

The wa.me endpoint exposes only one text parameter, so the tool concatenates your title and URL together with a space before encoding them as that single value — title + " " + url — rather than passing them separately. That's a real constraint of WhatsApp's share link format, not a simplification made by this tool: there's no separate "URL" slot in a wa.me link the way there is for Twitter/X or Telegram.

One shared style string keeps all six buttons visually consistent

Rather than writing a full inline style block six times, a single BTN_BASE string holding the shared padding, border-radius, font, and text color is defined once and reused for every button, with only the background color appended separately per platform. That keeps all six buttons identically shaped and sized, and means updating the shared look (say, a different border-radius) only requires changing one string instead of six near-duplicate style blocks.

The output box and live preview use the same snippet in two different ways

Both the visible preview and the copyable output box are built from the exact same generated HTML string, but inserted differently on purpose: the output box uses textContent so the raw markup shows as literal, readable source code you can copy, while the live preview area uses innerHTML so that same markup actually renders as six clickable buttons. That's an intentional, appropriate use of innerHTML here — the entire point of the preview is to show what the pasted-in HTML will look like once it's live on a real page, not to display the code as text.

The Twitter/X button still points at the twitter.com domain

Even though the platform rebranded to X, its documented Web Intent share endpoint still lives at twitter.com/intent/tweet rather than an equivalent x.com path, and continues to work as the standard way to build a pre-filled share link. The tool uses that same stable, documented domain rather than guessing at an undocumented x.com equivalent.

Fallback text keeps the preview meaningful before you've typed anything

If the URL or Title fields are left empty, the snippet builder substitutes placeholder values ("https://example.com" and "Check out this link") instead of generating buttons with blank or broken links. That means the live preview and copyable snippet are always valid, working share buttons from the moment the page loads, even before you've entered your own URL — useful for seeing exactly how the finished row will look and behave ahead of filling in real content.