一键分享工具share.js的使用方法

发布者:luanqingwei 阅读量:12 时间:2018.11.24

最近文汇建站小编在进行页面开发,遇到一键分享到微信、微博、qq空间的功能,如果使用js的一些方法写的话,那就很繁琐费时费力,这里小编推荐Share.js插件,该插件使用简单便捷,可将页面分享到微信、微博、qq、豆瓣、Facebook、Twitter等平台。

image.png

首先需要将Share的css、js文件引入(推荐bootcdn文件)Share.js需要在jquery的基础上进行,所以需要引入jquery文件。

<link href="https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/social-share.js/1.0.16/js/jquery.share.min.js"></script>

将social-share该类名写到元素上,Share会在该类名元素中添加分享的图标

image.png

将以下js代码放入到页面中

<script>

var $config = {

url: window.location.href, // 网址,默认使用 window.location.href

source: '', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="http://overtrue" />

title: '', // 标题,默认读取 document.title 或者 <meta name="title" content="share.js" />

description: '', // 描述, 默认读取head标签:<meta name="description" content="PHP弱类型的实现原理分析" />

image: '', // 图片, 默认取网页中第一个img标签

sites: ['wechat', 'weibo', 'qq'], // 启用的站点

disabled: ['google', 'facebook', 'twitter'], // 禁用的站点

wechatQrcodeTitle: '微信扫一扫:分享', // 微信二维码提示文字

wechatQrcodeHelper: '<p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',

target: '_blank' //打开方式

};

$('.social-share').share($config);

</script>

social-share类名需要与js中的jquery类名相同,这样一键分享功能就可以实现了。

image.png