百度分享插件的使用

原文链接：百度分享插件的使用

效果图

代码结构

百度分享代码可以分为三个部分：HTML、_bd_share_config（具体配置）和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">
    <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>

自定义设置

配置如下：

<script>
	window._bd_share_config = {
		common : {
			//此处放置通用设置
		},
		share : [
			//此处放置分享按钮设置
		],
		slide : [
			//此处放置浮窗分享设置
		],
		image : [
			//此处放置图片分享设置
		],
		selectShare : [
			//此处放置划词分享设置
		]
	}
</script>

通用设置

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

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

通用设置项解析：

配置项名称	值类型	格式和取值	描述
bdText	string	自定义	分享的内容
bdDesc	string	自定义	分享的摘要
bdUrl	string	自定义	分享的Url地址
bdPic	string	自定义	分享的图片
bdSign	string	on ｜ off ｜ normal	是否进行回流统计。 'on': 默认值，使用正常方式挂载回流签名（#[数字签名]） 'off': 关闭数字签名，不统计回流量 'normal': 使用&符号连接数字签名，不破坏原始url中的#锚点。
bdMini	int	1 ｜ 2 ｜ 3	下拉浮层中分享按钮的列数
bdMiniList	array	['qzone','tsina',...]	自定义下拉浮层中的分享按钮类型和排列顺序。
onBeforeClick	function	function(cmd,config){}	在用户点击分享按钮时执行代码，更改配置。 cmd为分享目标id，config为当前设置，返回值为更新后的设置。
onAfterClick	function	function(cmd){}	在用户点击分享按钮后执行代码，cmd为分享目标id。可用于统计等。
bdPopupOffsetLeft	int	正｜负数	下拉浮层的y偏移量
bdPopupOffsetTop	int	正｜负数	下拉浮层的x偏移量

分享按钮设置

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

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

分享按钮配置项解析：

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

浮窗分享设置

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

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

浮窗分享设置项解析：

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

图片分享设置

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

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

图片分享设置项解析：

配置项名称	值类型	格式和取值	描述
tag	string	与data-tag一致	表示该配置只会应用于data-tag值一致的图片。 如果不设置tag，该配置将应用于所有图片。
viewType	string	list｜collection	图片分享按钮样式。
viewPos	string	top｜bottom	图片分享展示层的位置。
viewColor	string	black｜white	图片分享展示层的背景颜色。
viewSize	int	16｜24｜32	图片分享展示层的图标大小。
viewList	array	['qzone','tsina',...]	自定义展示层中的分享按钮类型和排列顺序。详见分享媒体id对应表

划词分享设置

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

图片分享设置项解析：

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

引入javascript

请将代码放于之前。

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

完整示例代码

<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	名称	ID
印象笔记	evernotecn	网易热	h163
一键分享	mshare	QQ空间	qzone
新浪微博	tsina	人人网	renren
腾讯微博	tqq	百度相册	bdxc
开心网	kaixin001	腾讯朋友	tqf
百度贴吧	tieba	豆瓣网	douban
百度新首页	bdhome	QQ好友	sqq
和讯微博	thx	百度云收藏	bdysc
美丽说	meilishuo	蘑菇街	mogujie
点点网	diandian	花瓣	huaban
堆糖	duitang	和讯	hx
飞信	fx	有道云笔记	youdao
麦库记事	sdo	轻笔记	qingbiji
人民微博	people	新华微博	xinhua
邮件分享	mail	我的搜狐	isohu
摇篮空间	yaolan	若邻网	wealink
天涯社区	ty	Facebook	fbook
Twitter	twi	linkedin	linkedin
复制网址	copy	打印	print
百度中心	ibaidu	微信	weixin
股吧	iguba

我项目中使用的代码

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

<script>
    window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "24"
        },
        "share": {
            "bdSize": 24 //分享尺寸
        }
    };
    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>