saber 酱的抱枕

Fly me to the moon

11/14
2016
学习

在网页上添加百度分享功能

在网页上添加百度分享功能

如图,网站排版时做了分享按钮(图片、样式都是已经写好了的),之后需要加上功能,那我们使用百度分享的话应该怎么做呢?

首先可以参考百度的官方说明文档。这个文档也很好理解,只是在“自定义设置”部分容易让人迷糊。

其实像上图这样最简单、最常用的分享方式,不需要去管那么多设置项。以下是最小化的实现代码:

<div class="bdsharebuttonbox" data-tag="share_1">
	<a class="tsina" data-cmd="tsina"></a>
	<a class="tqq" data-cmd="tqq"></a>
	<a class="sqq" data-cmd="sqq"></a>
	<a class="renren" data-cmd="renren"></a>
</div>
<script>
	// 百度分享按钮设置
	window._bd_share_config = {
		"share": {} //如果样式已经自己写好了,那么只需要这一句即可
	}
	//加载百度分享js文件
	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)];
</script>

html部分,外层容器的class="bdsharebuttonbox"是必须的。如果你页面上只有这一个分享区域,那么可以去掉data-tag="share_1"。
分享按钮必须是a标签,不然功能不会生效。
a标签的class属性不是必须的,可以不加或者设置成不同的。如果设置成百度分享允许的class的话,这个按钮会被自动加上一些样式。
a标签的data-cmd属性是必须的,它表示点击这个按钮后是要分享到哪里去。另外有了data-cmd属性后,这个a标签还会被自动加上title属性,如 title="分享到新浪微博" 。

剩下的是JavaScript部分,分享按钮设置里面只用写一句就行了(当然也可以按需要增加更多的设置)。底下“加载百度分享js文件”无需改动。

做完之后,分享按钮的功能就已经加上了。

ps:如果想知道自己分享的目标的代号是什么(a标签的data-cmd属性部分),可以查看分享媒体和标识对应表

在网页上添加百度分享功能