新版百度分享自定义图片按钮样式_高仿百度百科分享样式
2015-01-20 13:17:36  By: shinyuu

• shinyuu
• JavaScript教程
• 1
• 5978
• 3

相信很多站点都使用了百度分享、因为使用百度分享有很多好处、比如引入社会流量、收录的优势等等

随着百度分享2.0的升级、同时也推出了专业开发版、可以自定义分享的样式、要分享的平台等等、都是可以自定义的

当然我也使用了百度的分享功能、一开始我是使用的默认的分享样式、不能说丑吧、但总是认为不是很好看、所以就想着怎么美化这个东西

突然有一天我在访问百度百科的时候、觉得那个分享功能非常好看、也就情不自禁的产生了一种想法、怎么样把这个东西搞到我自己的博客里面呢、最后高仿了一个、现在分享给大家、希望大家喜欢、大家可以在旁边看看效果、很炫的有木有

HTML代码

<div id="bdshareside">
<div class="bdsharebuttonbox bds_tools" >
	<div class="shareLogo">分享</div>
	<div class="shareIcon">
	<a href="#" class="bds_tsina" 
		data-cmd="tsina" title="分享到新浪微博"></a>
	<a href="#" class="bds_qzone" 
		data-cmd="qzone" title="分享到QQ空间"></a>
	<a href="#" class="bds_tqq" 
		data-cmd="tqq" title="分享到腾讯微博"></a>
	</div>
	<a href="#" class="bds_more" data-cmd="more"></a>
</div>
</div>

JS代码

<script>
window._bd_share_config={
	"common":{
		"bdSnsKey":{},
		"bdText":"",
		"bdMini":"1",
		"bdMiniList":false,
		"bdPic":"",
		"bdStyle":"1",
		"bdSize":"16",
		"bdPopupOffsetLeft":"-72",
		"bdPopupOffsetTop":"0"
	},
	"share":{},
	"image":{
		"viewList":["qzone","tsina","tqq","renren","weixin"],
		"viewText":"分享到：","viewSize":"16"
	}
};
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>

当然最重要的不是CSS代码了、大家可以在源代码里面下载哈、最后我会分享出来的哈

下面简单的说一下百度分享的好处以及我们普通的站点使用百度分享的优势

1、引入社会化流量

用户将网站内容分享到第三方网站、第三方网站的用户点击专有的分享链接、从第三方网站带来社会化流量

2、提升网页抓取速度

使用了百度分享的网页可以更快地被百度爬虫发现、从而帮助网站的内容更快地被百度抓取

3、展示网页分享量

使用了百度分享的网页被用户分享后、可以使该网页被分享的次数展示在百度的搜索结果页中、辅助用户判断网页质量

4、服务稳定可靠

众多的百度产品已使用百度分享、强大的百度服务器资源提供保障、确保分享服务稳定可靠

5、提供多种风格按钮

提供多种风格的分享按钮、满足不同站长或网站管理员的个性化需求

7、代码加载更快

代码更小、执行更快、让您的网站无后顾之忧！

8、免费查看数据统计

免费为站长或网站管理员提供详尽的分享数据分析、包括网站和网页的分享量、回流量以及最热门的社会化网站排行

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/10ceFs 密码: r1e1

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛