Share Button：jQuery 社群分享按鈕 Plugin

Share Button 是一個 jQuery 的社群分享按鈕 plugin，並且可以依照自己的網站風格自訂分享按鈕的樣式。

目前許多社群網站都有提供分享按鈕的功能，但是這類的分享功能有一些缺點：

• 通常會附帶載入一些不必要的 JavaScript 程式碼，讓網頁載入的速度變慢。
• 預設的按鈕可能會部符合網站的整體設計風格，造成畫面產生突兀的感覺，而使用者也無法任意更改樣式。
• 每次需要在網頁中加上按鈕時，都要使用 Google 查詢像「facebook like button」這樣的關鍵字，找到官方網站的程式碼產生工具，產生程式碼後再複製回自己的網頁中，不僅讓整個網頁程式碼顯得很雜亂（尤其是在加入好幾種社群的分享按鈕的時候），而且也不方便。
• 分享按鈕本身會佔去過多的網頁版面，不是很好看。

而 Share Button 這個 jQuery 小工具可以提供一個解決方案，並且有下面幾項優點：

• 不需要使用任何的 iframe 或是載入多餘的 JavaScript，可讓網頁的載入速度變快。
• 預設的版面很清爽，使用者也可以自行更改樣式。
• 使用上很簡單，只要引入它的 JavaScript 檔，再呼叫 .share() 函數就可以了，程式碼只需要兩行。
• 按鈕很簡潔，當使用者按下時，才會顯示所有的分享按鈕。

Share Button 的官方網站有 Demo 可以看它實際的效果。

以下是 Share Button 的使用方式，首先從 GitHub 下載 share.min.js 這個 JavaScript 檔，跟 jQuery 一起加入網頁中：

<script src="js/jquery.min.js"></script>
<script src='js/share.min.js'></script>

如果是 Blogger 部落格，可以這裡的方式，將 JavaScript 放在 Google 雲端硬碟上。

然後在網頁中要加入分享按鈕的地方，加入：

<div class='share-button'></div>

接著再加上這個啟用分享按鈕的程式碼：

<script>
$(function(){
  $('.share-button').share()
});
</script>

這樣就完成了。而這個 share() 函數有一些參數可以使用：

url

指定要分享的 URL，預設為 window.location.href。

text

指定要分享的文字，預設為網頁的 meta description。

image

指定要分享的圖片。

app_id

指定 facebook 的 app id，如果指定這個選項，則會使用 facebook 的 API。

background

指定分享按鈕的背景顏色，預設為 #e1e1e1。

color

指定分享按鈕的文字顏色，預設為 #333。

icon

指定分享按鈕的小圖示，可從這裡選擇，預設為 export。

button_text

指定分享按鈕的文字，預設為 Share。

使用範例：

$('.element').share({
  url: 'http://www.youtube.com/watch?v=oHg5SJYRHA0',
  text: 'check out this awesome video guys!'
})

另外也可以針對不同的社群網站分別指定不同的分享設定，可用的參數如下：

facebook: {
  name: 'title'
  link: 'url'
  image: 'share image'
  caption: 'picture caption'
  text: 'short description'
}

twitter: {
  text: 'tweet text'
  link: 'url'
}

gplus: {
  link: 'url'
}

例如：

$('.element').share({
  url: 'http://www.youtube.com/watch?v=oHg5SJYRHA0',
  text: 'check out this awesome video guys!'
  twitter: {
    text: 'peep this great video #great #video #hashtag'
  }
})

Share Button 也有少許的 API 函數可以使用，例如開啟或關閉分享按鈕等，但是這個部分通常比較少用，有需要的人可以參考官方網站的說明。