Sharing Is a Placement Problem.

Describe your audience and MeDo generates the bar that catches the impulse — channel intent links with canonical URLs, copy link with real feedback, the native share sheet on phones — and the placement guidance to put it where conviction forms, not where templates default.

Sharing Happens at the Moment of Conviction

A share button has never made anyone want to share; it only decides whether the impulse survives contact with friction. That reframes the whole component: the design work is catching the moment of conviction, which arrives after the payoff — the section that actually solved something — not at the top of the page, where a floating rail trains banner blindness from scroll zero. Three choices do most of the work. Fewer channels beat more: four named after your actual readers beat eight inherited from a 2014 plugin. The copy-link button is not a consolation prize; it is the universal channel, because every app on every phone accepts a pasted link, so it deserves first-class feedback — a check icon, not a silent no-op. On phones the native share sheet outranks any icon row you can draw. Counts are mostly a memory — platforms withdrew their public APIs years ago — so an honest bar omits them rather than fakes them. And it is not a follow button: sharing broadcasts this page, following subscribes to the next one.

4 plantillas

Plantillas de Social Share que puedes generar

Cada plantilla es un prompt real, no una captura de pantalla. Cópialo en cualquier editor de IA o ejecútalo en MeDo y obtén código React + Tailwind.

PopularArticle Bottom Bar

Four Channels Plus Copy Link

The quiet workhorse: intent links carrying title and canonical URL, honest copy feedback, no counts. Place it after the conclusion and leave it alone.

Create a share bar for the end of a blog article: a 'Share this guide' label in 14px zinc-500 followed by four 40px circular icon buttons — X, LinkedIn, Reddit and email — each a real anchor to its channel's intent URL with title and canonical URL encoded, target="_blank", rel="noopener noreferrer", and a distinct aria-label. Add a Copy Link pill that writes the canonical URL via the clipboard API, swapping to a green check with aria-label 'Link copied' for two seconds. On devices where navigator.share exists, collapse the whole row into a single 'Share' button that opens the native sheet with title and url. Include focus-visible rings on every control, 2px hover lifts, and no third-party scripts anywhere.

Prueba en MeDo

Web Share APINative-First Mobile

One Button, OS Share Sheet

Feature-detects navigator.share and makes the native sheet the whole interface on supporting devices — every installed app is suddenly a channel you didn't have to draw.

Create a mobile-first share component: a single 48px full-width 'Share' button with a share icon. On click it calls navigator.share with title, text summary and canonical URL, wrapped in try-catch so an AbortError from a dismissed sheet stays silent. Where navigator.share is missing, the button opens a small popover instead: three channel intent links and a Copy Link row with the usual two-second 'Copied' confirmation. Announce success through an aria-live region. Style the fallback as a bottom sheet under 480px viewports and a centered popover above, trap focus while open, and keep the button reachable and labeled in both states.

Prueba en MeDo

Long readsFloating Rail

Rail That Appears After the Intro

The sticky-rail case done respectfully: absent until the reader passes the introduction, so it catches engaged momentum instead of training blindness from scroll zero.

Create a floating share rail for long-form articles, docked to the left gutter and vertically centered in the viewport. It stays hidden until the reader passes the introduction — watch the second content block with an IntersectionObserver and fade the rail in over 200ms — and hides again near the footer, where it would collide with page furniture. It holds four vertical 40px intent buttons plus copy link with the standard 'Copied' swap, collapsing to a single share-sheet button where navigator.share exists. Give it a white background, hairline border and soft shadow, keep it clear of the text column above its 1280px breakpoint, and remove it below that width in favor of the bottom bar.

Prueba en MeDo

DocsSection Anchors

Copy-Link on Every Heading

The documentation variant: hovering a heading reveals a copy-anchor button, because the unit of sharing in docs is the section that unblocked someone.

Create the docs variant: every h2 and h3 gains a hover-revealed anchor button. On hover or keyboard focus, a small link icon fades in at the heading's left edge, 24px into the margin; clicking it copies the heading's full canonical URL and swaps the icon to a check for two seconds with an aria-live 'Link copied' announcement. Give each heading a stable human slug with numeric deduplication and scroll-margin-top matching the sticky header, and keep the button in the tab order with a focus-visible ring so keyboard users get the same affordance. Above the footer, keep one modest row of three intent buttons plus copy page link — the headings distribute, the footer broadcasts.

Prueba en MeDo

Cómo personalizar tu Social Share

Pick channels by audience, not by default

Six inherited icons dilute the two your readers actually use. A developer blog wants X and Hacker News; a food audience wants Pinterest and WhatsApp; a B2B report wants LinkedIn and email. Name your three in the prompt and let absence do the editing.

Treat copy link as the flagship channel

A pasted URL works in every app on every platform, which makes Copy Link the one button that never targets the wrong network. Give it real feedback — icon swaps to a check, label announces 'Link copied' — and copy the canonical URL, not a parameter-polluted location.href.

Let the native sheet own the phone

Feature-detect navigator.share and make it the primary action where it exists: the OS sheet carries every installed app and previews your page properly, which no fixed icon row can match. Hide the channel row on those devices so the bar reads as one clear action.

Place it where conviction forms

The share impulse arrives after the payoff — the section that solved the problem — so the reliable placements are the article's end and after high-value sections. A rail that follows the reader from scroll zero buys impressions at the cost of training everyone to ignore it.

Quién usa el componente Social Share

Blog posts and digital publications

A four-channel bar plus Copy Link after the conclusion — placed where the piece earned it — with intent links that carry the title and canonical URL pre-filled.

Documentation and developer guides

A quiet 'Share' plus per-heading anchor copy, because the thing developers pass around is usually the exact section that unblocked them, not the page.

Course lessons and podcast episodes

Native share sheet on mobile carrying the lesson or timestamp deep link, so a shared link lands a friend on the same minute that convinced the sender.

Product launch and campaign pages

Share buttons with pre-written copy per channel — a launch note reads differently on X than in an email — plus copy link for everything else, sitting after the announcement rather than above the fold.

Patrones de Social Share para distintos sitios web

El mismo componente social share, adaptado al tipo de sitio donde se publica.

01 / 04

Blogs and Digital Publications

The bottom-of-article bar is the default because it sits where finishing happens. Editorials that serialize arguments can repeat the bar after each major section — the reader who shares after section two never reaches section nine.

Estilos y variantes de Social Share

Elige la variante que encaje con el resto de la página y genérala.

01 / 04

Circular Icon Row

Round bordered icon buttons in a row with a quiet label. The neutral default that fits any article footer — compact, recognizable, and it reads as an action rather than a call to action, which is the correct register for sharing.

Social Share en React, Next.js, Vue y Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: el mismo social share, seis formas de integrarlo.

01 / 03

React Share Bar

Intent URLs are just strings, so the channel list is data; the interesting half is nativeShare's fallback ladder — Web Share API where it exists, clipboard everywhere else — so the button never dies on an unsupported browser.

src/components/ShareBar.tsx

const url = 'https://example.com/guide'
const q = encodeURIComponent(url)

const channels = [
  { name: 'X', href: `https://twitter.com/intent/tweet?url=${q}&text=${title}` },
  { name: 'LinkedIn', href: `https://www.linkedin.com/sharing/share-offsite/?url=${q}` },
]

async function nativeShare() {
  if (navigator.share) {
    await navigator.share({ title: document.title, url })
  } else {
    await navigator.clipboard.writeText(url)
  }
}

Cómo añadir tu Social Share a un proyecto

Cuatro pasos, desde elegir una plantilla de social share hasta llevarlo a producción.

01~1min

Name Your Reader's Actual Channels

Pick three or four places your readers already share, not the default six. A developer blog wants X, Hacker News and Reddit; a design audience wants Pinterest. Fewer, correct buttons out-convert a full row every time.

02~2min

Generate With Copy Link and Native Share In

Ask for the channel intent links, the copy-link button with its 'Copied' feedback, and navigator.share with feature detection in one prompt — the fallbacks are the part hand-rolled versions always miss.

03~2min

Test the Feedback, Not the Links

Click Copy Link and watch for the two-second confirmation, tab through for visible focus rings, and load the page on a phone to confirm the native sheet replaces the icon row where it should.

04~2min

Place It After the Payoff and Ship

Put the bar at the end of the section that delivers value — the article's conclusion, the recipe's last step. Resist a rail that follows the reader from scroll zero; that is ad-blindness territory.

Preguntas frecuentes sobre Social Share

Do share buttons actually get clicked?

Yes, rarely — and designing for honest rates is what makes them work. On most content sites only a low single-digit percentage of readers shares at all, and nearly all of those share immediately after the content pays off. That is why placement and channel choice dominate every visual tweak: a three-button bar after the conclusion out-performs an eight-button rail that starts following the reader from the first scroll. If a share element needs a big number to justify its existence, it is in the wrong place.

Why doesn't my share bar show share counts anymore?

Because the platforms withdrew the data. Twitter removed public share counts in 2015, Facebook locked engagement counts behind app-scoped tokens, and the remaining networks either never exposed them or require server-side proxies that add a privacy and maintenance burden for a number nobody trusts. Current practice is to omit counts and let the channels stand on their own — or to surface proof that actually persuades, like subscriber numbers or testimonials, elsewhere on the page.

Should I use the native share sheet instead of channel buttons?

On phones, yes, wherever it exists. navigator.share hands the page to the operating system's share sheet, which already contains every app the reader has installed — including ones you would never guess to draw — and it renders your URL with proper previews. Feature-detect it, offer it as the primary action on supporting devices, and keep the channel row for desktop where API coverage is only partial. It requires a secure context, so it also quietly depends on you serving HTTPS.

What is the difference between share buttons and follow buttons?

They point in opposite directions: share broadcasts this page to the reader's audience, follow subscribes the reader to your next thing. Mixing them in one bar muddies both jobs and doubles the visual load — the reader has to parse six icons that mean two different things. Most content pages want share first and follow once, in the author or footer area; the follow ask earns its place after the share impulse has been served, not beside it.

Do third-party share widgets hurt privacy and page speed?

The classic widget did both: every page load pulled a script that set tracking cookies for each network and blocked rendering while it did. You can have the feature without any of that — share intent links are plain anchors, the clipboard is a browser API, and navigator.share is native, so MeDo's default generates zero third-party JavaScript. As a side effect, this pattern also removes share widgets from your cookie-disclosure obligations entirely.

Genera tu social share ahora.

Prueba cualquier prompt — gratis, sin registro.

Empieza gratis Ver precios

Botón

Describe tu marca y MeDo genera todo el sistema de botones — variantes primaria, secundaria, ghost y destructiva, tres tamaños, más estados hover, foco, carga y deshabilitado. Un prompt, un conjunto coherente.

Componentes relacionados

Toast

Describe el comportamiento de tus notificaciones y MeDo genera el sistema de toast completo — cuatro tipos semánticos, una cola de apilado, temporizadores de cierre automático que se pausan al pasar el cursor, cierre por deslizamiento táctil y la cortesía aria-live correcta para cada tipo.

Componentes relacionados

Tooltip

Describe la pista que necesitas y MeDo genera todo el comportamiento — retardos de apertura y cierre, volteo para alejarse de los bordes del viewport, una flecha que sigue apuntando al disparador, activación por foco de teclado y el cableado de aria-describedby.

Componentes relacionados

Registro de newsletter

Convierte un briefing de una frase en una sección de registro de newsletter pulida. Campo de email, copy de apoyo, prueba social y código con estilo — todo generado y listo para usar.

Componentes relacionados