百度分享--分享按钮的实现

??

百度分享代码：

<%@ page contentType="text/html;charset=UTF-8"%>
<div class="bdsharebuttonbox">
 <a href="#" class="bds_more" data-cmd="more"></a><a href="#"
  class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#"
  class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#"
  class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#"
  class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#"
  class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#"
  class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
</div>
<script>
 window._bd_share_config = {
  "common" : {
   "bdSnsKey" : {},
   "bdText" : "",
   "bdMini" : "2",
   "bdMiniList" : false,
   "bdPic" : "",
   "bdStyle" : "0",
   "bdSize" : "24"
  },
  "share" : {}
 };
 with (document)
  0[(getElementsByTagName(‘head‘)[0] || body)
    .appendChild(createElement(‘script‘)).src = ‘http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘
    + ~(-new Date() / 36e5)];
</script>
</div>

要注意的是要加上class="bdsharebuttonbox" 属性，class="bds_more" data-cmd="more"这些属性都要加上。

注：只有版本号高于2.0的代码才支持自定义开发，如果您已安装过百度分享，请先检测版本号是否符合，再参考此文档，谢谢。

一、概述

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

注意：

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

??