Skip to content

🎉 一个可以帮助快速创建社交网站分享按钮的轻巧的 JavaScript 组件

Notifications You must be signed in to change notification settings

slince/social-share.js

Repository files navigation

Social Share Button

Build Status npm version license

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

支持的网站:

主题:

  • 默认主题

默认

  • 方形主题

方形

  • 圆形主题

圆形

  • 暗色方形主题

暗色方形

  • 暗色圆形主题

暗色圆形

Installation

支持以下三种安装方式

  • 通过 NPM/Yarn 安装
$ npm install social-share-button.js --save

如果你使用 yarn 的话

$ yarn add social-share-button.js
  • 通过 script 标签引入

下载本项目中dist目录下面的social-share.min.jssocial-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