组件：社交分享按钮

指导实现分享按钮，使用户可将当前页面（文章、博文、商品页等）一键分享至各大社交平台。注意区别于社交资料链接（如页脚中指向品牌 X、LinkedIn 等平台的链接）——分享按钮用于分享本页面内容本身。

调用时说明：首次使用时，如有帮助，可先用 1–2 句话简要说明本能力覆盖范围及其重要性，再输出主体内容；后续调用或用户明确要求跳过说明时，直接输出主体内容。

适用范围

• 分享按钮：将当前页面 URL 分享至 X、LinkedIn、Facebook、WhatsApp 等平台。
• 不包含社交资料链接（例如“关注我们的 X 账号”）——此类链接应置于页脚或导航栏中。

为何重要

• 网站中展示清晰可见的社交分享图标，通常能显著提升社交互动率。
• 分享按钮可扩大内容传播范围；而 Open Graph 和 Twitter Cards 控制分享预览效果 —— 详见 open-graph、twitter-cards。

摆放位置（文章页）

数量少、位置优，效果远胜于分散堆砌。研究表明：移除 80% 的按钮，并将剩余 20% 的按钮重新定位在用户情绪高涨的关键节点，可使分享行为的转化率提升 3 倍。

应避免：堆砌数十个图标；盲目罗列所有平台（而用户实际仅常用其中 2–3 个）。请根据目标受众精选 3–5 个平台（例如 B2B 场景推荐 X、LinkedIn；B2C 场景推荐 X、Facebook、WhatsApp）。

分享 URL（Intent 链接）

使用各平台官方提供的分享/Intent URL，确保用户单击即可完成分享：

请使用 encodeURIComponent() 对 url 和 text 进行编码。其中 text 推荐使用页面标题，或预设简洁文案 —— 带平台定制化文案的分享按钮，其效果约为通用图标类按钮的 4 倍。

平台品牌规范（图标）

请使用各平台官方授权的品牌资产。最小尺寸与配色规则如下：

图标资源请务必从各平台官方品牌资源中心下载。过时或不符合规范的图标会降低用户对分享功能的信任感与使用意愿。

设计与技术规范

原生分享 API（移动端）

在支持的浏览器中，navigator.share 可调起系统级分享弹窗（支持更多本地应用）。若不支持，则回退至 Intent 链接：

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

输出格式

• 摆放位置：按页面类型给出推荐位置
• 平台选择：推荐包含的 3–5 个平台
• 分享 URL 示例：含占位符的完整 URL 模板
• 图标规范：尺寸要求、官方资源来源
• 无障碍检查清单

相关能力

• article-page-generator：面向文章页的分享按钮；推荐摆放于导语后、文章末尾
• blog-page-generator：面向博客首页及博文卡片的分享按钮
• open-graph：OG 标签控制分享预览（如 og:image、og:title 等）—— 是 Facebook、LinkedIn 等平台显示富媒体卡片的必要前提
• twitter-cards：Twitter Cards 控制 X 平台分享预览效果 —— 是 X 平台显示富媒体卡片的必要前提
• footer-generator：页脚中放置的是社交资料链接（如“关注我们”）；本能力专指分享按钮（分享当前页面）