教你一招，给你的店铺，网站，博客等添加“一键分享”功能

我们今天教你使用js插件实现网站的一键分享功能，简单两行代码，放到你网页中任何位置都行（如果是博客可以在后台添加）。我们采用百度的，比较稳定，而且可以更快的让百度收录我们的页面，在国内能被搜索引擎收录的话好处是不言而喻的。

文章概览：

1. 最简单配置，拿来就用

2. 相信配置解释

看个我自己的网站配置的图吧

先给个最简单配置，拿去你的网页随便放个地方就行。直接能用。就十几行代码，拿去就用，看不懂的我们下边有详细解释。

<%--百度分享插件 开始--%>

<div class="bdsharebuttonbox" data-tag="share_1"></div>

<script>

window._bd_share_config = {

common : {

bdText : '这里放你自定义分享内容',

bdDesc : '这里放你自定义分享摘要',

bdUrl : 这里放你'自定义分享url地址',

bdPic : '这里放自定义分享图片'

},

share : [

{

"bdSize" : 16,

}

],

slide : [

{

bdImg : 2,

bdPos : "right",

bdTop : 100

}

],

}

//以下为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、设置和js加载，示例如下：

<div class="bdsharebuttonbox" data-tag="share_1">

<!-- 此处添加展示按钮 -->

</div>

<script>

window._bd_share_config = {

//此处添加分享具体设置

}

//以下为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>

• 按钮标签代码

<div class="bdsharebuttonbox" data-tag="share_1">

<a class="bds_mshare" data-cmd="mshare"></a>

<a class="bds_qzone" data-cmd="qzone" href="#"></a>

<a class="bds_tsina" data-cmd="tsina"></a>

<a class="bds_baidu" data-cmd="baidu"></a>

<a class="bds_renren" data-cmd="renren"></a>

<a class="bds_tqq" data-cmd="tqq"></a>

<a class="bds_more" data-cmd="more">更多</a>

<a class="bds_count" data-cmd="count"></a>

</div>

说明：

只有普通页面分享需要按钮标签。划词分享、图片分享无需添加HTML结构。

HTML结构可以放在body的任意位置，可复制多份。

class＝"bdsharebuttonbox" 部分为dom选择器，请勿改动。

data-tag属性为分享按钮标识，用于实现同一页面中多分享按钮不同配置

data-cmd属性为分享目标标识，此外值为more时点击展现更多弹窗，值为count时展现分享数。

HTML代码中其他部分均可自定义。

• 设置部分结构如下，如不需要某项功能，删除相应的配置项即可。

<script>

window._bd_share_config = {

common : {

//此处放置通用设置

},

share : [

//此处放置分享按钮设置

],

slide : [

//此处放置浮窗分享设置

],

image : [

//此处放置图片分享设置

],

selectShare : [

//此处放置划词分享设置

]

}

</script>

• 其他具体配置参见百度官网：
  http://share.baidu.com/code/advance非常详细

先说这些吧，不懂得可以留言哈~