MeDo

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.

Social Share
S

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개

생성할 수 있는 Social Share 템플릿

모든 템플릿은 스크린샷이 아니라 실제 프롬프트입니다. 어떤 AI 에디터에든 붙여넣거나 MeDo에서 실행해 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.

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.

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.

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.

MeDo에서 시도하기

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.

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.

웹사이트 유형별 Social Share 패턴

같은 social share 컴포넌트를 게시되는 사이트 유형에 맞춰 조정합니다.

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.

Social Share 스타일과 변형

페이지의 나머지 부분과 어울리는 변형을 골라 바로 생성하세요.

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.

React, Next.js, Vue, Svelte에서의 Social Share

React, Next.js, Vue 3, SvelteKit, Astro 또는 순수 HTML — 같은 social share을 여섯 가지 방식으로 넣을 수 있습니다.

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)
  }
}

Social Share을 프로젝트에 추가하는 방법

social share 템플릿을 고르고 프로덕션에 배포하기까지 네 단계.

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.

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.

지금 social share 생성하기.

모든 프롬프트를 시도하세요 — 무료, 가입 불필요.

무료로 빌드 시작요금 보기
버튼

버튼

브랜드를 설명하면 MeDo가 버튼 시스템 전체를 생성합니다 — primary, secondary, ghost, destructive 배리언트, 세 가지 사이즈, 그리고 hover, 포커스, 로딩, 비활성 상태까지. 프롬프트 하나로 일관된 세트를 얻습니다.

관련 컴포넌트
토스트

토스트

알림 동작을 설명하면 MeDo가 완전한 토스트 시스템을 생성합니다 — 네 가지 의미 유형, 스택 큐, 호버 시 멈추는 자동 사라짐 타이머, 터치 스와이프로 닫기, 그리고 각 유형에 맞는 aria-live 우선순위까지.

관련 컴포넌트
툴팁

툴팁

필요한 힌트를 설명하면 MeDo가 동작 전체를 생성합니다 — 열기·닫기 지연, 뷰포트 경계를 피하는 반전, 항상 트리거를 향하는 화살표, 키보드 포커스 트리거, 그리고 aria-describedby 연결까지.

관련 컴포넌트
뉴스레터 가입

뉴스레터 가입

한 문장 브리프를 세련된 뉴스레터 가입 섹션으로 변환하세요. 이메일 필드, 지원 카피, 소셜 프루프, 스타일링된 코드 — 모두 생성되어 바로 배포 가능합니다.

관련 컴포넌트