Bshare分享的常见用法
来源:互联网 发布:你瞒我瞒网络链接 编辑:程序博客网 时间:2024/05/16 12:29
1.一个页面分享一个
<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>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC2.js"></script>2.自定义页面中分享按钮的样式
<!-- 分享开始 -->
<div class="tleft pos_relative_share" ><span id="share_active_span"> <img class="share_img" src="public/images/student/index4/share.png" width="18px" height="17px" title="分享" /> 分享</span><script type="text/javascript" charset="utf-8"> bShare.addEntry({ title: "我正在乐学一百参加直播活动《{$sa_info['sa_title']}》,真有意思,已经有{$sa_info['sa_bm_num']}人报名了,你也来看看吧。", url: "http://www.lexue100.com",// summary: "分享的文本摘要,默认为页面Meta标签中description的内容或者用户高亮的内容",// pic: "http://www.lexue100.com/uploads/indexbannerimgs/banner_4d05f422c045756c36cb5a825f1ff27c.png" });</script><!-- 分享浮动窗开始 --><div class="pos_absolute_share"> <table width="100%"> <tr height="30px"> <td width="30px" align="right"><img style="margin-top:3px;" src="public/images/student/active/qqim.png" /></td> <td class="share_desc" valign="middle" title="QQ好友" onclick="javascript:bShare.share(event,'qqim');return false;">QQ好友</td> </tr> <tr height="30px"> <td width="30px" align="right"><img src="public/images/student/active/qqmb.png" /></td> <td class="share_desc" valign="middle" title="QQ空间" onclick="javascript:bShare.share(event,'qzone');return false;">QQ空间</td> </tr> <tr height="30px"> <td width="30px" align="right"><img src="public/images/student/active/weixin.png" /></td> <td class="share_desc" valign="middle" title="微信" onclick="javascript:bShare.share(event,'weixin');return false;">微信</td> </tr></table></div>
</div><!-- 分享浮动窗结束 -->
3.一个页面多个分享按钮
第一种方法:
<!--{loop $play_list_data $k $v}--> <div id="share_outer_div_{$v[fm_id]}" style="display:none;"> <div class="bshare-custom icon-medium pos_fixed_share"> <a title="分享到QQ空间" class="bshare-qzone" onclick="javascript:bShare.share(event,'qzone');return false;"></a> <a title="分享到微信" class="bshare-weixin" onclick="javascript:bShare.share(event,'weixin');return false;"></a> <a title="分享到新浪微博" class="bshare-sinaminiblog" onclick="javascript:bShare.share(event,'sinaminiblog');return false;"></a> <!-- 在这里添加更多平台 --> </div> <script type="text/javascript" charset="utf-8"> var titlea = 'xx在小乐FM特意为你点了首歌《{$v[title]}》,请你来听'; bShare.entries = []; // 此处需要清空之前的addEntry中的值,重新赋值,不然只显示循环中第一个的内容 bShare.addEntry({ title: titlea, url: 'http://www.lexue100.com/mk.php?do=xlfm' }); </script> </div><!--{/loop}-->
第一种方法:
<div class="col-xs-3 col-sm-3 col-md-3" style="padding-right:10px;height:20px;" onmouseover="show_share('show', 'self', '{$v[at_id]}');" onmouseout="show_share('hide', 'self','{$v[at_id]}');"><div id="bdsharea_{$v[at_id]}" style="display:none;"><!-- 百度分享插件 --><!-- Baidu Button BEGIN --><div id="bdshare" keyid="{$v[at_id]}" class="bdshare_t bds_tools get-codes-bdshare" data="{'text':'{$v[share]}', 'pic':'http://www.lexue100.com/{$_SC['article_pic_url']}{$v[at_pic]}'}"><a class="bds_qzone">QQ </a><a class="bds_tsina">新浪</a></div><script type="text/javascript" id="bdshare_js" data="type=tools" ></script><script type="text/javascript" id="bdshell_js"></script><script type="text/javascript">document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);</script><!-- Baidu Button END --><!-- 百度分享插件 --></div></div>
第三种方法:
var headers = $(".postHeader"), posts = $(".postBody");$.each(headers, function(i, h) { // 遍历所有文章标题元素 bShare.addEntry({ title:$(a).text(), // 获取文章标题 url:a.href,// 获取文章链接 summary:$(posts[i]).text(),// 从postBody中获取文章摘要 });});
4.修改按钮图片
如果您不喜欢我们提供的按钮,您可以使用自己的按钮图片。首先您必须提供一个可以从网上获取到的图片地址。
例如,如果您的按钮图片位于http://your-domain/images/button.gif,图片的宽和高都是50像素。要使用这个图片作为分享按钮,您只需要在JS嵌入代码中指定:
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#uuid=<你的UUID>&style=999&img=http%3a%2f%2fyour-domain%2fimages%2fbutton.gif&h=50&w=50"></script>
注意只有style为4或999是您才可以设置按钮图片,您还需要同时指定参数h和w,它们用于设置按钮图片的高度和宽度,单位是像素(px)。
5.自定义的一些用法
//清除自定义分享内容的方法,在设置前清空,重新自定义内容bShare.entries = [];//添加自定义分享内容方法,不需要自定义的可以传递,bshare js会主动抓取页面相应值默认bShare.addEntry({ title: str_title, url: url, summary: str_info, pic: img }); //添加自定义分享内容后,初始化按钮bShare.isReady = false;bShare.completed = false;bShare.start();
0 0
- Bshare分享的常见用法
- bShare分享插件的使用
- bShare分享插件的使用
- bShare分享
- bShare分享
- bShare分享
- Bshare分享
- 第三方分享工具bShare的技巧
- 通过bShare分享按钮分享自己的站点
- bshare常用分享代码
- bshare 一键分享
- 分享到各网站-bshare
- 关于分享,bshare分享&百度分享
- bshare插件的使用
- bshare分享插件分享图文信息
- bShare分享,多个分享按钮
- bShare分享-分享到微信、微博、QQ
- Emlog插件-[bShare分享插件 v1.0] 发布
- addShutdownHook
- ThreadPoolExecutor机制(一)--基本介绍
- C语言贪吃蛇。
- SpringMVC之HandlerMethodArgumentResolver和<mvc:argument-resolvers>
- KiCad设计PCB-14-CAN通信与USB通信接口电路设计
- Bshare分享的常见用法
- squid日志处理(天)
- Spark算子:RDD基本转换操作(5)–mapPartitions、mapPartitionsWithIndex
- Java多线程编程总结
- Defer, Panic, and Recover
- LogStash实践日志分析二:收集数据、入库、数据分析和kibana展示
- 快速幂
- CentOS下修复yum安装工具
- 海康摄像头 Stream Channels的写法