400-800-9385
网站建设资讯详细

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

发表日期:2023-04-10 10:25:26   作者来源:黎云辉   浏览:955   标签:网站建设    
最近发现bshare以及百度分享插件,有一大堆问题,类似于样式错乱,分享链接不生效等不兼容性问题,调整起来也相当麻烦,所以干脆换一种插件。于是被我找到了Share.js,这是一款一键转发工具,它可以一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站,调用起来也相当简单。

分享样式

引入项目:

引入JS

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