social-share.js插件可一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等各大社交网站平台,使用字体图标。
之前一直是使用百度分享按钮http://share.baidu.com/code的代码安装来分享网站页面到微博、人人网、QQ空间等各大媒体平台。由于地址已关闭下线,部分平台分享按钮点击也没反应。而social-share可以一建分享到各大社交网站,替代百度社交分享&Bshare按钮。以下有两种方法分享
1、方法一,还是引入百度js分享按钮,在你要分享页面的位置(如文章底部、栏目侧栏)添加以下百度一键分享按钮HTML代码即可
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];</script>
效果演示地址http://www.bokequ.com/qqkw/touxiang/
如果你不想在上面的代码引用百度的http://bdimg.share.baidu.com/static/api/js/share.js文件地址,可引用本站的http://www.bokequ.com/static/api/js/share.js文件。或将static文件上传到你网站的根目录后,在要显示的页面添加以下代码。
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];</script>
2、方法二、在你网站要显示页面的头部,添加以下js代码和css样式地址
<link href="http://www.bokequ.com/blog/youxian/css/share.min.css" rel="stylesheet" type="text/css" /> <script src="http://www.bokequ.com/blog/youxian/js/social-share.min.js" type="text/javascript"></script>
在你要分享的页面添加以下div,这个为全部显示分享按钮
<div class="social-share"></div>
演示效果地址http://www.bokequ.com/blog/youxian/2.html看文章页底部
如果只想显示部分社交分享按钮(如微博、豆瓣、qq/微信等可以自行添加),以下代码
div class="social-share" data-initialized="true" style="text-align: center;"> <a href="#" class="social-share-icon icon-weibo"></a> <a href="#" class="social-share-icon icon-wechat"></a> <a href="#" class="social-share-icon icon-qq"></a> <a href="#" class="social-share-icon icon-qzone"></a> <a href="#" class="social-share-icon icon-douban"></a> </div>
也可以用data-sites=""来指定只显示的部分,如只显示微博、微信、qq、qq空间、豆瓣,代码如下
<div class="share-component" data-sites="weibo,qzone,qq,wechat,douban"></div>
演示效果http://www.bokequ.com/blog/youxian/1.html
通过data-disabled="wechat,google,twitter,facebook" 来限制显示,意思是禁用wechat,google,twitter,facebook 代码如下
<div class="share-component" data-disabled="wechat,facebook,twitter,google"></div>
来源地址cdnjs : https://cdnjs.com/libraries/social-share.js可以直接引入,部分按钮可能要登录帐号才能分享,如豆瓣。
方法一代码static文件下载
https://pan.baidu.com/s/1gXQNF2DL8XyDKEiP_BZKpw?pwd=d35q 提取码: d35q
密码bokequ.com
评论