cople/socialsharer

最 Pure 的社会化分享按钮

SocialSharer

最 Pure 的社会化分享按钮

演示

DEMO

安装

npm install social-sharer --save

使用

<!-- HTML -->
<div class="social-sharer"></div>

<!-- CSS (optional) -->
<link href="../dist/social-sharer.min.css">

<!-- JS -->
<script src="../dist/social-sharer.min.js"></script>
<script>
var socialSharer = new SocialSharer(".social-sharer");
</script>

<!-- jQuery -->
<script src="../dist/jquery.social-sharer.min.js"></script>
<script>
$(".social-sharer").socialSharer();
</script>

如果元素内包含带 data-service 属性的元素，插件会直接使用这些元素，并忽选项中的services 参数：

<div class="social-sharer">
    <a data-service="weibo"     title="分享到微博"></a>
    <a data-service="wechat"    title="分享到微信"></a>
    <a data-service="qq"        title="分享给QQ好友"></a>
    <a data-service="yingxiang" title="分享到印象笔记"></a>
</div>

选项

参数	类型	默认值	描述
url	string	""	网址，dataset.url > meta[property="og:url"] > link[rel="canonical"] > location.href
title	string	""	标题，dataset.title > meta[property="og:title"] > document.title
description	string	""	描述，dataset.description > meta[property="og:description"] > meta[name="description"]
pic	string	""	图片，dataset.pic > meta[property="og:image"] > document.images[0]
source	string	""	网站名称，meta[property="og:site_name"]
weiboKey	string	""	显示微博来源的 AppKey
twitterVia	string	""	Twitter 参数
twitterHashTags	string	""	参见：https://dev.twitter.com/web/tweet-button/web-intent
wechatTitle	string	"分享到微信"	微信二维码标题
wechatTip	string	"用微信「扫一扫」上方二维码即可。"	微信二维码提示文字
qrcodeSize	number	260	微信二维码尺寸
services	array	["weibo", "wechat", "qzone", "qq", "douban", "yingxiang"]	要使用的服务列表，目前支持：weibo, wechat, qzone, qq, douban, yingxiang, renren, facebook, twitter, gplus, linkedin, evernote, email, webshare
classNamePrefix	string	"icon icon-"	分享图标的 CSS 类前缀
onRender	function	null	生成分享图标后会调用该函数，参数：icon:element, serviceName:string
onClick	function	null	点击分享图标后会调用该函数，参数：event:object, serviceName:string

你可以通过给元素设置 data-* 属性来设置对应选项（function类型除外）。例如：

<div class="social-sharer" data-title="标题" data-weibo-key="1234567" data-services="qq,weibo,linkedin"></div>

方法

静态方法

SocialSharer.addService(serviceName:string, urlTemplate:string)

添加服务

实例方法

getURL(serviceName:string)

返回服务的分享地址（微信返回二维码地址）

License

MIT

socialsharer's Issues

请问如何控制弹出的二维码显示到下方？

我这边想要控制qrcode弹出到下方，但对css不太了解。

复制功能很有用，希望能加上

复制链接功能也很有用，希望能加上