展示一个一键分享插件

在网站开发中，总会需要将本网站的某个网页分享到别的社交平台，比如微信、微博等，我们可以自定义，也可以借助第三方的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能够给大家带来帮助。

更多java学习资料可关注:itheimaGZ获取

展示一个一键分享插件

相关推荐