一、概述

百度分享程式碼已升級到2.0，本頁將介紹新版百度分享的安裝配置方法，請點選左側列表檢視相關章節。

二、程式碼結構

分享程式碼可以分為三個部分：HTML、設定和js載入，示例如下：

程式碼結構如下：

<div class="bdsharebuttonbox" data-tag="share_1">
	<!-- 此處新增展示按鈕 -->
</div>
<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>

三、按鈕標籤

按鈕標籤程式碼

<div class="bdsharebuttonbox" data-tag="share_1">
	<a class="bds_mshare" data-cmd="mshare"></a>
	<a class="bds_qzone" data-cmd="qzone" href="#"></a>
	<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>
	<a class="bds_more" data-cmd="more">更多</a>
	<a class="bds_count" data-cmd="count"></a>
</div>

說明：

只有普通頁面分享需要按鈕標籤。劃詞分享、圖片分享無需新增HTML結構。

HTML結構可以放在body的任意位置，可複製多份。

class＝"bdsharebuttonbox" 部分為dom選擇器，請勿改動。

data-tag屬性為分享按鈕標識，用於實現同一頁面中多分享按鈕不同配置，詳見設定部分。

data-cmd屬性為分享目標標識，取值請參見：分享媒體id對應表。此外值為more時點選展現更多彈窗，值為count時展現分享數。

HTML程式碼中其他部分均可自定義。

四、自定義設定

設定部分結構如下，如不需要某項功能，刪除相應的配置項即可。

設定：

<script>
	window._bd_share_config = {
		common : {
			//此處放置
 
通用設定
		},
		share : [
			//此處放置分享按鈕設定
		],
		slide : [
			//此處放置浮窗分享設定
		],
		image : [
			//此處放置圖片分享設定
		],
		selectShare : [
			//此處放置劃詞分享設定
		]
	}
</script>

4.1 通用設定

通用設定將作用於所有分享型別，可將通用設定放於此處，如分享內容、分享url等。

通用設定

<script>
	window._bd_share_config = {
		common : {		
			bdText : '',	
			bdDesc : '',	
			bdUrl : '', 	
			bdPic : '',		
			...
		}
	}
</script>

通用設定項解析：

4.2 分享按鈕設定

分享按鈕設定的值為陣列或物件，值為陣列時可對多個分享按鈕應用不同的設定。

分享按鈕設定

<script>
	window._bd_share_config = {
		share : [{
			"tag" : "share_1",
			"bdSize" : 32,
			...
		},{
			"tag" : "share_2",
			"bdSize" : 16,
			...
		}]
	}
</script>

分享按鈕配置項解析：

4.3 浮窗分享設定

浮窗分享設定的值為陣列或物件，值為陣列時可在頁面顯示多個分享浮窗。

浮窗分享設定

<script>
	window._bd_share_config = {
		slide : [{	   
			bdImg : 0,
			bdPos : "right",
			bdTop : 100
		},{
			bdImg : 0,
			bdPos : "left",
			bdTop : 100
		}]
	}
</script>

浮窗分享設定項解析：

4.4 圖片分享設定

圖片分享設定的值為陣列或物件，值為陣列時可對圖片應用不同的設定。

圖片分享設定

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

圖片分享設定項解析：

4.5 劃詞分享設定

劃詞分享設定

<script>
	window._bd_share_config = {
		selectShare : [{
			"bdSelectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'],
			"bdContainerClass" : "容器class名"
		}]
	}
</script>

圖片分享設定項解析：

五、引入javascript

載入js

<script>
	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>

說明：

請將程式碼放於</body>之前。

六、完整示例程式碼

完整程式碼如下，請根據自身情況修改。

完整示例程式碼

<div class="bdsharebuttonbox" data-tag="share_1">
	<a class="bds_mshare" data-cmd="mshare"></a>
	<a class="bds_qzone" data-cmd="qzone" href="#"></a>
	<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>
	<a class="bds_more" data-cmd="more">更多</a>
	<a class="bds_count" data-cmd="count"></a>
</div>
<script>
	window._bd_share_config = {
		common : {
			bdText : '自定義分享內容',	
			bdDesc : '自定義分享摘要',	
			bdUrl : '自定義分享url地址', 	
			bdPic : '自定義分享圖片'
		},
		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>

七、分享媒體id對應表

分享媒體id對應表

八、工具

檢測分享程式碼版本

	//開啟已安裝分享程式碼的頁面，在控制檯中執行：
	javascript:b=(window.bdShare||window._bd_share_main);alert(b?'\u5F53\u524D\u9875\u9762\u7684\u5206\u4EAB\u4EE3\u7801\u7248\u672C\u4E3A\uFF1A'+(b.version||'1.0'):'\u5F53\u524D\u9875\u9762\u6CA1\u6709\u5B89\u88C5\u5206\u4EAB\u4EE3\u7801\u3002')

注意：

您在使用自定義屬性，請您將自定義內容裡面涉及到英文單引號(')進行(\')轉義，以免出現問題

我的專案中使用: