网站分享插件之Share分享插件

最近发现bshare以及百度分享插件，有一大堆问题，类似于样式错乱，分享链接不生效等不兼容性问题，调整起来也相当麻烦，所以干脆换一种插件。于是被我找到了Share.js，这是一款一键转发工具，它可以一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站，调用起来也相当简单。

分享样式

引入项目:

JS，CSS：
<link rel="stylesheet" href="__CSS__/share.min.css">
<script src="__JS__/social-share.js"></script>
<script src="__JS__/qrcode.js"></script>
Html：
<div class="social-share"></div>

其中“social-share”这个是必须的类名，此外还有一些特殊的参数设置如下：
例如：禁用 google、twitter、facebook ，需要用到 data-disabled
<div class="social-share" data-disabled="google,twitter,facebook"></div>
插件2

设置微信二维码标题，需要用到data-wechat-qrcode-title
<div class="social-share" data-wechat-qrcode-title="请打开微信扫一扫"></div>
插件3

针对特定站点使用不同的属性（title, url, description,image...）
<div class="social-share" data-weibo-title="这个标题只有的分享到微博时有用，其它标题为全局标题" data-qq-title="分享到QQ时用此标题"></div>

你也可以自定义图标：
使用: data-initialized="true" 标签来禁用自动生成icon功能。

<div class="social-share" data-initialized="true">

    <a href="#" class="social-share-icon icon-weibo"></a>

    <a href="#" class="social-share-icon icon-qq"></a>

    <a href="#" class="social-share-icon icon-qzone"></a>

</div>

以上a标签会自动加上分享链接（a 标签必须带 icon-NAME 属性，不然分享链接不会自动加上）。
如果你想在分享icon列表中内置一些元素，比如放一个收藏按钮在分享按钮的后面：

<div class="social-share">

    <a href="javascript:;" class="social-share-icon icon-heart"></a>

</div>

这样的结果是所有的分享按钮都创建在了收藏按钮（icon-heart）的后面了，这时候你就可以用 data-mode="prepend" 来确定分享按钮创建的方式。

<div class="social-share" data-mode="prepend">

    <a href="javascript:;" class="social-share-icon icon-heart"></a>

</div>

这样一来所有的分享图标就会创建在容器的内容前面。

插件4

以下是下载链接：
https://github.com/overtrue/share.js/zipball/master

如没特殊注明，文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6736.html

上一篇：前端开发之使用新的 CSS sin() 和 cos() 三角函数创建一个时钟
下一篇：小白网站建设三部曲-第一篇建设网站的初入门