我們在應用百度分享插件的時候，

默認如果開啟圖片分享的話，連很多小圖標也分享了，實在惱火！

去掉圖片分享吧，分享效果又不好。。。

如何做到自定義圖片分享呢？

就是預先定義tag標簽

例如： "tag": "sharePhoto",

然後在img標簽裏 加上 data-tag="sharePhoto"

=======================

完整代碼送看官

html裏：

<img data-tag="sharePhoto" src="<{$IMG_URL}>" />

JS裏：

"image": {
"tag": "sharePhoto",
"viewList": ["weixin", "qzone", "tsina", "tqq", "renren"],
"viewText": "分享到：", "viewSize": "32"
},

=======================

更多功能感謝百度，還請訪問：http://share.baidu.com/code/advance#tools 學習

=======================

COPY 百度：

一、概述

百度分享代碼已升級到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‘)

註意：

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

百度分享怎麽 自定義圖片分享 【原創】