百度分享--分享按钮的实现

    xiaoxiao2023-09-13  150

     百度分享代码: <%@ page contentType="text/html;charset=UTF-8"%><div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a><a href="#"  class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#"  class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#"  class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#"  class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#"  class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#"  class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div><script> window._bd_share_config = {  "common" : {   "bdSnsKey" : {},   "bdText" : "",   "bdMini" : "2",   "bdMiniList" : false,   "bdPic" : "",   "bdStyle" : "0",   "bdSize" : "24"  },  "share" : {} }; with (document)  0[(getElementsByTagName('head')[0] || body)    .appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='    + ~(-new Date() / 36e5)];</script></div> 要注意的是要加上class="bdsharebuttonbox" 属性,class="bds_more" data-cmd="more"这些属性都要加上。 注:只有版本号高于2.0的代码才支持自定义开发,如果您已安装过百度分享,请先检测版本号是否符合,再参考此文档,谢谢。

    一、概述

    百度分享代码已升级到2.0,本页将介绍新版百度分享的安装配置方法,请点击左侧列表查看相关章节。

    二、代码结构

    分享代码可以分为三个部分: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属性为分享目标标识,取值请参见:分享媒体id对应表。此外值为more时点击展现更多弹窗,值为count时展现分享数。

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

    四、自定义设置

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

    设置:

    <script> window._bd_share_config = { common : { //此处放置通用设置 }, share : [ //此处放置分享按钮设置 ], slide : [ //此处放置浮窗分享设置 ], image : [ //此处放置图片分享设置 ], selectShare : [ //此处放置划词分享设置 ] } </script>

    4.1 通用设置

    通用设置将作用于所有分享类型,可将通用设置放于此处,如分享内容、分享url等。

    通用设置

    <script> window._bd_share_config = { common : { bdText : '', bdDesc : '', bdUrl : '', bdPic : '', ... } } </script>

    通用设置项解析:

    配置项名称值类型格式和取值描述bdTextstring自定义分享的内容bdDescstring自定义分享的摘要bdUrlstring自定义分享的Url地址bdPicstring自定义分享的图片bdSignstringon|off|normal是否进行回流统计。'on': 默认值,使用正常方式挂载回流签名(#[数字签名])'off': 关闭数字签名,不统计回流量'normal': 使用&符号连接数字签名,不破坏原始url中的#锚点bdMiniint1|2|3下拉浮层中分享按钮的列数bdMiniListarray['qzone','tsina',...]自定义下拉浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表 onBeforeClickfunctionfunction(cmd,config){}在用户点击分享按钮时执行代码,更改配置。cmd为分享目标id,config为当前设置,返回值为更新后的设置。onAfterClickfunctionfunction(cmd){}在用户点击分享按钮后执行代码,cmd为分享目标id。可用于统计等。bdPopupOffsetLeftint正|负数下拉浮层的y偏移量bdPopupOffsetTopint正|负数下拉浮层的x偏移量

    4.2 分享按钮设置

    分享按钮设置的值为数组或对象,值为数组时可对多个分享按钮应用不同的设置。

    分享按钮设置

    <script> window._bd_share_config = { share : [{ "tag" : "share_1", "bdSize" : 32, ... },{ "tag" : "share_2", "bdSize" : 16, ... }] } </script>

    分享按钮配置项解析:

    配置项名称值类型格式和取值描述tagstring与data-tag一致表示该配置只会应用于data-tag值一致的分享按钮。如果不设置tag,该配置将应用于所有分享按钮。bdSizeint16|24|32分享按钮的尺寸bdCustomStylestring样式文件地址自定义样式,引入样式文件

    4.3 浮窗分享设置

    浮窗分享设置的值为数组或对象,值为数组时可在页面显示多个分享浮窗。

    浮窗分享设置

    <script> window._bd_share_config = { slide : [{ bdImg : 0, bdPos : "right", bdTop : 100 },{ bdImg : 0, bdPos : "left", bdTop : 100 }] } </script>

    浮窗分享设置项解析:

    配置项名称值类型格式和取值描述bdImgstring0|1|2|3|4|5|6|7|8分享浮窗图标的颜色。bdPosstringleft|right分享浮窗的位置bdTopint 分享浮窗与可是区域顶部的距离(px)

    4.4 图片分享设置

    图片分享设置的值为数组或对象,值为数组时可对图片应用不同的设置。

    图片分享设置

    <script> window._bd_share_config = { image : [{ "tag" : "img_1", viewType : 'list', viewPos : 'top', viewColor : 'black', viewSize : '16', viewList : ['qzone','tsina','huaban','tqq','renren'] },{ "tag" : "img_2", viewType : 'list', viewPos : 'top', viewColor : 'black', viewSize : '16', viewList : ['qzone','tsina','huaban','tqq','renren'] }] } </script>

    图片分享设置项解析:

    配置项名称值类型格式和取值描述tagstring与data-tag一致表示该配置只会应用于data-tag值一致的图片。如果不设置tag,该配置将应用于所有图片。viewTypestringlist|collection图片分享按钮样式。viewPosstringtop|bottom图片分享展示层的位置。viewColorstringblack|white图片分享展示层的背景颜色。viewSizeint16|24|32图片分享展示层的图标大小。viewListarray['qzone','tsina',...]自定义展示层中的分享按钮类型和排列顺序。详见分享媒体id对应表

    4.5 划词分享设置

    划词分享设置

    <script> window._bd_share_config = { selectShare : [{ "bdSelectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'], "bdContainerClass" : "容器class名" }] } </script>

    图片分享设置项解析:

    配置项名称值类型格式和取值描述bdSelectMiniListarray['qzone','tsina',...]自定义弹出浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表 bdContainerClassstringmyclassname自定义划词分享的激活区域

    五、引入javascript

    加载js

    <script> 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>

    说明:

    请将代码放于</body>之前。

    六、完整示例代码

    完整代码如下,请根据自身情况修改。

    完整示例代码

    <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> <script> window._bd_share_config = { common : { bdText : '自定义分享内容', bdDesc : '自定义分享摘要', bdUrl : '自定义分享url地址', bdPic : '自定义分享图片' }, share : [{ "bdSize" : 16 }], slide : [{ bdImg : 0, bdPos : "right", bdTop : 100 }], image : [{ viewType : 'list', viewPos : 'top', viewColor : 'black', viewSize : '16', viewList : ['qzone','tsina','huaban','tqq','renren'] }], selectShare : [{ "bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'] }] } 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>

    七、分享媒体id对应表

    分享媒体id对应表

    名称ID一键分享mshareQQ空间qzone新浪微博tsina人人网renren腾讯微博tqq百度相册bdxc开心网kaixin001腾讯朋友tqf百度贴吧tieba豆瓣网douban搜狐微博tsohu百度新首页bdhomeQQ好友sqq和讯微博thx百度云收藏bdysc美丽说meilishuo蘑菇街mogujie点点网diandian花瓣huaban堆糖duitang和讯hx飞信fx有道云笔记youdao麦库记事sdo轻笔记qingbiji人民微博people新华微博xinhua邮件分享mail我的搜狐isohu摇篮空间yaolan若邻网wealink天涯社区tyFacebookfbookTwittertwilinkedinlinkedin复制网址copy打印print百度个人中心ibaidu微信weixin股吧iguba

    八、工具

    检测分享代码版本

    //打开已安装分享代码的页面,在控制台中执行: javascript:b=(window.bdShare||window._bd_share_main);alert(b?'\u5F53\u524D\u9875\u9762\u7684\u5206\u4EAB\u4EE3\u7801\u7248\u672C\u4E3A\uFF1A'+(b.version||'1.0'):'\u5F53\u524D\u9875\u9762\u6CA1\u6709\u5B89\u88C5\u5206\u4EAB\u4EE3\u7801\u3002')

    注意:

    您在使用自定义属性,请您将自定义内容里面涉及到英文单引号(')进行(\')转义,以免出现问题

     相关资源:百度一键分享js
    最新回复(0)