一键分享代码

 

  文章出处:http://share.baidu.com/code/advance

 

一、概述

百度分享代码已升级到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
印象笔记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
Facebookfbook
Twittertwi
linkedinlinkedin
复制网址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')

转载于:https://www.cnblogs.com/zhuyuchao/p/6132870.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu安装LDAP

参考文献&#xff1a; https://help.ubuntu.com/12.04/serverguide/openldap-server.html&#xff08;最主要的&#xff09; http://www.linuxidc.com/Linux/2011-08/40020.htm http://blog.chinaunix.net/uid-24276740-id-3360306.html 前言 在网上搜索ldap的安装配置&#xf…

58.贪心算法练习:  最小新整数

总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个十进制正整数n(0 < n < 1000000000)&#xff0c;每个数位上数字均不为0。n的位数为m。现在从m位中删除k位(0< m)&#xff0c;求生成的新整数最小为多少&#xff1f;例如: n 9128456, k 2, 则生成的新整数最小…

ABB机器人之LOADDATA

ABB机器人之LOADDATA loaddata是用来描述连接到机器人机械接口的负载&#xff08;机器人的安装法兰&#xff09;。loaddata数据通常定义有效载荷或负荷&#xff08;通过指令gripload设置机器人抓手负载 或mechunitload指令设置变位机负载。loaddata通常也作为tooldata的一部分&…

【深度学习】——性能指标(ROC、MAP、AUC等)

目录 一、分类任务性能指标 1、混淆矩阵 2、精确度ACCURACY 正确数/总数 3、查全率&#xff08;RECALL&#xff09;——真正正样本中预测正确的比例 4、查准率&#xff08;precision&#xff09;——预测为正样本中的预测正确的比例 5、F-score——对查准率和查全率进行结…

【深度学习】——过拟合的处理方法

目录 一、什么是过拟合&#xff1f;&#xff08;overfitting&#xff09; 二、过拟合的表现&#xff08;判定方法&#xff09; 训练集、测试集、验证集区别 测试集与验证集的区别 三、产生过拟合的原因 1、样本方面 2、模型方面 四、避免过拟合的方法 1、样本方面 1&…

ASP.NET页面的字符编码设置

在用ASP.NET写网上支付的接口程序时&#xff0c;遇到一个奇怪问题&#xff0c;通过表单提交过去的中文全是乱码&#xff0c;英文正常。而用asp程序进行测试&#xff0c;可以正常提交中文&#xff0c;asp页面中有这样的HTML代码&#xff1a; <meta http-equiv"Content-T…

帝人製机--适合的机遇--遇到恰到好处的产品--工业机器人减速机造就一个百年企业

持之以恒是成功的必要条件&#xff0c;但是也要有恰当的土壤。日本Nabtesco(纳博特斯克)旧名&#xff1a;帝人製机(TEIJINSEIKI)高性能日本RV减速机纳博特斯克(Nabtesco)公司是一家居世界领先地位的精密传动控制系统及组件製造商。目前全世界已有超过两百万件由Nabtesco製造的精…

Python个人项目--豆瓣图书个性化推荐

项目名称: 豆瓣图书个性化推荐 需求简述&#xff1a;从给定的豆瓣用户名中&#xff0c;获取该用户所有豆瓣好友列表&#xff0c;从豆瓣好友中找出他们读过的且评分5星的图书&#xff0c;如果同一本书被不同的好友评5星&#xff0c;评分人数越多推荐度越高。 输入&#xff1a;豆…

#define宏定义形式的函数导致的bug

定义了一个宏定义形式的"函数": #define SUM8(YY)\ {\ int Y YY>>2;\ ...\ } 然后使用的时候&#xff0c;传入了一个同名的变量Y: int Y Ywin[x]; SUM8(Y) 本意是想展开成int Y Ywin[x]>>2; 但实际上#define只是把参数名(YY)替换&#xff0c;与函数…

【深度学习】——BN层(batch normalization)

目录 一、“Internal Covariate Shift”问题 二、BatchNorm的本质思想 两个参数r和β的意义——精髓所在 三、训练阶段如何做BatchNorm 四、BatchNorm的推理(Inference)过程 五、BatchNorm的好处 一般使用在卷积层后、激活层前 Batch Normalization作为最近一年来DL的重要…

打印池

餐饮行业&#xff0c;打印池是必要的部件。 实现原理&#xff1a;每一台打印机都有自己的任务队列和处理任务队列的线程。 unit untPrintTask; interface uses System.SysUtils, System.Classes, Datasnap.DBClient, frxclass, System.Generics.Collections; type TBillContent…

JAXB vs XStream

2019独角兽企业重金招聘Python工程师标准>>> JAXB vs XStream 博客分类&#xff1a; java JAXB vs XStream 这两东东本质上是有差别的&#xff0c;JAXB称为OX binding工具&#xff0c;XStream应该算序列化工具&#xff0c;但OX binding工具也会marshall和unmarsha…

ABB 机器人 DRVIO_1通信报警

ABB 机器人DRVIO_1通信报警 2014.06.13 ABB1600弧焊机器人&#xff0c;从A地搬运到B地&#xff0c;到达B地后&#xff0c;机器人上电&#xff0c;报DRVIO_1通信故障&#xff0c;机器人进入故障停止模式。 DRVIO_1为LOCAL_GENERIC类型的ABB内部LOCAL总线类型的单元实例。 故障…

S2SH CRUD 整合

S2SH CRUD 整合 采用的框架 Struts2Spring4Hbiernate4. 目录结构 &#xff1a; EmployeeAction: 1 package com.xx.ssh.actions;2 3 import java.io.ByteArrayInputStream;4 import java.io.InputStream;5 import java.io.UnsupportedEncodingException;6 import java.util.…

ABB 机器人 添加多任务

首先&#xff0c;需要启用多任务选项的控制器。 要做到这一点&#xff0c;创建一个新的机器人控制器RobotStudio站 - >选择机器人&#xff08;控制器菜单&#xff09; - >.................. - >系统生成器 - >选择控制器 - >修改...下一页 - >下一步 - >…

poj2594(二分图,最小路径覆盖变形)

Treasure ExplorationTime Limit: 6000MS Memory Limit: 65536KTotal Submissions: 7611 Accepted: 3126Description Have you ever read any book about treasure exploration? Have you ever see any film about treasure exploration? Have you ever explored treasure? …

【机器视觉】——相机镜头篇

目录 一、相关概念 1、相机 2、镜头 二、相关参数 1、相机参数 1)芯片尺寸

闭包(计算机科学)

在计算机科学中&#xff0c;闭包&#xff08;Closure&#xff09;又称词法闭包或函数闭包。是引用了自由变量的函数。这个被引用的自由变量将会和函数在一起。即使离开了创建它的环境也不例外。所以另一种关于闭包的说法&#xff1a;由函数和其引用相关的环境构成的实体。闭包在…

C语言小机器人

[cpp] view plaincopyprint? # include <stdio.h> # include <stdlib.h> # define MAXSTR 200 # define REBOT "小C说: " # define YOUR "您 说: " # define EXIT "-e\n" # define NOREPLY "我不知道你说什么呢…

分享12306抢票心得-终极秒杀思路篇

12306抢票的关键拼的就是整点出票的速度&#xff0c;快的几秒钟&#xff0c;慢的几分钟&#xff0c;本文提供终极抢票攻略&#xff0c;通过多线程扫描上万个CDN&#xff0c;来大幅度提升出票速度。准备一&#xff1a;需要了解CDN和切站的机制&#xff0c;请参考&#xff1a;分享…