social-share-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: Social Share Buttons

组件：社交分享按钮

Guides implementation of share buttons that let users share the current page (article, post, product) to social platforms. Distinct from social profile links (footer links to your brand's X, LinkedIn, etc.) — share buttons share this content.

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

指导实现可让用户将当前页面（文章、帖子、产品）分享到社交平台的分享按钮。与社交主页链接（页脚中指向品牌官方X、LinkedIn等账号的链接）不同，分享按钮的作用是分享当前内容。

调用时：首次使用时如果适用，可以先用1-2句话说明本技能覆盖的内容及其重要性，再提供核心输出。如果是后续使用或者用户要求跳过说明，可以直接输出核心内容。

Scope

适用范围

Share buttons: Share current page URL to X, LinkedIn, Facebook, WhatsApp, etc.
Not social profile links (e.g. "Follow us on X") — those live in footer/nav

分享按钮：将当前页面URL分享到X、LinkedIn、Facebook、WhatsApp等平台
不适用社交主页链接（例如「在X上关注我们」）——这类链接通常放在页脚/导航栏

Why It Matters

重要性

Websites with visible social share icons tend to see higher social engagement
Share buttons amplify reach; Open Graph and Twitter Cards control preview — see open-graph, twitter-cards

带有醒目的社交分享图标的网站通常社交互动度更高
分享按钮可以扩大传播范围；Open Graph和Twitter Cards控制分享预览效果，参考open-graph、twitter-cards

Placement (Article Pages)

摆放位置（文章页面）

Fewer, better-placed buttons outperform scattered placement. Research: removing 80% of buttons and repositioning the remaining 20% at high-emotion moments can 3× conversion on share actions.

Placement	Best For	Notes
After first paragraph	Most articles	Catches speed-readers; visible early
Sticky sidebar	Long-form (desktop)	Always visible; consider hiding on mobile
Below title / hero	Short posts	High visibility
End of article	All	Natural completion point; pair with CTA
Mid-article (after key insight)	Long content	Place at friction points (after surprising stat, before CTA)

Avoid: Dozens of icons; every platform when audience uses 2–3. Choose 3–5 platforms that match your audience (e.g. B2B: X, LinkedIn; B2C: X, Facebook, WhatsApp).

少量但位置合理的按钮效果远好于散乱摆放的按钮。研究表明：移除80%的按钮，将剩余20%的按钮重新放在用户情绪高点的位置，可以让分享操作的转化率提升3倍。

摆放位置	适用场景	说明
第一段之后	大多数文章	抓住速读用户；曝光位置靠前
粘性侧边栏	长文内容（桌面端）	始终可见；移动端建议隐藏
标题/头图下方	短帖子	曝光度高
文章末尾	所有内容	自然的阅读完成节点；可搭配行动召唤按钮
文章中部（核心观点之后）	长内容	放在用户情绪点位置（比如出人意料的数据之后、行动召唤按钮之前）

注意避免：堆砌大量图标；在受众仅常用2-3个平台的情况下加入所有平台的按钮。选择3-5个符合受众属性的平台即可（例如B2B场景选X、LinkedIn；B2C场景选X、Facebook、WhatsApp）。

Share URLs (Intent Links)

分享URL（意图链接）

Use platform share/intent URLs so users share with one click:

Platform	Share URL pattern
X (Twitter)	`https://twitter.com/intent/tweet?url={url}&text={text}`
LinkedIn	`https://www.linkedin.com/sharing/share-offsite/?url={url}`
Facebook	`https://www.facebook.com/sharer/sharer.php?u={url}`
WhatsApp	`https://wa.me/?text={url}%20{text}`
Telegram	`https://t.me/share/url?url={url}&text={text}`

Encode

url

and

text

with

encodeURIComponent()

. Use page title or a short pre-written message for

text

— platform-specific prompts with pre-written messages perform ~4× better than generic icons.

使用各平台的分享/意图URL，用户点击即可一键分享：

平台	分享URL格式
X (Twitter)	`https://twitter.com/intent/tweet?url={url}&text={text}`
LinkedIn	`https://www.linkedin.com/sharing/share-offsite/?url={url}`
Facebook	`https://www.facebook.com/sharer/sharer.php?u={url}`
WhatsApp	`https://wa.me/?text={url}%20{text}`
Telegram	`https://t.me/share/url?url={url}&text={text}`

使用

encodeURIComponent()

对

url

和

text

进行编码。

text

可以使用页面标题或者提前写好的短文案——带有预设文案的平台专属引导效果比通用图标好约4倍。

Platform Brand Guidelines (Icons)

平台品牌规范（图标）

Use official brand assets. Minimum sizes and color rules:

Platform	Min size	Colors	Notes
Facebook	16px	Blue #1877F2 or monochrome	No rotation, animation without permission
X (Twitter)	32px	Black or white only	Use current X logo, not deprecated bird
LinkedIn	21px height	Blue #0A66C2 or monochrome	Use "in" bug for icons
Instagram	29×29px	Black, white, or official gradient	Glyph for social icons

Source icons from official brand resource centers. Outdated or non-compliant icons reduce perceived shareability.

使用官方品牌素材。最小尺寸和颜色规则如下：

平台	最小尺寸	颜色要求	说明
Facebook	16px	蓝色#1877F2或单色	未经许可不得旋转、添加动画
X (Twitter)	32px	仅可使用黑色或白色	使用最新的X logo，不要用已废弃的小鸟图标
LinkedIn	高度21px	蓝色#0A66C2或单色	图标使用带「in」标识的官方版本
Instagram	29×29px	黑色、白色或官方渐变色	社交图标使用官方字形

从官方品牌资源中心获取图标。过时或不符合规范的图标会降低用户的分享意愿。

Design & Technical

设计与技术规范

Item	Guideline
Format	SVG preferred (scalable, small); PNG/WebP with fallback
Performance	Lightweight; avoid heavy share plugins that slow LCP
Accessibility	`aria-label="Share on X"` ; keyboard accessible
Mobile	Touch targets ≥44×44px; consider native share API ( `navigator.share` ) on mobile

条目	规范
格式	优先使用SVG（可缩放、体积小）；兜底方案用PNG/WebP
性能	保持轻量；避免使用会拖慢LCP的重型分享插件
无障碍	添加 `aria-label="Share on X"` 属性；支持键盘操作
移动端	点击区域≥44×44px；移动端可考虑使用原生分享API（ `navigator.share` ）

Native Share API (Mobile)

原生分享API（移动端）

On supported browsers,

navigator.share

lets users share via system dialog (includes more apps). Fallback to intent links when unsupported:

javascript

if (navigator.share) {
  navigator.share({ title, url, text }).catch(() => {});
} else {
  window.open(shareUrl, '_blank', 'noopener');
}

在支持的浏览器中，

navigator.share

可以让用户通过系统弹窗分享（支持更多应用）。不支持时降级使用意图链接：