个性化百度分享按钮

评论(1)

现在网上林林总总的,
自动的、非自动的、有接口的、没有接口的分享按钮有很多,
很多按钮也都提供了自定义的分享按钮输出,
当然作为国内知名的百度分享按钮在很大程度上也给了我们大家个性化的空间。
比如仔细阅读以下百度分享按钮的自定义参数,我们会很容易的将自己的分享按钮自定义一下。
前一阵子因为仿IPC主题,间接地看了一下百度分享按钮的自定义的帮助,
因为自己确实没有什么要自定义按钮的需求所以也就简单的了解了一下。
因为最近这阵子,大段的空闲时间比较少,小段的空闲比较多,
所以偶尔有点闲心就研究一些浅显的东西。就像今天百度分享按钮。

如何定制自己的分享按钮样式

很简单,现在网上有好多网站的分享按钮很漂亮,
如果对方用的是百度分享的话,那就很简单了,直接偷瞄代码,改成自己的ID就可以了,
如果对方用的不是百度分享的话,那就要费一点功夫了。
思路上来讲,我们需要用到 图片素材、css样式以及html代码。
下面两张图片是我前阵子从网上顺的,感觉不错的分享按钮的图片。
分享图标-蓝色
分享图标
如何将之为我所用呢?
下面我们将会以以上两张图片为例,创建两个自定义分享按钮。
请往下看:

自定义分享按钮的HTML部分

<div id="test1">
	<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
        <a class="bds_tsina"></a>
        <a class="bds_t163"></a>
        <a class="bds_renren"></a>
        <a class="bds_qzone"></a>
        <a class="bds_kaixin001"></a>
        <a class="bds_tqq"></a>
        <a class="bds_douban"></a>
	</div>
</div>
<div id="test2">
	<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
        <a class="bds_tsina"></a>
        <a class="bds_t163"></a>
        <a class="bds_renren"></a>
        <a class="bds_qzone"></a>
        <a class="bds_kaixin001"></a>
        <a class="bds_tqq"></a>
        <a class="bds_douban"></a>
	</div>
</div>
//注意,uid=701107",这里要换成你的ID值,不然分享就分享到我那里去咯。
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=701107" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
	document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>

自定义分享按钮的CSS部分

#test1 #bdshare a{
	background: url(ico_x100_weibo.png) no-repeat scroll 0 0 transparent;
	margin-right:10px;
	min-height: 20px;
	min-width:22px;
	display:block;
	float:left;
	padding:0
}
#test1 #bdshare{
	background: url(ico_x100_weibo.png) repeat-x scroll 0 -178px transparent;
	display: block;
    float: left;
    padding-bottom: 2px;
    text-align: left !important;
    z-index: 999999;
}
#test1 #bdshare .bds_tsina{
	background-position:-25px -25px !important;
}
#test1 #bdshare .bds_t163{
	background-position:-25px 0 !important;
}
#test1 #bdshare .bds_renren{
	background-position:-26px -53px !important;
}
#test1 #bdshare .bds_qzone{
	background-position:-25px -79px !important;
}
#test1 #bdshare .bds_kaixin001{
	background-position:-25px -106px  !important;
}
#test1 #bdshare .bds_tqq{
	background-position:-25px -132px !important;
}
#test1 #bdshare .bds_douban{
	background-position:-25px -159px !important;
}
 
 
#test1 #bdshare a.bds_tsina:hover{
	background-position:2px -25px !important;
}
#test1 #bdshare a.bds_t163:hover{
	background-position:5px 0 !important;
}
#test1 #bdshare a.bds_renren:hover{
	background-position:2px -53px !important;
}
#test1 #bdshare a.bds_qzone:hover{
	background-position:2px -80px !important;
}
#test1 #bdshare a.bds_kaixin001:hover{
	background-position:2px -106px !important;
}
#test1 #bdshare a.bds_tqq:hover{
	background-position:3px -132px !important;
}
#test1 #bdshare a.bds_douban:hover{
	background-position:4px -159px !important;
}
 
 
 
 
#test2 #bdshare a{
	background: url(ico_blue_weibo2.png) no-repeat scroll 0 0 transparent;
	margin-right:10px;
	min-height: 20px;
	min-width:22px;
	display:block;
	float:left;
	padding:0
}
#test2 #bdshare .bds_tsina{
	background-position:0 0 !important;
}
#test2 #bdshare .bds_t163{
	background-position:-25px 0 !important;
}
#test2 #bdshare .bds_renren{
	background-position:-55px 0 !important;
}
#test2 #bdshare .bds_qzone{
	background-position:-87px 0 !important;
}
#test2 #bdshare .bds_kaixin001{
	background-position:-115px 0 !important;
}
#test2 #bdshare .bds_tqq{
	background-position:-145px 0 !important;
}
#test2 #bdshare .bds_douban{
	background-position:-175px 0 !important;
}
 
#test2 #bdshare a.bds_tsina:hover{
	background-position:0 -24px !important;
}
#test2 #bdshare a.bds_t163:hover{
	background-position:-25px -24px !important;
}
#test2 #bdshare a.bds_renren:hover{
	background-position:-55px -24px !important;
}
#test2 #bdshare a.bds_qzone:hover{
	background-position:-87px -24px !important;
}
#test2 #bdshare a.bds_kaixin001:hover{
	background-position:-115px -24px !important;
}
#test2 #bdshare a.bds_tqq:hover{
	background-position:-145px -24px !important;
}
#test2 #bdshare a.bds_douban:hover{
	background-position:-175px -24px !important;
}

自定义分享按钮演示

百度自定义按钮样式1

百度自定义按钮样式2




当然,这里还有一个更纯洁、更简单、更直接的演示

总结、原理

看够了千篇一律的分享按钮,又不想把所有社交网站的分享接口都看一遍,
有时候借助一些聚合分享网站的自定义接口可以达到我们意想不到的效果。
原理其实很简单,我们在这里只是强制覆盖了百度分享按钮的一些默认样式,
并利用百度分享按钮的自定义接口来设定我们想要的分享按钮,具体的设置方法这里就不多说了,
有兴趣的同学可以去看一下百度分享按钮自定义接口的帮助
当然里面还有更多的其他内容,有功夫的话我会一一写到。





转载请注明转自: 个性化百度分享按钮

  1. 看起来很好看,但是对于没有代码能力的人来说,实在有点难啊~