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

boyanx3周前技术教程6

我们今天教你使用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非常详细

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

标签: share.js

相关文章

Objective-C与JavaScript交互的那些事

最近公司的运营瞎搞了个活动,其活动要服务端提供数据支持,web前端在微信公众账号内作为主要的运营阵地,而iOS、Android要提供相应的入口及页面进行配合。一个活动,动用了各个端的程序猿。而在这里面...

岳西电商产业园店铺“双十一”创佳绩

岳西网讯(通讯员)11月11日,岳西县电商产业园淘宝企业店铺和苏宁易购岳西馆迎来“疯狂”一天,产品销售业绩创新高。 据介绍,苏宁易购岳西馆于11月2号正式上线,截至目前浏览量突破15000,“双十一”...

Proxmox VE安装后的一些优化

经过多方比对 Proxmox VE、VMware、VirtualBox、Hyper-V 等虚拟化平台,最终选定 Proxmox VE 开源虚拟化平台,它不但可以运行虚拟机还支持 LXC 容器,也可以应...

微信小程序原生开发【辅助框架】 LWX

项目介绍作者开发了一年多的小程序,在开发过程中遇到了很多的坑与不方便之处,同时又对原生开发有着一定的执著,但是对于习惯了我这种用惯了vue的人来说,原生小程序中的一些写法确实让人感到难受,我想大家在进...

微信小程序分享功能

由于小程序的分享(微信、头条平台),需要监听页面的onShareAppMessage生命周期,小程序需要在页面声明了此生命周期,点击右上角的"胶囊"才会有分享功能,而一般情况下,我们希...

实战教程:一小时教你开发Chrome插件

我们在使用浏览器的过程中,免不了要用到各种类型的插件,比如要管理你的网站密码,屏蔽页面广告等,正是因为浏览器插件有如此广泛的应用,对于一个Web前端开发工程师来说,掌握Chrome浏览器开发更是必不可...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。