百度分享组件使用爬坑
最近在做公司一个项目需要用到百度分享的功能,苦中有一页是一个列表页,需要针对每一行做一个分享功能!
就像如下这种类似的。
于是查看百度分享组件的文挡,查看文挡,得知文挡分享的使用范例如下:
1 <div class="bdsharebuttonbox" data-tag="share_1"> 2 <a class="bds_mshare" data-cmd="mshare"></a> 3 <a class="bds_qzone" data-cmd="qzone" href="#"></a> 4 <a class="bds_tsina" data-cmd="tsina"></a> 5 <a class="bds_baidu" data-cmd="baidu"></a> 6 <a class="bds_renren" data-cmd="renren"></a> 7 <a class="bds_tqq" data-cmd="tqq"></a> 8 <a class="bds_more" data-cmd="more">更多</a> 9 <a class="bds_count" data-cmd="count"></a> 10 </div> 11 <script> 12 window._bd_share_config = { 13 common : { 14 bdText : '自定义分享内容', 15 bdDesc : '自定义分享摘要', 16 bdUrl : '自定义分享url地址', 17 bdPic : '自定义分享图片' 18 }, 19 share : [{ 20 "bdSize" : 16 21 }]37 } 38 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)]; 39 </script>
这样只能针对一个分享来配置,但是我这里需要用到多个,我就想把分享的HTML结构这一块单独放在外面,当鼠标移过按钮的时候再用定位去实现分享结构的位置,再来使用分享功能,但是怎么动态配置分享的文字与链接了,一开始是当鼠标滑过的时候通过设置window._bd_share_config.bdText=“想要分享的内容”与window._bd_share_config.bdUrl=“想要分享的链接”,发现根本不鸟你,心里满满的忧伤,于是再仔细查看文挡,发现有一个回调事件可以动态设置参数,官方说明如下:
但是找不到具体的示例代码,只能尝试着去配置,我是这么做的
1 window._bd_share_config = { 2 13 common : { 3 14 bdText : '自定义分享内容', 4 15 bdDesc : '自定义分享摘要', 5 16 bdUrl : '自定义分享url地址', 6 17 bdPic : '自定义分享图片', 7 onBeforClick:function(cmd,config){ 8 return config.bdText="想要分享的内容"! 9 10 } 11 18 }, 12 19 share : [{ 13 20 "bdSize" : 16 14 21 }] 15 37 }
也没有回响,我有console.log(config),参数确实已经被改啦,就是不起作用,当时欲哭无泪,于是忍下再查看文挡,看到有一个帮助一栏,惊奇发现里面有动态设置分享内容的说明,说明如下:
1 //2、通过增加按钮html标签的data属性进行修改: 2 3 <!-- Baidu Button BEGIN --> 4 <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare" data="{'text':'这里写入您想要自定义的分享内容A'}"> 5 <a class="bds_qzone">QQ </a> 6 <a class="bds_tsina">新浪</a> 7 <a class="bds_tqq">腾讯</a> 8 <a class="bds_renren">人人</a> 9 <span class="bds_more">更多</span> 10 </div> 11 <script type="text/javascript" id="bdshare_js" data="type=tools" ></script> 12 <script type="text/javascript" id="bdshell_js"></script> 13 <script type="text/javascript"> 14 document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000); 15 </script> 16 <!-- Baidu Button END -->
于是我在上面的分享结构标签上加上data="{'text':'这里写入您想要自定义的分享内容A'}",没想到还是不鸟人,后面多次尝试才知道这是1.0版的方法,要想用上面的这HTML上加data的方式配置就行也按上面的方法引人1.0版的,当时就想是不是2.0还没完善,是不是还不支持动态配置参数,本想就按上面引入1.0的方式去解决,但是还不心甘,于是百度再百度,也一直没找到好的解决方法,于是又反复的看文挡,感觉应该是onBeforeClick全用不对,于是百度搜索"百度分享onBeforeClick",才终于知道问题出在哪,方法如下:
1 <script> 2 window._bd_share_config={ 3 "common":{ 4 "bdSnsKey":{}, 5 "bdText":"123654", 6 "bdMini":"1", 7 "bdMiniList":false, 8 "bdPic":"", 9 "bdStyle":"0", 10 "bdSize":"24", 11 "onBeforeClick":function(cmd,config){ 12 return {bdText:'66666688888888'} 13 } 14 15 }, 16 "share":{ 17 "bdSize":16 18 } 19 }; 20 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)]; 21 </script>
其实是你要动态设置哪几个内容,只要以json形式返回你新设的参数即可,而不是直接修改config.bdText下的属性,至些完美解决,其实问题不是特别复杂,在此记录,只让后续有人用百度分享遇到这样的情况下有个案例展现,少走弯路!共勉!