百度分享自定义图标
2015-11-26 10:50
363 查看
<div class="F_share R"> <div class="bdsharebuttonbox"> <a class="bds_qzone" data-cmd="qzone" href="#"></a> <a class="bds_tsina" data-cmd="tsina"></a> <a class="bds_weixin" data-cmd="weixin"></a> <a class="bds_tqq" data-cmd="tqq"></a> </div> </div>
<script> window._bd_share_config = { common: { bdText: '', bdDesc: '', bdUrl: '', bdPic: '' }, share: [{ "bdSize": 32 }], slide: [{ bdImg: 0, bdPos: "right", bdTop: 100 }], image: [{ viewType: 'list', viewPos: 'top', viewColor: 'black', viewSize: '32', viewList: ['qzone', 'tsina', 'weixin', 'tqq'] }], selectShare: [{ "bdselectMiniList": ['qzone', 'tsina', 'weixin', 'tqq'] }] } 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>
JS代码要注意viewList: ['qzone', 'tsina', 'weixin', 'tqq'], "bdselectMiniList": ['qzone', 'tsina', 'weixin', 'tqq']两个地方,要对应html中的data-cmd属性
"bdSize": 32; viewSize: '32',两个地方需要改为16,32,64的尺寸,图标也需要制作为16,32,64的尺寸
.F_share .bdsharebuttonbox a {width: 32px; height: 32px; display: inline-block; margin: 0px 5px;} .F_share .bdsharebuttonbox .bds_qzone {background: url(../images/qz.png) no-repeat top center;} .F_share .bdsharebuttonbox .bds_tsina {background: url(../images/weibo1.png) no-repeat top center;} .F_share .bdsharebuttonbox .bds_weixin {background: url(../images/weixin.png) no-repeat top center;} .F_share .bdsharebuttonbox .bds_tqq {background: url(../images/weibo2.png) no-repeat top center;}
最终效果
相关文章推荐
- 静态文件服务器
- 10、EIGRP配置实验之offset-list修改metric值
- qsub作业提交命令
- e00格式分析
- 相邻六边形相对位置的判断
- 处理排序空值
- 喝茶的好处和坏处
- 54 You have enabled resumable space allocation in your database by setting the RESUMABLE_TIMEOUT par
- 最全的运营推广方案,教你如何从零开始运营APP
- FileUtils
- 17、手把手教你Extjs5(十七)模块的新增、修改、删除操作
- 桥接
- 数据库 索引
- jquery表单内容过滤
- Android事件分发机制完全解析,带你从源码的角度彻底理解(下)
- 第一个Web页面,呵呵
- Linux学习24_Linux安装系统时硬盘分区建议
- Kettle 安装部署
- 1.2 Spring环境搭建--Spring源码深度解析
- NSString类的方法实现