https://github.com/slince/social-share.js
:tada: 一个可以帮助快速创建社交网站分享按钮的轻巧的 JavaScript 组件
https://github.com/slince/social-share.js
facebook-share social-share social-share-button social-sharing twitter-share weibo-share
Last synced: about 1 month ago
JSON representation
:tada: 一个可以帮助快速创建社交网站分享按钮的轻巧的 JavaScript 组件
- Host: GitHub
- URL: https://github.com/slince/social-share.js
- Owner: slince
- Created: 2017-09-21T02:26:22.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-07T02:27:53.000Z (about 2 years ago)
- Last Synced: 2025-03-30T00:31:38.324Z (2 months ago)
- Topics: facebook-share, social-share, social-share-button, social-sharing, twitter-share, weibo-share
- Language: JavaScript
- Homepage:
- Size: 477 KB
- Stars: 19
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Social Share Button
[](https://github.com/slince/social-share.js/actions)
[](https://www.npmjs.com/package/social-share-button.js)
[](https://www.npmjs.com/package/social-share-button.js)
Social Share可以帮助在你的网站上轻松方便的创建分享到社交网站的按钮，目前支持以下社交网站分享并且还在不断增加中。默认支持
五个主题 `square`, `circle`, `dark-square`, `dark-circle` 和默认主题 `default` , 默认主题不需要设置 `theme` 选项。
当然你也可以自定义主题，容器节点上会自动追加类名 `social-share-button` 和 `social-share-button-主题名`, 你可以使用该类对样式覆盖或者扩充。
### 支持的网站：
- [微博](https://www.weibbo.com)
- [百度贴吧](https://tieba.baidu.com)
- [微信](https://weixin.qq.com/)
- [QQ](https://www.qq.com)
- [QQ空间](https://qzone.qq.com)
- [豆瓣](https://www.douban.com)
- [Facebook](https://www.facebook.com)
- [Twitter](https://www.twitter.com)
### 主题：
- 默认主题
- 方形主题
- 圆形主题
- 暗色方形主题
- 暗色圆形主题
## Installation
支持以下三种安装方式
- 通过 NPM/Yarn 安装
```bash
$ npm install social-share-button.js --save
```
如果你使用 yarn 的话
```bash
$ yarn add social-share-button.js
```
- 通过 script 标签引入
下载本项目中dist目录下面的`social-share.min.js`和`social-share.min.css`文件，拷贝到项目中，通过script和link标签
分别引入js文件和css文件即可。
依赖项
- [jquery](https://github.com/jquery)
- [qrcodejs](https://github.com/davidshimjs/qrcodejs) 你可以直接使用cdn地址 ``
## Basic Usage
### Quick start
```javascript
import SocialShare from 'social-share-button.js'; //如果你是通过script标签引入则不需要此步骤
new SocialShare('.social-share-container');
```
### 切换主题
```javascript
new SocialShare('.social-share-container', {
theme: 'square'
});
```
### 定制分享参数
```javascript
new SocialShare('.social-share-container', {
// 定义通用的分享参数
title: '百度搜索',
url: 'http://www.baidu.com',
summary: '一个中文搜索网站',
image: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
// 单独定义微博的分享参数,其它的同
weibo: {
sort: 1, // 排序参数，数字较小的展示在前面
title: '网易',
url: 'http://www.qq.com',
summary: '网易门户',
image: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
}
});
```
### 关闭指定按钮
```javascript
new SocialShare('.social-share-container', {
facebook: false,
twitter: false
});
```
更多演示请参阅[examples](./examples)
## License
Licensed under MIT