成熟JS社交分享库推荐（覆盖 Linkedin / X(Twitter) / Facebook / 微信）

成熟 JS 社交分享库推荐（覆盖 Linkedin / X (Twitter) / Facebook / 微信）

按原生 JS 通用、Vue 适配、轻量无追踪、第三方托管四类整理，全部支持简单配置切换平台、自定义分享标题 / 链接 / 配图，区分网页扫码微信和微信内置浏览器 JS-SDK两种场景。

一、overtrue/share.js（国内最成熟，推荐通用 Vue / 原生项目）

支持平台

Linkedin、X (Twitter)、Facebook、微信（扫码弹窗）、微博、QQ 空间等全覆盖

核心优势

  1. 零 jQuery 依赖，原生 JS，Vue/React/ 静态页面都能用

  2. 极简配置，一行初始化，支持 data 属性静态配置

  3. 微信自动生成二维码弹窗（PC / 非微信浏览器）

  4. 可自由开启 / 关闭指定平台，自定义图标、文案、弹窗样式

安装 & 最简使用

npm install overtrue-share.js
import socialShare from 'overtrue-share.js'
import 'overtrue-share.js/dist/share.min.css'

socialShare('#share-box', {
  url: window.location.href,
  title: '分享标题',
  description: '分享描述',
  image: 'https://xxx/share.jpg',
  // 只启用你需要的四个平台
  sites: ['linkedin', 'twitter', 'facebook', 'wechat'],
  wechatQrcodeTitle: '微信扫码分享',
})
<div id="share-box"></div>

Vue3 适配

直接在 onMounted 内执行初始化，配合 ref 获取 DOM 容器即可，兼容@vue/shared配套工程。

二、Shareon.js（现代化轻量无追踪，海外社媒体验最好）

支持

Linkedin、X、Facebook、WhatsApp、Email、Web Share API、微信（二维码兼容）

优点

  • 体积极小，无第三方埋点、无 Cookie 追踪（合规 GDPR）

  • 内置 svg 图标，现代扁平化样式，弹窗居中

  • ES Module 原生支持，Tree-Shaking 友好

极简配置

npm i shareon
import shareon from 'shareon'
shareon({
  selector: '.share',
  url: location.href,
  title: '文章标题',
  platforms: ['linkedin', 'x', 'facebook', 'whatsapp']
})
<div class="share"></div>

三、Social Share Buttons（纯配置式，Web Component，跨框架）

特点

通过配置数组指定平台，自动渲染按钮，响应式布局，支持自定义图标、弹窗尺寸

new SocialShareButtons({
  container: '#share',
  platforms: ['linkedin', 'x', 'facebook'],
  shareUrl: location.href,
  shareTitle: '标题'
})

四、Vue 专用方案（Vue3 项目首选）

1. vue-social-sharing（Vue2/Vue3 双兼容）

专为 Vue 封装，组件式调用，props 配置，无需手动操作 DOM

<template>
  <SocialSharing
    url="https://xxx"
    title="分享标题"
    networks="linkedin,twitter,facebook,wechat"
  />
</template>
<script setup>
import { SocialSharing } from 'vue-social-sharing'
</script>

2. react-share（React 项目，Vue 不适用，仅作对比）

完整海外社媒组件，但无微信扫码能力，仅海外平台

五、第三方托管工具（零开发，适合快速上线）

AddToAny

全球最通用分享组件，后台可视化勾选 LinkedIn/X/Facebook/ 微信，复制一段 JS 嵌入页面即可，完全不用写配置代码；缺点是自带数据追踪，海外站点需合规弹窗授权

关键问题：WECHATAPP（微信内置浏览器原生分享）

上面所有库仅提供扫码分享（PC / 外部浏览器）；如果需要微信 APP 内右上角原生分享，必须搭配微信 JS-SDK 实现，分享库仅做弹窗入口，配套方案：

  1. 引入 weixin-js-sdk

  2. 后端生成签名（appId、timestamp、nonceStr、signature）

  3. wx.config 注入权限，调用 updateAppMessageShareData

  4. 点击分享按钮弹出 share.js 弹窗，微信环境自动切换原生分享入口

选型建议

  1. Vue3 国内 + 海外社媒都要 → overtrue/share.js（平衡微信扫码 + 领英 / X/Facebook，配置最简单）

  2. 纯海外站点、隐私优先、无国内微信重度需求 → Shareon.js

  3. 纯 Vue 组件化开发，不想操作原生 DOM → vue-social-sharing

  4. 快速上线、不想写任何 JS 配置 → AddToAny

  5. 仅 React 项目 → react-share

统一配置模板（overtrue/share.js 完整可用配置）

socialShare('#share', {
  url: 'https://你的页面链接',
  title: '自定义分享标题',
  description: '分享描述文案',
  image: 'https://分享封面图地址',
  // 仅保留需要的4个渠道
  sites: ['linkedin', 'twitter', 'facebook', 'wechat'],
  // 禁用不需要的
  disabled: ['qzone', 'weibo', 'qq'],
  // 微信二维码弹窗文案
  wechatQrcodeTitle: '微信扫一扫分享',
  wechatQrcodeHelper: '<p>微信打开后分享给好友/朋友圈</p>',
  // 弹窗尺寸
  popupWidth: 600,
  popupHeight: 500
})