百度分享--分享按鈕的實作



百度分享代碼：

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

檢測分享代碼版本

注意：

您在使用自定義屬性，請您将自定義内容裡面涉及到英文單引号(')進行(\')轉義，以免出現問題