【轉】博客美化(3)為博客添加一個漂亮的分享按鈕

閱讀目錄

• 1.社會化分享
• 2.選擇一個分享按鈕
• 3.添加到博客園博客

　　博客園美化相關文章目錄：博客園博客美化相關文章目錄

　　在前2篇博客“博客美化(1)基本后臺設置與樣式設置”與"博客美化(2)自定義博客樣式細節"中詳細介紹了博客樣式設置的相關問題，當然可能是自己角度的問題，不是所有人都能完全搞明白，我個人的建議是，自己一邊改，一邊測試，只要花時間，肯定沒問題，想我這種js,css小白都可以慢慢修改一點，大家也都沒問題的，只是看想不想去折騰了。還是那句話，人生在于折騰。這一篇文章來一個實際的案例，也算是前2篇文章的一個補充，為自己的博客添加一個“分享按鈕”。很多人可能也見到過類似的按鈕，博客園的很多大神都在使用。效果就是您看這篇文章當前頁面，最右邊的那個按鈕。如下圖所示：

　　下面將像大家介紹幾種分享按鈕以及使用步驟。當然可能對很多人是小菜一碟，這里也算是一個拋磚引玉的作用，希望大家分享更多自己折騰博客園的插件，因為我找這個東西花了很長時間(不懂原理，不知道搜索啥關鍵字)，現在看來當然是非常簡單了。進入主題之前，先感謝博客園團隊，sevennight，marvin，博皮小組以及@Newlife群-長沙老豬，以及其他博客園關于樣式設計制作文章的作者，沒有一一列出，也記不清了。本文是在很多文章和現有博客模版的基礎上，自己磕磕碰碰，總結下來的。?

本文原文地址：博客美化(3)為博客添加一個漂亮的分享按鈕

當然這里的分享按鈕也可以用于大家各自的項目中，很多網站場合都可以使用，而不僅僅是博客園，使用方法大家模式和參考說明，本文只針對博客園的使用。

回到目錄

1.社會化分享

　　最近幾年所謂的SNS(Social Networking Services)，即社會性網絡服務非常火，啥微博，空間，蘑菇街。。開心，人人啦。。。數不勝數，雖然我不太經常用，但總歸看到身邊人在用，而且比較頻繁。以前沒有數量的概念，但看到下面一些數字后，我也很吃驚。在這里也給大家分享以下，作為使用這個按鈕的原因之一：

下面的數據和圖片來源與下面網站，純屬引用:

http://www.jiathis.com/report/html/2014-1-18

　　上述更詳細的報告可以參考源鏈接。所以在社會化網絡如此發到的今天，看到微信朋友圈每天的那些轉發，的確是很有沖動給自己的博客添加一個按鈕，讓分享更快，更美麗。（同時也發現很多網友，使用復制粘貼來把文章分享到自己的博客，比較費勁，有了這個工具，事半功倍)。接下來就看看幾款優秀的分享工具吧。

回到目錄

2.選擇一個分享按鈕

　　以前不知道有這種現成的東西，一直以為網友的這種按鈕效果是自己用js寫出來的，所以非常羨慕這些朋友。但自從發現這個東西后，百度了一下，非常多，我找了幾個，一起都分享給大家吧。大家根據自己的喜好以及需要來選用。使用方法將在下一小節中提到，過程也很簡單，獲取代碼后粘貼到博客園的頁首Html代碼中就可以了。

1.JiaThis分享按鈕

　　我最先了解和接觸，也是目前在使用的分享按鈕就是“JiaThis”按鈕，也就是大家目前右側看到的。這個使用量應該很廣泛吧，講到好多園友都是使用的這個。其網址為：http://www.jiathis.com/index2。這個按鈕的特點是樣式多，支持的網站也多大122個，非常全面。還有一個高級的“自定義”的功能，可以生成滿足自己需求的按鈕，比其他的功能要全面些吧，效果還不錯。

2.分享家按鈕

　　分享家按鈕是后來百度到的，稍微試了一下，感覺支持的網站不多，樣式也沒有JiaThis那么豐富，湊合著用吧。分享家官網是：http://addthis.org.cn/，這個分享家網站還提供一個訂閱按鈕，功能類似吧，有興趣的可以去看看。

3.百度分享按鈕

　　本人一直對百度的產品比較反感，感覺是啥都要做，啥都做不好，要不是迫于無奈，百度搜索都不會用。這個百度分享按鈕雖然提供的樣式比較多，但沒發現有多少在用，看了網站的介紹，總體感覺一般的，可能使用它的好處是流量統計做得比較好。支持的網站也不如JiaThis的多。樣式可能比較簡潔，大家看看，喜歡可以用用。這個百度分享有 一個專業開發版 和 自由版，專業版可能是供自己網站開發用的，像博客園使用自由版就好了。百度分享按鈕網址：http://share.baidu.com/

4.bShare分享按鈕

　　bShare也是非常專業的一個分享按鈕，據網站介紹使用的人挺多吧，樣式也挺多，不過也都差不多，其支持的網站挺多130+，比JiaThis還多啊。有一些特殊的樣式，比較贊一個吧。這個我也沒去嘗試，留個腳印吧。這個網站也有不少其他產品，值得用用。bShare網址：http://www.bshare.cn/

回到目錄

3.添加到博客園博客

?　　大家根據上面選擇的按鈕，獲取到代碼之后，直接粘貼到博客園后臺-頁首Html代碼 的文本框中就可以了，如下圖我的代碼和截圖：

<script charset="utf-8" type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0&amp;btn=r3.gif"></script>

至此，大功告成，大家保存后就可以看到效果。

?

來源