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



百度分享代码：

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

要注意的是要加上class="bdsharebuttonbox" 属性，class="bds_more" data-cmd="more"这些属性都要加上。

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

分享代码可以分为三个部分：html、设置和js加载，示例如下：

代码结构如下：

按钮标签代码

说明：

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

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

class＝"bdsharebuttonbox" 部分为dom选择器，请勿改动。

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

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

设置：

4.1 通用设置

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

通用设置

通用设置项解析：

配置项名称

值类型

格式和取值

描述

bdtext

string

自定义

分享的内容

bddesc

分享的摘要

bdurl

分享的url地址

bdpic

分享的图片

bdsign

on｜off｜normal

是否进行回流统计。

'on': 默认值，使用正常方式挂载回流签名（#[数字签名]）

'off': 关闭数字签名，不统计回流量

'normal': 使用&符号连接数字签名，不破坏原始url中的#锚点

bdmini

int

1｜2｜3

下拉浮层中分享按钮的列数

bdminilist

array

['qzone','tsina',...]

onbeforeclick

function

function(cmd,config){}

在用户点击分享按钮时执行代码，更改配置。

cmd为分享目标id，config为当前设置，返回值为更新后的设置。

onafterclick

function(cmd){}

在用户点击分享按钮后执行代码，cmd为分享目标id。可用于统计等。

bdpopupoffsetleft

正｜负数

下拉浮层的y偏移量

bdpopupoffsettop

下拉浮层的x偏移量

4.2 分享按钮设置

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

分享按钮设置

分享按钮配置项解析：

tag

与data-tag一致

表示该配置只会应用于data-tag值一致的分享按钮。

如果不设置tag，该配置将应用于所有分享按钮。

bdsize

16｜24｜32

分享按钮的尺寸

bdcustomstyle

样式文件地址

自定义样式，引入样式文件

4.3 浮窗分享设置

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

浮窗分享设置

浮窗分享设置项解析：

bdimg

0｜1｜2｜3｜4｜5｜6｜7｜8

分享浮窗图标的颜色。

bdpos

left｜right

分享浮窗的位置

bdtop

分享浮窗与可是区域顶部的距离(px)

4.4 图片分享设置

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

图片分享设置

图片分享设置项解析：

表示该配置只会应用于data-tag值一致的图片。如果不设置tag，该配置将应用于所有图片。

viewtype

list｜collection

图片分享按钮样式。

viewpos

top｜bottom

图片分享展示层的位置。

viewcolor

black｜white

图片分享展示层的背景颜色。

viewsize

图片分享展示层的图标大小。

viewlist

4.5 划词分享设置

划词分享设置

bdselectminilist

bdcontainerclass

myclassname

自定义划词分享的激活区域

加载js

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

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

完整示例代码

分享媒体id对应表

名称

id

一键分享

mshare

qq空间

qzone

新浪微博

tsina

人人网

renren

腾讯微博

tqq

百度相册

bdxc

开心网

kaixin001

腾讯朋友

tqf

百度贴吧

tieba

豆瓣网

douban

搜狐微博

tsohu

百度新首页

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

复制网址

copy

打印

print

百度个人中心

ibaidu

微信

weixin

股吧

iguba

检测分享代码版本

注意：

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