Back to Details

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.
PlacementBest ForNotes
After first paragraphMost articlesCatches speed-readers; visible early
Sticky sidebarLong-form (desktop)Always visible; consider hiding on mobile
Below title / heroShort postsHigh visibility
End of articleAllNatural completion point; pair with CTA
Mid-article (after key insight)Long contentPlace 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:
PlatformShare 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:
PlatformMin sizeColorsNotes
Facebook16pxBlue #1877F2 or monochromeNo rotation, animation without permission
X (Twitter)32pxBlack or white onlyUse current X logo, not deprecated bird
LinkedIn21px heightBlue #0A66C2 or monochromeUse "in" bug for icons
Instagram29×29pxBlack, white, or official gradientGlyph for social icons
Source icons from official brand resource centers. Outdated or non-compliant icons reduce perceived shareability.
使用官方品牌素材。最小尺寸和颜色规则如下：
平台最小尺寸颜色要求说明
Facebook16px蓝色#1877F2或单色未经许可不得旋转、添加动画
X (Twitter)32px仅可使用黑色或白色使用最新的X logo，不要用已废弃的小鸟图标
LinkedIn高度21px蓝色#0A66C2或单色图标使用带「in」标识的官方版本
Instagram29×29px黑色、白色或官方渐变色社交图标使用官方字形
从官方品牌资源中心获取图标。过时或不符合规范的图标会降低用户的分享意愿。

Design & Technical

设计与技术规范

ItemGuideline
FormatSVG preferred (scalable, small); PNG/WebP with fallback
PerformanceLightweight; avoid heavy share plugins that slow LCP
Accessibility
aria-label="Share on X"
; keyboard accessible
MobileTouch 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
可以让用户通过系统弹窗分享（支持更多应用）。不支持时降级使用意图链接：
javascript
if (navigator.share) {
  navigator.share({ title, url, text }).catch(() => {});
} else {
  window.open(shareUrl, '_blank', 'noopener');
}

Output Format

输出格式

  • Placement recommendation for page type
  • Platforms to include (3–5)
  • Share URL examples with placeholders
  • Icon guidelines (size, source)
  • Accessibility checklist
  • 对应页面类型的摆放位置建议
  • 需要包含的平台（3-5个）
  • 带占位符的分享URL示例
  • 图标规范（尺寸、获取来源）
  • 无障碍检查清单

Related Skills

相关技能

  • article-page-generator: Share buttons on article pages; placement after intro, end of article
  • blog-page-generator: Share buttons on blog index and post cards
  • open-graph: OG tags control share preview (og:image, og:title, etc.) — required for share buttons to show rich cards on Facebook, LinkedIn
  • twitter-cards: Twitter Cards control X preview — required for share buttons to show rich cards when shared to X
  • footer-generator: Footer has social profile links (Follow us); this skill is for share buttons (share this page)
  • article-page-generator：文章页面的分享按钮，建议放在引言后、文章末尾
  • blog-page-generator：博客列表页和帖子卡片上的分享按钮
  • open-graph：OG标签控制分享预览（og:image、og:title等）——是分享按钮在Facebook、LinkedIn上展示富媒体卡片的必要条件
  • twitter-cards：Twitter Cards控制X平台的分享预览——是分享按钮在X上展示富媒体卡片的必要条件
  • footer-generator：页脚放社交主页链接（关注我们）；本技能针对的是分享按钮（分享当前页面）",