怎么快速在网站上创建分享按钮?推荐一个JavaScript组件
记得以前做网站的时候遇到前端分享按钮会去百度分享或者jiathis在线生成一个分享代码,当时不懂现在看起来它们做了不少信息收集工作,于是便想着替换掉;在github上找了很久发现没有特别合适的于是便想着自己做一款组件。
先附上地址 https://github.com/slince/social-share.js
主题样式
考虑到大众需求,预先做了五款样式主题;最后两个暗色样式比较适用比较酷酷的或者冷色系为主的网站;当然你也可以自定义主题,不过自定义主题需要你自己写css样式了。
- 默认样式
- 方形样式
- 圆形样式
- 暗色方形
- 暗色圆形
安装
接下来我们再说一说安装的事情,考虑到大众的需求支持以下几种安装方式:
通过npm和yarn安装:
推荐这种方式,现在前端工程化已经很流行了,不在以前那种比较混乱的拿来即用的时代,使用npm可以很方便的管理你的前端代码。
npm用户执行:
$ npm install social-share-button.js --save
yarn用户执行
$ yarn add social-share-button.js
通过script引入:
当然也支持传统的script标签引入的功能,到https://github.com/slince/social-share.js/releases界面下载最新的版本,拷贝dist目录下的文件到你的项目中,然后通过script和link标签分别引入js和css文件即可
用法
最简单的用法
import SocialShare from 'social-share-button.js'; //如果你是通过script标签引入则不需要此步骤
new SocialShare('.social-share-container');
定制主题
new SocialShare('.social-share-container', {
theme: 'square'
});
定制分享参数
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: {
title: '网易',
url: 'http://www.qq.com',
summary: '网易门户',
image: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
}
});
关闭指定按钮
new SocialShare('.social-share-container', {
facebook: false,
twitter: false
});
一些案例展示可以查看example目录下的例子:希望这款组件可以帮到你,欢迎大家pr,欢迎star