怎么快速在网站上创建分享按钮？推荐一个JavaScript组件

Posted 2021-03-15 10年码农

记得以前做网站的时候遇到前端分享按钮会去百度分享或者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