這一篇寫的比較全面,各種參數也基本都有了:百度分享代碼--一鍵分享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 })
但是對於點擊“更多”出來的分享彈出框中的內容如何自定義還沒有找到方法。