效果图

代码结构

百度分享代码可以分为三个部分：HTML、_bd_share_config（具体配置）和js加载。代码如下：

1
2
3
<div class="bdsharebuttonbox" data-tag="share_1">
<!-- 此处添加展示按钮 -->
</div>
1
2
3
4
5
6
7
8
9
<script>
    window._bd_share_config = {
    //此处添加分享具体设置
    }

    //以下为js加载部分
    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>

按钮标签

1
2
3
4
5
6
7
8
<div class="bdsharebuttonbox">
    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
    <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
    <a href="#" class="bds_linkedin" data-cmd="bds_linkedin" title="分享到bds_linkedin"></a>
    <a href="#" class="bds_more" data-cmd="more"></a>
</div>

自定义设置

配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
	window._bd_share_config = {
		common : {
			//此处放置通用设置
		},
		share : [
			//此处放置分享按钮设置
		],
		slide : [
			//此处放置浮窗分享设置
		],
		image : [
			//此处放置图片分享设置
		],
		selectShare : [
			//此处放置划词分享设置
		]
	}
</script>

通用设置

通用设置将作用于所有分享类型，可将通用设置放于此处，如分享内容、分享url等。

1
2
3
4
5
6
7
8
9
10
11
<script>
	window._bd_share_config = {
		common : {		
			bdText : '',	
			bdDesc : '',	
			bdUrl : '', 	
			bdPic : '',		
			...
		}
	}
</script>

通用设置项解析：

配置项名称值类型格式和取值描述
bdTextstring自定义分享的内容
bdDescstring自定义分享的摘要
bdUrlstring自定义分享的Url地址
bdPicstring自定义分享的图片
bdSignstringon ｜ off ｜ normal是否进行回流统计。
‘on’: 默认值，使用正常方式挂载回流签名（#[数字签名]）
‘off’: 关闭数字签名，不统计回流量
‘normal’: 使用&符号连接数字签名，不破坏原始url中的#锚点。
bdMiniint1 ｜ 2 ｜ 3下拉浮层中分享按钮的列数
bdMiniListarray[‘qzone’,’tsina’,…]自定义下拉浮层中的分享按钮类型和排列顺序。
onBeforeClickfunctionfunction(cmd,config){}在用户点击分享按钮时执行代码，更改配置。
cmd为分享目标id，config为当前设置，返回值为更新后的设置。
onAfterClickfunctionfunction(cmd){}在用户点击分享按钮后执行代码，cmd为分享目标id。可用于统计等。
bdPopupOffsetLeftint正｜负数下拉浮层的y偏移量
bdPopupOffsetTopint正｜负数下拉浮层的x偏移量

分享按钮设置

分享按钮设置的值为数组或对象，值为数组时可对多个分享按钮应用不同的设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	window._bd_share_config = {
		share : [{
			"tag" : "share_1",
			"bdSize" : 32,
			...
		},{
			"tag" : "share_2",
			"bdSize" : 16,
			...
		}]
	}
</script>

分享按钮配置项解析：

配置项名称值类型格式和取值描述
tagstring与data-tag一致表示该配置只会应用于data-tag值一致的分享按钮。
如果不设置tag，该配置将应用于所有分享按钮。
bdSizeint16｜24｜32分享按钮的尺寸
bdCustomStylestring样式文件地址自定义样式，引入样式文件

浮窗分享设置

浮窗分享设置的值为数组或对象，值为数组时可在页面显示多个分享浮窗。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	window._bd_share_config = {
		slide : [{	   
			bdImg : 0,
			bdPos : "right",
			bdTop : 100
		},{
			bdImg : 0,
			bdPos : "left",
			bdTop : 100
		}]
	}
</script>

浮窗分享设置项解析：

配置项名称值类型格式和取值描述
bdImgstring0｜1｜2｜3｜4｜5｜6｜7｜8分享浮窗图标的颜色。
bdPosstringleft｜right分享浮窗的位置
bdTopint分享浮窗与可是区域顶部的距离(px)

图片分享设置

图片分享设置的值为数组或对象，值为数组时可对图片应用不同的设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
	window._bd_share_config = {
		image : [{
			"tag" : "img_1",
			viewType : 'list',
			viewPos : 'top',
			viewColor : 'black',
			viewSize : '16',
			viewList : ['qzone','tsina','huaban','tqq','renren']
		},{
			"tag" : "img_2",
			viewType : 'list',
			viewPos : 'top',
			viewColor : 'black',
			viewSize : '16',
			viewList : ['qzone','tsina','huaban','tqq','renren']
		}]
	}
</script>

图片分享设置项解析：

配置项名称值类型格式和取值描述
tagstring与data-tag一致表示该配置只会应用于data-tag值一致的图片。
如果不设置tag，该配置将应用于所有图片。
viewTypestringlist｜collection图片分享按钮样式。
viewPosstringtop｜bottom图片分享展示层的位置。
viewColorstringblack｜white图片分享展示层的背景颜色。
viewSizeint16｜24｜32图片分享展示层的图标大小。
viewListarray[‘qzone’,’tsina’,…]自定义展示层中的分享按钮类型和排列顺序。详见分享媒体id对应表

划词分享设置

1
2
3
4
5
6
7
8
<script>
	window._bd_share_config = {
		selectShare : [{
			"bdSelectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'],
			"bdContainerClass" : "容器class名"
		}]
	}
</script>

图片分享设置项解析：

配置项名称值类型格式和取值描述
bdSelectMiniListarray[‘qzone’,’tsina’,…]自定义弹出浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表
bdContainerClassstringmyclassname自定义划词分享的激活区域

引入javascript

请将代码放于