Package Exports
- social-share.js
- social-share.js/dist/css/share.min.css
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (social-share.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Share.js
一键分享到微博,QQ空间,QQ好友,微信,豆瓣,使用字体图标。

或者直接浏览我的博客 http://overtrue.me 或者 http://laravel.so 内容页查看效果。
安装
有两种安装方式:
- 使用 npm
npm install overtrue/share.js- 手动下载或者 git clone 本项目。
使用
HTML:
<div class="share-component"></div>
<!-- share.css -->
<link rel="stylesheet" href="dist/css/share.css">
<!-- jQuery -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- share.js -->
<script src="dist/js/jquery.qrcode.min.js"></script> <!-- for QRcode -->
<script src="dist/js/share.js"></script>
// 当你使用类名为 `share-component` 时不需要手动初始化自定义配置
所有配置可选, 通常默认就满足需求:
var $config = {
//...
};
$('.share-component').share($config);可用的配置有:
url : '', // 网址,默认使用 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 : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 启用的站点
disabled : ['google', 'facebook', 'twitter'], // 禁用的站点
wechatQrcodeTitle : "微信扫一扫:分享", // 微信二维码提示文字
wechatQrcodeHelper : '<p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',以上选项均可通过标签 data-xxx 来设置:
驼峰转为中横线,如
wechatQrcodeHelper的data标签为data-wechat-qrcode-helper
禁用 google、设置分享的描述
<div class="share-component" data-disabled="google" data-description="Share.js - 一键分享到微博,QQ空间,腾讯微博,人人,豆瓣"></div>设置微信二维码标题
<div class="share-component" data-wechat-qrcode-title="请打开微信扫一扫"></div>针对特定站点使用不同的属性(title, url, description,image...)
<div class="share-component" data-weibo-title="这个标题只有的分享到微博时有用,其它标题为全局标题" data-qq-title="分享到QQ时用此标题"></div>你也可以自定义图标
使用: data-initialized="true" 标签或者 initialized 配置项来禁用自动生成icon功能。
<div class="share-component" data-initialized="true">
<a href="#" class="iconfont icon-weibo"></a>
<a href="#" class="iconfont icon-qq"></a>
<a href="#" class="iconfont icon-qzone"></a>
</div>以上a标题会自动加上分享链接(a 标签必须带 icon-NAME 属性,不然分享链接不会自动加上)。
欢迎贡献代码及提建议!
License
MIT