一个在奔跑线上
不断努力奋斗的PHP开发程序猿

Share.js一键分享功能

文章目录

今天给各位站长推荐一个分享代码,之前我一直使用的百度分享,可惜现在百度分享会出现各种问题【貌似关闭了】,所以给大家推荐一个强大的分享功能。使用起来以特别简单方便。

一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点

Share.js

官网

大家可以在官网下载源代码,下面是官网地址。

https://overtrue.me/share.js/

安装调用说明

关于安装方式,官网提供了很多种方法,我这边推荐大家把源代码下载下来的dist放到自己网站目录然后在html中引用,本网站就是使用的此分享代码,大家可以看到效果。

HTML:

<!-- 调用分享代码 -->
<div class="social-share"></div>

<!-- 加载share.css文件 --> 
<link rel="stylesheet" href="dist/css/share.min.css">
<!-- 加载share.js --> 
<script src="dist/js/share.min.js"></script>
// 当你使用类名为 `social-share` 或者 `social-share` 时不需要手动初始化

当在网页中插入以上代码之后就可以得到跟本站一样的分享样式了。

对于一般的博客分享使用的话,到这一步就足够了,我认为毕竟就一个简单的分享功能,没必要折腾那么多时间,当然爱折腾的强迫症除外,Share.js 也提供了很多自定义的配置,如自定义图标:
使用: data-initialized="true" 标签或者 initialized 配置项来禁用自动生成 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 属性,不然分享链接不会自动加上。

当然,Share.js 还有很多折腾地方,我这里就不一一列举了,更多使用方法以及相关配置请看官网,教程到此结束,谢谢大家!

赞(23) 打赏
未经允许不得转载:只缘余生 » Share.js一键分享功能

评论 抢沙发

7 + 2 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏