怎么快速在网站上创建分享按钮?推荐一个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

posted @ 2020-01-18 13:35  10年码农  阅读(359)  评论(0编辑  收藏  举报