badroot 2019-09-05
详细的代码示例(完整的分享媒体id对应表详见转载链接)
<div class="bdsharebuttonbox" data-tag="share_1"> <a class="bds_qzone" data-cmd="qzone" href="#"></a> //QQ空间 <a class="bds_tsina" data-cmd="tsina"></a> //新浪微博 <a class="bds_baidu" data-cmd="baidu"></a> //百度 <a class="bds_renren" data-cmd="renren"></a> //人人网 <a class="bds_tqq" data-cmd="tqq"></a> //QQ </div> <script> window._bd_share_config = { common : { bdPopTitle:'窗口标题', bdText : '发现一个新的网页,快来围观啊~', bdDesc : 'Custom share summary', //自定义分享摘要 bdUrl : 'Custom share URL address', //自定义分享url地址 bdPic : 'http://obs-hwe2-p2.obs.cn-east-2.myhwclouds.com/upfile/72180503/15411509626726.jpg' //自定义分享图片 }, share : [{ "bdSize" : 16 }], slide : [{ bdImg : 0, bdPos : "right", bdTop : 100 }], image : [{ viewType : 'list', viewPos : 'top', viewColor : 'black', viewSize : '16', viewList : ['qzone','tsina','huaban','tqq','renren'] }], selectShare : [{ "bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'] //自定义弹出浮层中的分享按钮类型和排列顺序 }] } 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>
做的时候发现这些图标都是很过时的了,如果想要修改这些图标得自己重新做一张图片,通过图片位移来显示对应的图片
.bdshare-button-style0-16 a, .bdshare-button-style0-16 .bds_more{ background-image: url('./icon.png') !important; padding-left: 32px !important; height: 32px !important; line-height: 32px !important; } .bdshare-button-style0-16 .bds_tsina{ background-position: 0 -30px !important; }
修改后