分享到xxx
来源百度
一、概述
百度分享代码已升级到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代码中其他部分均可自定义。
四、自定义设置
设置部分结构如下,如不需要某项功能,删除相应的配置项即可。
设置:
4.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偏移量 |
4.2 分享按钮设置
分享按钮设置的值为数组或对象,值为数组时可对多个分享按钮应用不同的设置。
分享按钮设置
- <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 | 样式文件地址 | 自定义样式,引入样式文件 |
4.3 浮窗分享设置
浮窗分享设置的值为数组或对象,值为数组时可在页面显示多个分享浮窗。
浮窗分享设置
- <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.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对应表 |
4.5 划词分享设置
划词分享设置
- <script>
- window._bd_share_config = {
- selectShare : [{
- "bdSelectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'],
- "bdContainerClass" : "容器class名"
- }]
- }
- </script>
图片分享设置项解析:
配置项名称 | 值类型 | 格式和取值 | 描述 |
---|---|---|---|
bdSelectMiniList | array | ['qzone','tsina',...] | 自定义弹出浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表 |
bdContainerClass | string | myclassname | 自定义划词分享的激活区域 |
五、引入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 |
---|---|
印象笔记 | 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 |
邮件分享 | |
我的搜狐 | isohu |
摇篮空间 | yaolan |
若邻网 | wealink |
天涯社区 | ty |
fbook | |
twi | |
复制网址 | copy |
打印 | |
百度中心 | 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')
注意:
您在使用自定义属性,请您将自定义内容里面涉及到英文单引号(')进行(\')转义,以免出现问题
分享到xxx的更多相关文章
- 【C#】【分享】 XXX分钟学会C#
原文地址 https://www.cnblogs.com/younShieh/p/10945264.html 前几天在刷即刻的时候发现了一个GitHub上的项目,该项目名为"lear ...
- Unity接入友盟分享遇到的坑
最近项目接了一下友盟分享的SDK,中间遇到了几个坑,写下几条注意事项记录一下. 接入之前需要准备友盟开发者账号,相应平台开发者账号(微信.QQ.新浪微博)等... 安卓端: 1.确保 AndroidM ...
- 一梦江湖费六年——QQ群聊天分析
本文结构: 一.那些年我们加过的QQ群 二.数据读入和整理(一)--来自蓝翔的挖掘机 二.数据读入和整理(二)--你不知道的事 三.聊天宏观(1)--寤寐思服 三.聊天宏观(2)日月篇 三.聊天宏观( ...
- Django实战-用户注册和登陆系统
1.环境搭建和创建项目 1.环境搭建 每当我们开始一个新项目的时候,通常都会搭建一个全新.独立.隔离的项目环境,这样做的好处自然不必多说.有很多种建立项目虚拟环境的工具,使用比较普遍的是Python中 ...
- Django+bootstrap+注册登录系统
转自:https://www.cnblogs.com/robindong/p/9610057.html Robin_D 博客园 首页 新随笔 联系 订阅 管理 随笔 - 10 文章 - 0 评论 ...
- iOS11最新隐私信息访问列表
今天早上应用出现拍照上传闪退的紧急bug,才发现在iOS11中,隐私权限配置又发生了改变,将原来的相册访问权限分开了,现在有读写两种权限. iOS11访问权限列表 隐私数据 对应key值 提示语 相册 ...
- 小程序分享报错 Cannot read property 'apply' of null;at page XXX onShareAppMessage function
Cannot read property 'apply' of null;at page XXX onShareAppMessage function 然后看了下自己的代码,分享按钮在子组件里, at ...
- Seven xxx in Seven Weeks ebooks | 七周七 xxx 系列图书 电子书| share 分享 | free of charge 免费!
Seven xxx in Seven Weeks ebooks | 七周七 xxx 系列图书 电子书| share 分享 | free of charge 免费! Seven Languag ...
- 【代码分享】用redis+lua实现多个集合取交集并过滤,类似于: select key from set2 where key in (select key from set1) and value>=xxx
redis中的zset结构可以看成一个个包含数值的集合,或者认为是一个关系数据库中用列存储方式存储的一列. 需求 假设我有这样一个数据筛选需求,用SQL表示为: select key from set ...
随机推荐
- wp-postviews使用方法
1.安装 2.头部引用<?php wp_head(); ?> 3.文章调用:<?php if(function_exists('the_views')) { the_views(); ...
- mysql RC下不存在则插入
mysql版本:5.7 目的:在RC下,name列上仅有key索引,并发插入name时不出现重复数据 RC不加gap lock,并且复合select语句是不加锁的快照读,导致两个事务同时进行都可插入, ...
- Hive和SparkSQL: 基于 Hadoop 的数据仓库工具
Hive: 基于 Hadoop 的数据仓库工具 前言 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供完整的 SQL 查询功能,将类 SQL 语句转 ...
- jetty9优化的两处地方
http://www.cnblogs.com/LBSer/p/3637387.html jetty 9两个优化: https://webtide.intalio.com/2013/01/jetty-9 ...
- Java对象的强、软、弱和虚引用+ReferenceQueue
Java对象的强.软.弱和虚引用+ReferenceQueue 一.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象具有强引用,那垃圾回收器绝不会回收它.当内存空间不足 ...
- Codeforces 960G. Bandit Blues
Description 你需要构造一个长度为 \(n\) 的排列 , 使得一个数作为前缀最大值的次数为 \(A\) , 作为后缀最大值的次数为 \(B\) , 求满足要求的排列个数 . 题面 Solu ...
- JBoss 实战(1)
转自:https://www.cnblogs.com/aiwz/p/6154594.html JBOSS的诞生 1998年,在硅谷SUN公司的SAP实验室,一个年轻人正坐在电脑前面思考,然后写着什么东 ...
- babel使用入门以及使用webpack+babel来"编译"你的JS代码
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...
- 使用 RetroShare 分享资源
本文告诉大家如何使用 RetroShare 来分享资源.因为 RetroShare 是一个 p2p 分享的工具,所以他比现在很多云盘都好用,在网上,很多大神说可以用来代替电驴.之所以推荐这个软件,因为 ...
- Echart 改变X轴、Y轴、折线的颜色和数值
在操作E-chart时需要根据需求改变颜色和属性 图1: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu' ...