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属性部分),可以查看分享媒体和标识对应表。
我记得你以前的文章下面都有分享按钮,现在好像没了。