Bshare分享的常見用法
阿新 • • 發佈:2019-02-15
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();