转自:http://www.maomao365.com/?p=6965  

一、概述

百度享受代码已升任到二.0,本页将介绍新版百度享受的安装配置格局,请点击左边列表查占星关章节。

摘要:

2、代码结构

享用代码能够分为八个部分: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>

下文将享受二种将字段中null值替换为钦点值的秘技分享,如下所示:
施行环境:sqlserver 二零零六 奥迪Q3二

③、按键标签

开关标签代码

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

四.1 通用设置

通用设置将功用于具备分享类型,可将通用设置放于此处,如分享内容、分享url等。

通用设置

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

通用设置项分析:

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

四.二 分享按键设置

享用开关设置的值为数组或对象,值为数组时可对八个享受按键应用差异的安装。

享用按键设置

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

享受按键配置项分析:

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

四.叁 浮窗分享设置

浮窗分享设置的值为数组或对象,值为数组时可在页面呈现三个享受浮窗。

浮窗分享设置

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

浮窗分享设置项分析:

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

四.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>

图形分享设置项分析:

配置项名称 值类型 格式和取值 描述
tag string 与data-tag一致 表示该配置只会应用于data-tag值一致的图片。如果不设置tag,该配置将应用于所有图片。
viewType string list|collection 图片分享按钮样式。
viewPos string top|bottom 图片分享展示层的位置。
viewColor string black|white 图片分享展示层的背景颜色。
viewSize int 16|24|32 图片分享展示层的图标大小。
viewList array [‘qzone’,’tsina’,…] 自定义展示层中的分享按钮类型和排列顺序。详见分享媒体id对应表

四.5 划词分享设置

 

划词分享设置

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

图表分享设置项分析:

配置项名称 值类型 格式和取值 描述
bdSelectMiniList array [‘qzone’,’tsina’,…] 自定义弹出浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表
bdContainerClass string myclassname 自定义划词分享的激活区域
网站地图xml地图