在网站开发中，总会需要将本网站的某个网页分享到别的社交平台，比如微信、微博等，我们可以自定义，也可以借助第三方的js插件，比如百度的一键分享和bshare的一键分享，比如咱们黑马论坛使用的就是百度分享，但是最近百度的一键分享官网好像悄无声息的下线了，所以本次介绍bshare的简单使用。
我们的开发步骤如下：
1.准备自己的网站网页，并部署到服务器(本demo用tomcat)
2.到bshare网站获取JS代码，以展示分享按钮
3.查找bshare官网信息，修改展示的分享按钮
4.测试“新浪微博”分享效果
下面，逐步介绍：
1、准备自己的网站并部署。
这里准备一个及其简单的html页面：
[HTML] 纯文本查看 复制代码 <html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>测试一键分享</div>
</body>
</html>
二、获取bshare代码
需要登录bshare官网(http://www.bshare.cn/help/installAction)，并申请JS代码：
需要将第三部分的代码复制到页面中（稍作整理）：
[HTML] 纯文本查看 复制代码 <html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>测试一键分享</div>
<div class="bshare-custom">
<a title="分享到QQ空间" class="bshare-qzone"></a>
<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
<a title="分享到人人网" class="bshare-renren"></a>
<a title="分享到腾讯微博" class="bshare-qqmb"></a>
<a title="分享到网易微博" class="bshare-neteasemb"></a>
<a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
<span class="BSHARE_COUNT bshare-share-count">0</span>
</div>
<script type="text/javascript" charset="utf-8"
src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"></script>
<script type="text/javascript" charset="utf-8"
src="http://static.bshare.cn/b/bshareC0.js"></script>
</body>
</html>
三、修改按钮展示
当将JS代码放置到html页面中之后，效果如下：
会发现，其中的展示按钮除了新浪微博外其他使用频率并不高，我们想把想要的分享平台优先展示，则需要修改样式，具体修改的样式选择可以查阅http://www.bshare.cn/help/platformNames
我们将展示的平台图片更换为微信、新浪微博、QQ空间，代码如下：
[HTML] 纯文本查看 复制代码 <html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>测试一键分享</div>
<div class="bshare-custom">
<a title="分享到人人网" class="bshare-weixin"></a>
<a title="分享到QQ空间" class="bshare-qzone"></a>
<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
<a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
<!-- 将数据统计隐藏掉。统计分析数的按钮 需要借助站长统计
<span class="BSHARE_COUNT bshare-share-count">0</span>-->
</div>
<script type="text/javascript" charset="utf-8"
src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"></script>
<!--可以通过更改bshareC2.js的版本来改变图标的大小。
可选的有
bshareC0.js
bshareC1.js
bshareC2.js
bshareC2P.js
bshareC3.js
-->
<script type="text/javascript" charset="utf-8"
src="http://static.bshare.cn/b/bshareC3.js"></script>
</body>
</html>
上述代码中，我们同时处理了下图标大小和统计技术的问题，效果如下：
四、进行新浪微博测试
下面，我们来点击新浪图标，将当前url分享到新浪平台(如果新浪未登录，则需要登录)
分享之后，可以进入微博查看分享效果：
点击网页链接，则会跳转到被分享的URL地址：
到此，咱们的一键分享演示完毕，当然，大家也可以在bshare注册账号，进而使用更高级的功能，如果百度分享再次开通的话，使用的步骤域bshare类似。
希望上述demo能够给大家带来帮助。 | 
收藏
淘帖
踩
干货
