social-share-button.js

v1.1.0

Published

4 years ago

Help to create social share button

0High
0Medium
0Low

Social Share可以帮助在你的网站上轻松方便的创建分享到社交网站的按钮，目前支持以下社交网站分享并且还在不断增加中。默认支持五个主题 square, circle, dark-square, dark-circle 和默认主题 default , 默认主题不需要设置 theme 选项。当然你也可以自定义主题，容器节点上会自动追加类名 social-share-button 和 social-share-button-主题名, 你可以使用该类对样式覆盖或者扩充。

支持的网站：

主题：

默认主题

方形主题

圆形主题

暗色方形主题

暗色圆形主题

Installation

支持以下三种安装方式

通过 NPM/Yarn 安装

$ npm install social-share-button.js --save

如果你使用 yarn 的话

$ yarn add social-share-button.js

通过 script 标签引入

下载本项目中dist目录下面的social-share.min.js和social-share.min.css文件，拷贝到项目中，通过script和link标签分别引入js文件和css文件即可。

依赖项

jquery
qrcodejs 你可以直接使用cdn地址 <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

Basic Usage

Quick start

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: {
        sort: 1, // 排序参数，数字较小的展示在前面
        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
});

更多演示请参阅examples

License

Licensed under MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme