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

news/2024/5/15 18:52:03/文章来源:https://blog.csdn.net/weixin_34162401/article/details/88968368

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_765662.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java爬虫技术之绕过百度云防护抓取网站内容

为什么80%的码农都做不了架构师?>>> 如图: 首先需要一个Http工具类:HttpHandle package org.coody.robot.util;import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.InputStream; import java.ne…

【WebVR教程翻译】超简单!用A-frame快速打造你的VR网站

原文地址:Building a Simple Web VR UI with A-frame作者:paul christophe译者:大田A-frame是由three.js封装而来的一组库,使用它可以方便地构建跨平台Web VR应用。如果你对它毫无概念,还没有准备好继续往下读&#xf…

团队-爬虫电影网站-开发文档

码云项目托管平台:https://gitee.com/w789369/PaChong/tree/master 其中部分代码截图 转载于:https://www.cnblogs.com/lws1111/p/7780784.html

RHCE作业---搭建网站(基于https)

搭建一个基于https://www.zuoye.com:22222访问的web网站,网站首页在/www/https/,内容为zuoye,可以根据https://www.zuoye.com:22222/mimi访问到的信息为mimi,该网站的实际内容在/usr/local/secret,该网站的内容只有用户…

rhce-搭建一个基于https://www.zuoye.com访问的web网站,网站首页在/www/https/,内容为exercise。客户端使用你搭建的dns服务器做域名解析访问该网站。

要求 搭建一个基于https://www.zuoye.com访问的web网站,网站首页在/www/https/,内容为exercise。客户端使用你搭建的dns服务器做域名解析访问该网站。 装包 mod_ssl(安全套接层ssl协议) httpd(提供Apache主程序) bind(提供DNS服务&#xff0…

20个热门在线少儿编程网站【2019】

2019独角兽企业重金招聘Python工程师标准>>> 少儿编程是新的文化潮流,它涵盖了儿童学习的方方面面:逻辑思维训练、系统化思考训练、 问题解决能力训练、团队协作、创造性思维培养...你可以利用我们整理的这些得到广泛认可的 少儿编程网站教孩…

开源项目大家谈-网站性能调校-Cache的使用

之所以用这个题目是因为很多人常常问我研究开源项目的意义,有一些开源项目在别人眼里看起来完全没有搞头,是一些没有实用价值的项目。其实开源项目往往是新技术的试验田,是全世界优秀程序开发者智慧的汇集,如果你仔细研读这些开源…

RHEL5.0 LAMP建站实例

LAMP即LinuxApacheMySQLPHP,是网上最受欢迎的站点架设解决方案。本文以一个实例介绍其基本的应用过程。8.4.1 企业需求 公司要为自己网站搭建了自己的网站,内网采用的IP地址为192.168.16.80,要求管理员可在网上方便进行用户管理。8.4.2 软件包…

新版 Android 已支持 FIDO2 标准,免密登录应用或网站

开发四年只会写业务代码,分布式高并发都不会还做程序员? 谷歌刚刚宣布了与 FIDO 联盟达成的最新合作,为 Android 用户带来了无需密码、即可登录网站或应用的便捷选项。 这项服务基于 FIDO2 标准实现,任何运行 Android 7.0 及后续…

vs2008快捷键使用 - - JavaEye技术网站

最近,在网上看到一篇关于的一些提示,可以提高开发效率,我把它翻译过来,当然里面也有很多自己的想法,分享一下,大家可以择有用的提示而用之。 我很讨厌看到有人在Visual Studio代码编辑器拷贝或者删除一行之…

Linux系列-Red Hat5平台下的LAMP网站服务搭建(二)

Linux系列-Red Hat5平台下的LAMP网站服务搭建&#xff08;二&#xff09;<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />使用awstats分析Web日志&httpd服务的访问控制上次我们看到了apache服务器的源码编译安装以及httpd服…

Wiki 2.0 网站 (Wikia) 今日揭开面纱

数字好莱坞峰会上&#xff0c;维基百科创始人Jimmy Wales的专访时&#xff0c;介绍了”创新的、社交化、更便捷的“Wikia。Wiki 2.0就此揭开面纱。 该网站具有如下特点&#xff1a; 整合社交工具&#xff0c;让用户分享编辑和贡献。突出排名靠前的编辑&#xff0c;让读者更方便…

使用Django创建网站项目二

上一篇&#xff1a;Windows安装diango框架<一> 创建项目&#xff0c;启动服务器 利用安装好的django包的django-admin.py创建项目&#xff0c;命令 python django-admin.py startproject mysite (注意 django-admin.py 路径 &#xff0c;mysite 是项目文件夹名字) mysi…

为啥学了3个月Python还不会爬网站?症结在这!

关注头条号&#xff0c;私信回复资料会有意外惊喜呦………………最后一张照片有资料呦。前几天一个朋友问我应该如何学习Python&#xff0c;所以来回答一下这个问题做一个总结。核心思路建立良好的反馈机制。学习任何一样东西都是一样。对于编程来说&#xff0c;特别是非计算机…

使用缓存技术优化网站访问

HTTP Caching 用好了&#xff0c;可以极大的减小服务器负载和减少网络带宽。十分有必要深入了解下 http 的 caching 协议。先来看下请求/响应过程&#xff1a;http 请求/响应1、用 Last-Modified 头在第一次请求的响应头返回 Last-Modified 内容&#xff0c;时间格式如&#xf…

新手如何建设属于自己的网站

怎样建设一个属于自己的网站&#xff1f;南通网站建设步骤有哪些&#xff1f;每一个要建站的小白首先想到的肯定是这两个问题。其实这两个问题的范围很广&#xff0c;主要是由于很多刚入门的小白对网站建设的概念很模糊&#xff0c;下面小编就介绍网站建设的详细步骤&#xff0…

没有灵感头发都快抓掉了!推荐几款创意网站,让大脑灵光一动!

1. iDsketchhttp://www.idsketch.cn/工艺设计的草图设计手绘。 里面有系统教育方法&#xff0c;知道新人如何学习手绘&#xff0c;会将国外的手绘方法进行翻译。全方位系统的教你手绘。2. ShoppingDesignhttps://www.shoppingdesig产品包装设计。在这里能够给你带来更多创意灵感…

推荐30款超精致的体育类型的网站设计

日期&#xff1a;2012-11-24 来源&#xff1a;GBin1.com 相信大家肯定喜欢体育运动&#xff0c;如果你是运动迷儿的话&#xff0c;千万不要错过下面的体育相关网站设计。体育网站一般分为这样几个不同的类型&#xff1a;体育新闻、体育俱乐部、体育服饰和一些业界名人的个人网…

6月第四周域名网站排名:新网和易名中国并列第三

据国际统计机构Alexa公布的最新数据数据显示&#xff0c;在6月18日-6月24日期间&#xff0c;国内域名主机网站周均用户覆盖数排名前三位的是&#xff1a;中国万网&#xff0c;达1540。西部数码次之&#xff0c;达620&#xff0c;新网和易名中国并列第三名&#xff0c;达560。 &…

接入网站总结

思路&#xff1a; 认证---->获取token(请求接口时,必须要带上token的值才可以访问接口,应该是考虑到安全问题)---->请求对应的接口获取数据 现在大网站的一些都有例子的 至少我现在做的qq和新浪都是有的。新浪的简单 拿新浪的举例吧。过程都是一样的。 1&#xff0c;一个…