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

villainhr 发布于2019-08-29 13:29 / 1128人阅读

摘要：记得以前做网站的时候遇到前端分享按钮会去百度分享或者在线生成一个分享代码，当时不懂现在看起来它们做了不少信息收集工作，于是便想着替换掉在上找了很久发现没有特别合适的于是便想着自己做一款组件。

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

GPU云服务器云服务器怎么创建一个视频网站怎么在云服务器上创建数据库怎么在网站上更新内容怎么在服务器上搭建网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112630.html

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

摘要：记得以前做网站的时候遇到前端分享按钮会去百度分享或者在线生成一个分享代码，当时不懂现在看起来它们做了不少信息收集工作，于是便想着替换掉在上找了很久发现没有特别合适的于是便想着自己做一款组件。记得以前做网站的时候遇到前端分享按钮会去百度分享或者jiathis在线生成一个分享代码，当时不懂现在看起来它们做了不少信息收集工作，于是便想着替换掉；在github上找了很久发现没有特别合适的于是...

DataPipeline 2019-08-01 17:39 评论0 收藏0
怎么快速在网站上创建分享按钮？推荐一个JavaScript组件

摘要：记得以前做网站的时候遇到前端分享按钮会去百度分享或者在线生成一个分享代码，当时不懂现在看起来它们做了不少信息收集工作，于是便想着替换掉在上找了很久发现没有特别合适的于是便想着自己做一款组件。记得以前做网站的时候遇到前端分享按钮会去百度分享或者jiathis在线生成一个分享代码，当时不懂现在看起来它们做了不少信息收集工作，于是便想着替换掉；在github上找了很久发现没有特别合适的于是...

孙淑建 2019-08-21 16:40 评论0 收藏0
JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。浅析用 js 解析 xml 的方法由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。装 X - 建立自己的斗图网站库之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ，迫于本屌丝开不起...

Fourierr 2019-08-21 18:46 评论0 收藏0
前端基础入门

摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...

shinezejian 2019-08-22 13:51 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0