百度分享插件开发文档部分常用摘录
以下是通用的一些配置项:具体信息详见专业开发版文档
配置项名称 | 值类型 | 格式和取值 | 描述 |
bdText | String | 自定义 | 分享的内容 |
bdDesc | String | 自定义 | 分享的摘要 |
bdUrl | String | 自定义 | 分享的Url地址 |
bdPic | String | 自定义 | 分享的图片 |
bdSign | String | on|off|normal | 是否进行回流统计。 'on': 默认值,使用正常方式挂载回流签名(#[数字签名]) 'off': 关闭数字签名,不统计回流量 'normal': 使用&符号连接数字签名,不破坏原始url中的#锚点 |
bdMini | int | 1|2|3 | 下拉浮层中分享按钮的列数 |
bdMiniList | array | ['qzone','tsina',...] | 自定义下拉浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表 |
onBeforeClick | function | function(cmd,config){} | 在用户点击分享按钮时执行代码,更改配置。 cmd为分享目标id,config为当前设置,返回值为更新后的设置。 |
onAfterClick | function | function(cmd){} | 在用户点击分享按钮后执行代码,cmd为分享目标id。可用于统计等。 |
bdPopupOffsetLeft | int | 正|负数 | 下拉浮层的y偏移量。 |
bdPopupOffsetTop | int | 正|负数 | 下拉浮层的x偏移量。 |
通用设置的使用:
<script> window._bd_share_config = { common : { bdText : '', bdDesc : '', bdUrl : '', bdPic : '', ... } } </script>
加载js:
<script> with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)]; </script>
按钮标签代码:
<div class="bdsharebuttonbox" data-tag="share_1"> <a class="bds_mshare" data-cmd="mshare"></a> <a class="bds_qzone" data-cmd="qzone" href="#"></a> <a class="bds_tsina" data-cmd="tsina"></a> <a class="bds_baidu" data-cmd="baidu"></a> <a class="bds_renren" data-cmd="renren"></a> <a class="bds_tqq" data-cmd="tqq"></a> <a class="bds_more" data-cmd="more">更多</a> <a class="bds_count" data-cmd="count"></a> </div>
说明:
1.只有普通页面分享需要按钮标签。划词分享、图片分享无需添加HTML结构。
2.HTML结构可以放在body的任意位置,可复制多份。
3.class="bdsharebuttonbox" 部分为dom选择器,请勿改动。
4.data-tag属性为分享按钮标识,用于实现同一页面中多分享按钮不同配置,详见设置部分。
5.data-cmd属性为分享目标标识,取值请参见:分享媒体id对应表。此外值为more时点击展现更多弹窗,值为count时展现分享数。
6.HTML代码中其他部分均可自定义。
【注】:实际使用时,我们常将通用配置和加载JS放置在$(function(){})函数中执行,这就造成当需要用ajax重新加载数据的时候(查询、翻页等),会出现分享按钮无效或者无法显示的问题的问题。这是因为百度分享的代码只会执行一次,所以造成ajax加载的内容中分享按钮无法获取,也无法为其注册事件的问题。这时候需要做的是重新初始化插件代码。在官方的源代码中,初始化函数为 :
_bd_share_main.init();
所以我们只需要在ajax加载页面完成之后,在相应方法后面加上
window._bd_share_main.init();
即可在每次加载页面完成之后重新初始化。
【注】:在实际使用中,会遇到页面多条分享需要动态变更bdUrl等问题,以及在分享时,会出现自动添加分享描述的BUG,可以用以下方法解决(后期使用时发现,如果拼接summary时,使用&有时会出现分享链接跳转错误的情况,未发现具体原因,后改为#。使用时可以根据情况自己判断)。
window._bd_share_config = { "common" : { "bdMini" : "2", "bdMiniList" : false, "bdPic" : "默认图片的url", "bdStyle" : "0", "bdSize" : "16", "onBeforeClick":setConf //分享前事件 }, "share" : {} }; //声明全局变量 var shareHref = "",title=""; function setConf(cmd, config) { if (shareHref) { // summary为分享的描述 config.bdUrl = shareHref +'#summary=""'; config.bdText = title; } return config; } //绑定动态方法获取相应的分享参数 $(".bdsharebuttonbox a").mouseover(function () { shareHref = $(this).attr("href"); title = $(this).parent().attr("title"); });
以上皆为个人理解和查询结果,欢迎批评指正~~