分享插件使用

1.html

<div class="bdsharebuttonbox fenxiang">
						<span>分享</span>
						<ul>
							<li>
								<a title="分享到微信" href="#" class="weixin" data-cmd="weixin"></a>
							</li>
							<li>
								<a title="分享到QQ好友" href="#" class="qq" data-cmd="sqq"></a>
							</li>
							<li>
								<a title="分享到QQ空间" href="#" class="qqKongjian" data-cmd="qzone"></a>
							</li>
							<li>
								<a title="分享到新浪微博" href="#" class="weibo" data-cmd="tsina"></a>
							</li>

						</ul>
					</div>

2.css

*分享  begin*/
.fenxiang{
	float: right;
	width: 200px;
	height: 30px;
	font-size: 14px;
}
.fenxiang > span:first-of-type{
	display: inline-block;
	padding-left: 20px;
	background: url(img/fenxiang.png) no-repeat 0 center;
	color: #666;
	line-height: 26px;
}
.fenxiang > ul{
	display: inline-block;
}
.fenxiang > ul > li{
	display: inline-block;
	width: 26px;
	height: 26px;
	margin-left: 5px;
	/*background: url(img/weixin.png) no-repeat #d1d1d1 center;*/
	/*background-color: #d1d1d1;*/
	border-radius: 50%;
	vertical-align: middle;
	overflow: hidden;
}
.fenxiang > ul > li > a{
	display: inline-block;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
}
.weixin{
	background:url(img/weixin.png)  no-repeat center #d1d1d1  !important ;
}
.weixin:hover{
	background:url(img/weixin.png)  no-repeat center #09bb07  !important ;
}
.qq{
	background:url(img/qq.png)  no-repeat center #d1d1d1  !important ;
}
.qq:hover{
	background:url(img/qq.png)  no-repeat center #1b92ec  !important ;
}
.qqKongjian{
	background:url(img/qqkongjian.png)  no-repeat center #d1d1d1  !important ;
}
.qqKongjian:hover{
	background:url(img/qqkongjian.png)  no-repeat center #ffc600  !important ;
}
.weibo{
	background:url(img/weibo.png)  no-repeat center #d1d1d1  !important ;
}
.weibo:hover{
	background:url(img/weibo.png)  no-repeat center #f84a4a  !important ;
}

/*分享  end*/

3.js

//全局变量，动态的文章ID
	var ShareURL = "";
	//绑定所有分享按钮所在A标签的鼠标移入事件，从而获取动态ID
	$(function() {
		$(".bdsharebuttonbox a").mouseover(function() {
			ShareURL = $(this).attr("data-url");
		});
	});

	/* 
	 * 动态设置百度分享URL的函数,具体参数
	 * cmd为分享目标id,此id指的是插件中分析按钮的ID
	 *，我们自己的文章ID要通过全局变量获取
	 * config为当前设置，返回值为更新后的设置。
	 */
	function SetShareUrl(cmd, config) {
		if(ShareURL) {
			config.bdUrl = ShareURL;
		}
		return config;
	}

	//插件的配置部分，注意要记得设置onBeforeClick事件，主要用于获取动态的文章ID
	window._bd_share_config = {
		"common": {
			onBeforeClick: SetShareUrl,
			"bdSnsKey": {},
			"bdText": "",
			"bdMini": "2",
			"bdMiniList": false,
			"bdPic": "http://www.datouwang.com/uploads/pic/jiaoben/2017/jiaoben826_s.jpg",
			"bdStyle": "0",
			"bdSize": "24"
		},
		"share": {}
	};
	//插件的JS加载部分
	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)];