每天推荐有价值的网站, 工具, 课程, 书籍, 文章, 每天凌晨之前发布.
前面写文章分享的时候用到一个非常好的分享工具, 今天就给大家推荐一这个分享工具 - https://github.com/overtrue/share.js .share.JS 可以一键分享到微博, QQ 空间, QQ 好友, 微信, 腾讯微博, 豆瓣, Facebook,Twitter,Linkedin,Google+, 点点等社交网站的工具.
share.JS 效果图截图
安装
有 3 种安装方式:
使用 https://npmjs.com/
NPM install social-share.JS
使用 https://bower.io/
bower install social-share.JS
使用 https://cdnjs.com/libraries/social-share.js , 引入 share.min.CSS 与 social-share.min.JS 两个链接就好. (感谢 @mdluo https://github.com/mdluo )
手动下载或者 Git clone 本项目.
使用
html:
- <div class="social-share">
- </div>
- <!-- css & js -->
- <link rel="stylesheet" href="dist/css/share.min.css">
- <script src="dist/js/social-share.min.js">
- </script>
- // 当你使用类名为 `social-share` 时不需要手动初始化
自定义配置
所有配置可选, 通常默认就满足需求:
可用的配置有:
- url : '', // 网址, 默认使用 Windows.location.href
- source : '', // 来源 (QQ 空间会用到), 默认读取 head 标签:<meta name="site"content="http://overtrue" />
- title : '', // 标题, 默认读取 document.title 或者 <meta name="title"content="share.js" />
- origin : '', // 分享 @ 相关 Twitter 账号
- 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>'
示例代码:
- var $config = {
- title : '234',
- description : '123',
- wechatQrcodeTitle : "微信扫一扫: 分享", // 微信二维码提示文字
- wechatQrcodeHelper : '<p > 微信里点" 发现 ", 扫一下 </p><p > 二维码便可将本文分享至朋友圈.</p>',
- };
- socialShare('.social-share-cs', $config);
以上选项均可通过标签 data-xxx 来设置:
驼峰转为中横线, 如 wechatQrcodeHelper 的 data 标签为 data-wechat-qrcode-helper
禁用 google,Twitter,Facebook 并设置分享的描述
<div class="share-component" data-disabled="google,twitter,facebook" data-description="Share.js - 一键分享到微博, QQ 空间, 腾讯微博, 人人, 豆瓣"></div>
设置微信二维码标题
- <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>
<div class="social-share"> <a href="javascript:;" class="social-share-icon icon-heart"></a> </div>
<div class="social-share" data-mode="prepend"> <a href="javascript:;" class="social-share-icon icon-heart"></a> </div>
https://github.com/overtrue/share.js#requirejs RequireJS
RequireJS.config({ paths: { jQuery: '//cdn.bootcss.com/jquery/2.2.4/jquery.min', share: '//cdn.bootcss.com/social-share.js/1.0.15/js/jquery.share.min' }, shim: { share:['jquery'] } }) RequireJS(['jquery','share'],function ($){ $('.target').share({ // settings }) })
RequireJS.config({ paths: { share: '//cdn.bootcss.com/social-share.js/1.0.15/js/social-share.min' }, }) RequireJS(['share'],function (){ // ele: 指定初始化的元素, 可以是单个元素也可以是元素数组 Windows.socialShare(ele,{ // settings }) })
来源: http://www.jianshu.com/p/fbc3b173bda3