应使用 ShareThis 官方 v3 脚本在 </body> 前异步加载，并在容器上设置 data-sharethis-url（必须为完整绝对路径）和 data-sharethis-title 属性；SPA 需路由切换后调用 stLight.options() 更新 URL；微信分享需在公众号后台配置 JS 接口安全域名。
直接用 sharethis 嵌入按钮，别自己写 DOM 操作
ShareThis 是目前最轻量、兼容性最好、且无需后端的社交分享方案。它不依赖 jQuery，支持现代浏览器，CDN 加载后自动绑定事件，不用手动监听点击或拼接 URL。
常见错误是把它的 script 放在 <head> 里却没加 async 或 defer，导致阻塞页面渲染；或者复制了旧版代码（v2），而官网默认已推 v3。
- 在
<body>底部（</body>前）插入官方最新 v3 脚本：<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=65abcd1234567890abcdef12&product=inline-share-buttons" async="async"></script>
- 在你想显示按钮的位置，直接放一个空容器，加
data-sharethis-url和data-sharethis-title属性：<div class="sharethis-inline-share-buttons" data-sharethis-url="https://example.com/article-1" data-sharethis-title="文章标题"></div>
- 如果页面是单页应用（SPA），URL 动态变化，得在路由切换后调用
stLight.options()重设参数，否则分享出去的还是初始 URL
data-sharethis-url 必须是完整绝对路径
ShareThis 不会自动读取当前页面 location.href，它只认你显式传进来的 data-sharethis-url。本地开发时填 http://localhost:5000/post/1 没问题，但上线后若漏掉协议或域名，比如写成 /post/1，微信、微博等平台会拒绝解析，分享卡片空白或 fallback 到首页。
- 静态站点可直接硬编码：
data-sharethis-url="https://yoursite.com<%= current_path %>"（配合模板引擎） - 纯 HTML 静态页建议用 JS 注入：在
sharethis.js加载完成后，执行document.querySelectorAll('.sharethis-inline-share-buttons').forEach(el => { el.setAttribute('data-sharethis-url', window.location.href); }); - 注意 URL 中的中文、空格、特殊符号必须已由前端 encodeURIComponent 处理，否则微博可能截断、LinkedIn 报 400
按钮样式被覆盖？优先检查 !important 和 CSS 优先级
ShareThis 默认内联样式带 !important，但某些 UI 框架（如 Tailwind 的 base 重置、Bootstrap 的 reboot.css）会强行重置 font-size、line-height 或 display，导致图标错位或文字挤在一起。
立即学习“前端免费学习笔记（深入）”；
- 不要用
iframe方式集成——它虽然隔离样式，但无法响应式缩放，移动端点按区域变小，且 Google Lighthouse 会报“第三方脚本阻塞渲染” - 若需定制尺寸，改用 ShareThis 提供的
data-style属性：data-style="small"或data-style="large"，而不是自己写.sharethis-inline-share-buttons img { width: 24px !important; } - 真要覆盖颜色，用更具体的 selector：
.sharethis-inline-share-buttons .st-btn:hover { background-color: #007bff !important; }，但注意 LinkedIn、WhatsApp 等图标的 SVG 路径色值是硬编码在 JS 里的，改背景色没用，得用data-networks控制显示哪些渠道
微信分享失败？不是前端问题，是域名未配置 JS-SDK 安全域名
ShareThis 的微信按钮本质是唤起微信内置浏览器的分享接口，但它**不走微信 JS-SDK**，而是跳转到微信专用短链（weixin:// 协议）。这个协议只在微信客户端内有效，且对域名有白名单限制：你必须在微信公众平台后台的“公众号设置 → 功能设置 → JS 接口安全域名”里添加你的域名（如 yoursite.com），否则点击后无反应或提示“该网页暂时无法访问”。
- 测试时务必用真机微信打开，不能用 Chrome 模拟微信 UA
- 即使加了安全域名，若页面 URL 含动态参数（如
?utm_source=st），微信也可能校验失败，建议分享前用history.replaceState清洗 URL 参数 - 如果项目已接入微信 JS-SDK，反而建议停用 ShareThis 的微信按钮，改用
updateAppMessageShareData手动控制分享文案和缩略图——ShareThis 对缩略图尺寸、格式、CDN 缓存的处理很粗糙
