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

详细的代码示例(完整的分享媒体id对应表详见转载链接)

//QQ空间

//新浪微博

//百度

//人人网

//QQ

window._bd_share_config = {

common : {

bdPopTitle:'窗口标题',

bdText : '发现一个新的网页，快来围观啊~',

bdDesc : 'Custom share summary', //自定义分享摘要

bdUrl : 'Custom share URL address', //自定义分享url地址

bdPic : 'http://obs-hwe2--east-/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./static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];

做的时候发现这些图标都是很过时的了，如果想要修改这些图标得自己重新做一张图片，通过图片位移来显示对应的图片

.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;

}

修改后