百度分享怎么 自定义图片分享 【原创】

我们在应用百度分享插件的时候，

默认如果开启图片分享的话，连很多小图标也分享了，实在恼火！

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

如何做到自定义图片分享呢？

就是预先定义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‘)

注意：

您在使用自定义属性，请您将自定义内容里面涉及到英文单引号(‘)进行(\‘)转义，以免出现问题

原文地址：https://www.cnblogs.com/apolloren/p/9175534.html