DIY百度分享样式

2
2854

之前百度分享按钮刚上线的时候立马就用在博客上了,昨天进入百度分享,看看百度的分享情况,发现已经有新的版本了。较之前的版本,新的版本增加了划词分享和图片分享两大功能,去掉的一个功能是分享次数统计的按钮,个人感觉那个显示的分享次数对于访客来说挺管用的,如同文章的评论次数一样。

同之前的版本一样,个人不喜欢百度分享按钮中的那个更多,原因是常用分享的平台就那么几个,更多的显示那些不常用的平台是没意义的,如果文章确实受访客的喜欢,访客直接会把文章的URL直接复制到其他的平台。因此,去掉那个更多对于我来说是必要的,要去掉分享中更多的那个加号小图标,直接在CSS中增加如下:

1
.bds_more {display:none;}

用css直接设置更多分享按钮为不显示,之前的版本我也是这么做的。因为现在增加的划词分享和图片分享,默认在最后增加上“更多”这个按钮,无法直接去除,而对于文章中显示的分享按钮,可直接将data-cmd=”more”的超链接去掉,就不显示了。
本文转自http://onedou.com[OneDou Blog] 声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0共享协议. 转载请注明http://onedou.com/[OneDou Blog]

另外就是稍微调一下显示的样式,css如下:

1
2
3
.bdselect_share_partners { margin-left: 10px; } //对于划词分享在7个按钮的情况下,居中显示,建议划词分享采用7个按钮
.bdsharesingle {width:455px;margin:10px auto;} //自己增加的规则,用来居中文章分享按钮
.bdsharebuttonbox span { float:left;font-size:25px; padding-top:8px; } //在图标样式下自己的增加的文字的样式

我的百度分享JS:

1
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{},"image":{"viewList":["weixin","tsina","tqq","renren","douban","qzone"],"viewText":"分享到:","viewSize":"32"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","tsina","tqq","renren","douban","qzone","hi"]}};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>

我的文章分享按钮HTML:

1
2
<div class="bdsharebuttonbox bdsharesingle"><span>分享文章到:</span><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></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_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_hi" data-cmd="hi" title="分享到百度空间"></a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a><a href="#" class="bds_print" data-cmd="print" title="打印本页"></a>
   </div>

三个分享的样式如下:
百度分享DIY样式

另外百度分享2.0较之前的版本,可以让用户有更多的DIY空间,可以参见:百度分享2.0专业开发版

2 评论

  1. 今天群里还有人问百度分享的问题。
    默认百度分享到新浪微博,尾巴是百度分享。但可以自定义,加一个key的参数,可以提供你自己的尾巴,这个挺好的

发表回复

× 4 = 20