来源百度

一、概述

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

二、代码结构

分享代码可以分为三个部分:HTML、设置和js加载,示例如下:

代码结构如下:

  1. <div class="bdsharebuttonbox" data-tag="share_1">
  2. <!-- 此处添加展示按钮 -->
  3. </div>
  4. <script>
  5. window._bd_share_config = {
  6. //此处添加分享具体设置
  7. }
  8.  
  9. //以下为js加载部分
  10. 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)];
  11. </script>

三、按钮标签

按钮标签代码

  1. <div class="bdsharebuttonbox" data-tag="share_1">
  2. <a class="bds_mshare" data-cmd="mshare"></a>
  3. <a class="bds_qzone" data-cmd="qzone" href="#"></a>
  4. <a class="bds_tsina" data-cmd="tsina"></a>
  5. <a class="bds_baidu" data-cmd="baidu"></a>
  6. <a class="bds_renren" data-cmd="renren"></a>
  7. <a class="bds_tqq" data-cmd="tqq"></a>
  8. <a class="bds_more" data-cmd="more">更多</a>
  9. <a class="bds_count" data-cmd="count"></a>
  10. </div>

说明:

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

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

class="bdsharebuttonbox" 部分为dom选择器,请勿改动。

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

data-cmd属性为分享目标标识,取值请参见:分享媒体id对应表。此外值为more时点击展现更多弹窗,值为count时展现分享数。

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

四、自定义设置

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

设置:

  1. <script>
  2. window._bd_share_config = {
  3. common : {
  4. //此处放置通用设置
  5. },
  6. share : [
  7. //此处放置分享按钮设置
  8. ],
  9. slide : [
  10. //此处放置浮窗分享设置
  11. ],
  12. image : [
  13. //此处放置图片分享设置
  14. ],
  15. selectShare : [
  16. //此处放置划词分享设置
  17. ]
  18. }
  19. </script>

4.1 通用设置

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

通用设置

  1. <script>
  2. window._bd_share_config = {
  3. common : {
  4. bdText : '',
  5. bdDesc : '',
  6. bdUrl : '',
  7. bdPic : '',
  8. ...
  9. }
  10. }
  11. </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偏移量

4.2 分享按钮设置

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

分享按钮设置

  1. <script>
  2. window._bd_share_config = {
  3. share : [{
  4. "tag" : "share_1",
  5. "bdSize" : 32,
  6. ...
  7. },{
  8. "tag" : "share_2",
  9. "bdSize" : 16,
  10. ...
  11. }]
  12. }
  13. </script>

分享按钮配置项解析:

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

4.3 浮窗分享设置

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

浮窗分享设置

  1. <script>
  2. window._bd_share_config = {
  3. slide : [{
  4. bdImg : 0,
  5. bdPos : "right",
  6. bdTop : 100
  7. },{
  8. bdImg : 0,
  9. bdPos : "left",
  10. bdTop : 100
  11. }]
  12. }
  13. </script>

浮窗分享设置项解析:

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

4.4 图片分享设置

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

图片分享设置

  1. <script>
  2. window._bd_share_config = {
  3. image : [{
  4. "tag" : "img_1",
  5. viewType : 'list',
  6. viewPos : 'top',
  7. viewColor : 'black',
  8. viewSize : '16',
  9. viewList : ['qzone','tsina','huaban','tqq','renren']
  10. },{
  11. "tag" : "img_2",
  12. viewType : 'list',
  13. viewPos : 'top',
  14. viewColor : 'black',
  15. viewSize : '16',
  16. viewList : ['qzone','tsina','huaban','tqq','renren']
  17. }]
  18. }
  19. </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对应表

4.5 划词分享设置

划词分享设置

  1. <script>
  2. window._bd_share_config = {
  3. selectShare : [{
  4. "bdSelectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'],
  5. "bdContainerClass" : "容器class名"
  6. }]
  7. }
  8. </script>

图片分享设置项解析:

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

五、引入javascript

加载js

  1. <script>
  2. 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)];
  3. </script>

说明:

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

六、完整示例代码

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

完整示例代码

  1. <div class="bdsharebuttonbox" data-tag="share_1">
  2. <a class="bds_mshare" data-cmd="mshare"></a>
  3. <a class="bds_qzone" data-cmd="qzone" href="#"></a>
  4. <a class="bds_tsina" data-cmd="tsina"></a>
  5. <a class="bds_baidu" data-cmd="baidu"></a>
  6. <a class="bds_renren" data-cmd="renren"></a>
  7. <a class="bds_tqq" data-cmd="tqq"></a>
  8. <a class="bds_more" data-cmd="more">更多</a>
  9. <a class="bds_count" data-cmd="count"></a>
  10. </div>
  11. <script>
  12. window._bd_share_config = {
  13. common : {
  14. bdText : '自定义分享内容',
  15. bdDesc : '自定义分享摘要',
  16. bdUrl : '自定义分享url地址',
  17. bdPic : '自定义分享图片'
  18. },
  19. share : [{
  20. "bdSize" : 16
  21. }],
  22. slide : [{
  23. bdImg : 0,
  24. bdPos : "right",
  25. bdTop : 100
  26. }],
  27. image : [{
  28. viewType : 'list',
  29. viewPos : 'top',
  30. viewColor : 'black',
  31. viewSize : '16',
  32. viewList : ['qzone','tsina','huaban','tqq','renren']
  33. }],
  34. selectShare : [{
  35. "bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']
  36. }]
  37. }
  38. 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)];
  39. </script>

七、分享媒体id对应表

分享媒体id对应表

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

八、工具

检测分享代码版本

  1. //打开已安装分享代码的页面,在控制台中执行:
  2. 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')

注意:

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

分享到xxx的更多相关文章

  1. 【C#】【分享】 XXX分钟学会C#

    原文地址 https://www.cnblogs.com/younShieh/p/10945264.html     前几天在刷即刻的时候发现了一个GitHub上的项目,该项目名为"lear ...

  2. Unity接入友盟分享遇到的坑

    最近项目接了一下友盟分享的SDK,中间遇到了几个坑,写下几条注意事项记录一下. 接入之前需要准备友盟开发者账号,相应平台开发者账号(微信.QQ.新浪微博)等... 安卓端: 1.确保 AndroidM ...

  3. 一梦江湖费六年——QQ群聊天分析

    本文结构: 一.那些年我们加过的QQ群 二.数据读入和整理(一)--来自蓝翔的挖掘机 二.数据读入和整理(二)--你不知道的事 三.聊天宏观(1)--寤寐思服 三.聊天宏观(2)日月篇 三.聊天宏观( ...

  4. Django实战-用户注册和登陆系统

    1.环境搭建和创建项目 1.环境搭建 每当我们开始一个新项目的时候,通常都会搭建一个全新.独立.隔离的项目环境,这样做的好处自然不必多说.有很多种建立项目虚拟环境的工具,使用比较普遍的是Python中 ...

  5. Django+bootstrap+注册登录系统

    转自:https://www.cnblogs.com/robindong/p/9610057.html Robin_D 博客园 首页 新随笔 联系 订阅 管理 随笔 - 10  文章 - 0  评论 ...

  6. iOS11最新隐私信息访问列表

    今天早上应用出现拍照上传闪退的紧急bug,才发现在iOS11中,隐私权限配置又发生了改变,将原来的相册访问权限分开了,现在有读写两种权限. iOS11访问权限列表 隐私数据 对应key值 提示语 相册 ...

  7. 小程序分享报错 Cannot read property 'apply' of null;at page XXX onShareAppMessage function

    Cannot read property 'apply' of null;at page XXX onShareAppMessage function 然后看了下自己的代码,分享按钮在子组件里, at ...

  8. Seven xxx in Seven Weeks ebooks | 七周七 xxx 系列图书 电子书| share 分享 | free of charge 免费!

    Seven xxx  in Seven Weeks ebooks |  七周七 xxx 系列图书  电子书| share  分享 | free of charge  免费! Seven Languag ...

  9. 【代码分享】用redis+lua实现多个集合取交集并过滤,类似于: select key from set2 where key in (select key from set1) and value>=xxx

    redis中的zset结构可以看成一个个包含数值的集合,或者认为是一个关系数据库中用列存储方式存储的一列. 需求 假设我有这样一个数据筛选需求,用SQL表示为: select key from set ...

随机推荐

  1. wp-postviews使用方法

    1.安装 2.头部引用<?php wp_head(); ?> 3.文章调用:<?php if(function_exists('the_views')) { the_views(); ...

  2. mysql RC下不存在则插入

    mysql版本:5.7 目的:在RC下,name列上仅有key索引,并发插入name时不出现重复数据 RC不加gap lock,并且复合select语句是不加锁的快照读,导致两个事务同时进行都可插入, ...

  3. Hive和SparkSQL: 基于 Hadoop 的数据仓库工具

    Hive: 基于 Hadoop 的数据仓库工具 前言 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供完整的 SQL 查询功能,将类 SQL 语句转 ...

  4. jetty9优化的两处地方

    http://www.cnblogs.com/LBSer/p/3637387.html jetty 9两个优化: https://webtide.intalio.com/2013/01/jetty-9 ...

  5. Java对象的强、软、弱和虚引用+ReferenceQueue

    Java对象的强.软.弱和虚引用+ReferenceQueue 一.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象具有强引用,那垃圾回收器绝不会回收它.当内存空间不足 ...

  6. Codeforces 960G. Bandit Blues

    Description 你需要构造一个长度为 \(n\) 的排列 , 使得一个数作为前缀最大值的次数为 \(A\) , 作为后缀最大值的次数为 \(B\) , 求满足要求的排列个数 . 题面 Solu ...

  7. JBoss 实战(1)

    转自:https://www.cnblogs.com/aiwz/p/6154594.html JBOSS的诞生 1998年,在硅谷SUN公司的SAP实验室,一个年轻人正坐在电脑前面思考,然后写着什么东 ...

  8. babel使用入门以及使用webpack+babel来"编译"你的JS代码

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...

  9. 使用 RetroShare 分享资源

    本文告诉大家如何使用 RetroShare 来分享资源.因为 RetroShare 是一个 p2p 分享的工具,所以他比现在很多云盘都好用,在网上,很多大神说可以用来代替电驴.之所以推荐这个软件,因为 ...

  10. Echart 改变X轴、Y轴、折线的颜色和数值

    在操作E-chart时需要根据需求改变颜色和属性 图1: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu' ...