百度分享插件使用


這一篇寫的比較全面,各種參數也基本都有了:百度分享代碼--一鍵分享Baidu Share BEGIN

 

這里完整的展示一下插件如何編寫。

首先需要插入百度分享插件js文件:

Tip:這個插件不支持https,如果要用https的話就直接把 static 文件夾放在網站的根目錄下,並將百度分享代碼中的 http://bdimg.share.baidu.com/ 改為 / 。下載支持HTTPS百度分享插件

with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src =
    'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];

 

DOM中需要添加的內容:

<div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more">更多</a>
    <a href="#" class="bds_qzone" data-cmd="qzone">QQ空間</a>
</div>

<div class="bdsharebuttonbox">是必須要有的,在其內部可以添加各種分享按鈕,具體請看最上面提到的文章

class="bds_more" data-cmd="more"  分享按鈕的 class 和 data-cmd 要相互對應

js 部分,插件的初始化屬性配置:

 1  window._bd_share_config = {  2  common: {  3         bdText: '分享的內容',  4         bdMini: "2",                // 下拉浮層分享按鈕的列數
 5         bdMiniList: ['mshare', 'qzone', 'tsina', 'weixin', 'tqq', 'tieba', 'copy', 'print'],   // 下拉浮層顯示的內容,默認顯示為 false
 6         bdPic: '/assets/share.jpg',    // 分享的圖片
 7         bdStyle: "0",  8         bdSize: "16",  9         bdUrl: '',                  // 分享的地址
10         onBeforeClick: setConf      // 在用戶點擊分享按鈕時執行代碼,更改配置。function(cmd,config){} cmd為分享目標id,config為當前設置,返回值為更新后的設置。
11  }, 12  share: [] 13 };
bdMiniList 可以配置鼠標懸浮時具體顯示哪些分享按鈕,按照如上配置會顯示為:

 如果改為 false ,則會顯示:

如果一個頁面需要分享不同的內容,就要在分享之前重新配置。這里用 mouseover 事件監聽,動態修改參數,等待 onBeforeClick  被觸發,從而達到動態配置分享內容的目的:

 1 function setConf(cmd, config) {  2     if (url) {  3         config.bdUrl = url;  4         config.bdText = title;  5  }  6     return config;  7 }  8 $('.bdsharebuttonbox a').on('mouseover', function () {  9     title = $(this).data('title'); 10     url = window.location.origin+$(this).data('url'); 11 })

但是對於點擊“更多”出來的分享彈出框中的內容如何自定義還沒有找到方法。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM