展示一个一键分享插件

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

码农的世界，你不懂

发布了765 篇原创文章 · 获赞 3 · 访问量 11万+

私信关注

展示一个一键分享插件

猜你喜欢