social-share-generator_内容创作 skill-PHP中文网

social-share-generator

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

当用户想要添加、优化或审核社交分享按钮（分享文章到X、LinkedIn、Facebook等）时使用。当用户提到“分享按钮”等相关内容时也使用。

组件: 社会共享按钮是一项面向实际任务的技能，主要用于提示共享按钮的实现, 允许用户共享当前页面( 文章、文章、产品) 到社交平台；脱离社会配置链接( discretct)。

从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；

若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

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

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

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

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

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

使用各平台官方提供的分享/Intent 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 倍。

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

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

项目	规范
格式	优先使用 SVG（可缩放、体积小）；PNG/WebP 作为降级方案
性能	轻量级实现；避免引入臃肿的第三方分享插件，以免拖慢 LCP
无障碍访问	`aria-label="Share on X"`；支持键盘操作
移动端	触控区域 ≥44×44px；建议在支持设备上使用原生分享 API（`navigator.share`）

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

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

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