目前比較知名的網(wǎng)站分享代碼供應(yīng)商已經(jīng)有很多家了，大家可以根據(jù)自己的實(shí)際需求去選擇。例如：百度分享、Qzone分享、Jiathis分享等等，比如，我們自己的官網(wǎng)只需要分享到空間而已，所以我們選擇了Qzone分享組件，其他分享按鈕樣式暫未研究，以后有可能會(huì)寫相關(guān)資料，敬請(qǐng)留意。

而每一個(gè)分享的功能都非常的完善，界面也十分的豐富。于是可能就會(huì)有人問，為什么不用分享代碼自帶的分享組件按鈕的圖片和樣式呢?這是因?yàn)槲覀兿胍约旱暮蛣e人的不一樣，而且當(dāng)網(wǎng)站風(fēng)格和這些分享組件的風(fēng)格無法一致的時(shí)候，就需要自定義網(wǎng)站上Qzone分享組件按鈕的圖片和樣式了。

我們新版的官方網(wǎng)站由HTML5開發(fā)，風(fēng)格也完全和過去的網(wǎng)站不一樣，同時(shí)基本上都是采用全屏模式設(shè)計(jì)的，根本沒有地方來放置分享按鈕，只能集成在在線客服欄目這里?，F(xiàn)在進(jìn)入正題，我們要如何自定義網(wǎng)站上Qzone分享組件按鈕的圖片和樣式呢？我們這里以圖片為例向大家講解一下我們是如何操作的！

第一步：準(zhǔn)備好按鈕圖片，請(qǐng)大家根據(jù)自己的網(wǎng)站風(fēng)格設(shè)計(jì)好按鈕圖片樣式；

第二步：到Qzone分享組件官網(wǎng)去復(fù)制分享代碼；

第三步：在自己的網(wǎng)站CSS文件中引用圖片并定義新的按鈕樣式，以cl_share為例；

第四步：根據(jù)自己的實(shí)際需要，刪除多余的代碼！

showcount:?1?,/*是否顯示分享總數(shù),顯示：?1?，不顯示：?0? */

desc:??,/*默認(rèn)分享理由(可選)*/

summary:??,/*分享摘要(可選)*/

title:??,/*分享標(biāo)題(可選)*/

site:??,/*分享來源 如：騰訊網(wǎng)(可選)*/

pics:??, /*分享圖片的路徑(可選)*/

style:?203?,

width:98,

height:22

這些都是可要可不要的，我們只保留了第一個(gè)，具體大家參考下圖片中的處理方法。最后一個(gè)獲取圖片的JS也可以不要了，因?yàn)槲覀円呀?jīng)有自己的圖片了。

到這里，就已經(jīng)實(shí)現(xiàn)了網(wǎng)站上Qzone分享組件按鈕的圖片和樣式。但是有可能會(huì)存在位置不對(duì)，分享按鈕沒有出現(xiàn)在我們預(yù)期的位置，這就需要我們進(jìn)一步調(diào)整。

最后的細(xì)節(jié)調(diào)整：在網(wǎng)頁中找一個(gè)位置，新建一個(gè)位置正確的DIV并設(shè)置其CSS樣式為position:relative。然后將分享代碼粘貼在這個(gè)DIV里，然后在我們自己定義的按鈕樣式中（本例中為#cl_share），設(shè)置position:absolute絕對(duì)定位。實(shí)際效果請(qǐng)參考本站右側(cè)分享按鈕！