回到顶部
您的当前位置: 编程语言> 前端> 3th> 百度
百度分享代码图标式与浮窗式并存办法
2014-07-07 15:38:39
标签: 转载 百度分享 图标式 浮窗式 并存
问题描述

2014年7月7日,www.song-z.com 网站更新百度分享,由于原来没有微信分享,添加新的代码,页面提供微信扫描分享功能,添加代码后,同一个页面同时使用图标式和浮窗式,导致浮窗式不显示,单独使用的时候均可以显示。

问题原因

百度分享设置属性导致冲突。

解决方案

百度找到的解决方案如下,-->原文链接<--

http://share.baidu.com/code 获取的代码如下:

图标式代码

<div class="bdsharebuttonbox">
  <a href="#" class="bds_more" data-cmd="more"></a>
  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
  <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
  <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};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)];</script>

浮窗式代码

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"0","bdPos":"right","bdTop":"100"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};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)];</script>

更改后的代码,图标式和浮窗式可同时存在

<div class="bdsharebuttonbox">
  <a href="#" class="bds_more" data-cmd="more"></a>
  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
  <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
  <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"0","bdPos":"right","bdTop":"250"},"share":{"bdSize":16},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};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)];</script>

若只使用浮窗式,则不需要以上代码DIV中的内容,只加载script中的内容即可,主要是_bd_share_config添加变量slide的值为{"type":"slide","bdImg":"0","bdPos":"right","bdTop":"250"},具体见上面代码。