教你一招,给你的店铺,网站,博客等添加“一键分享”功能
我们今天教你使用js插件实现网站的一键分享功能,简单两行代码,放到你网页中任何位置都行(如果是博客可以在后台添加)。我们采用百度的,比较稳定,而且可以更快的让百度收录我们的页面,在国内能被搜索引擎收录的话好处是不言而喻的。
文章概览:
最简单配置,拿来就用
相信配置解释
看个我自己的网站配置的图吧
先给个最简单配置,拿去你的网页随便放个地方就行。直接能用。就十几行代码,拿去就用,看不懂的我们下边有详细解释。
<%--百度分享插件 开始--%>
<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非常详细
先说这些吧,不懂得可以留言哈~