HTML 分享页面到QQ/微信、微博等平台

详细的代码示例(完整的分享媒体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>

HTML 分享页面到QQ/微信、微博等平台

做的时候发现这些图标都是很过时的了,如果想要修改这些图标得自己重新做一张图片,通过图片位移来显示对应的图片
.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;
        }
修改后

HTML 分享页面到QQ/微信、微博等平台

相关推荐