分類: 網頁開發

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 函數可以使用,例如開啟或關閉分享按鈕等,但是這個部分通常比較少用,有需要的人可以參考官方網站的說明

G. T. Wang

個人使用 Linux 經驗長達十餘年,樂於分享各種自由軟體技術與實作文章。

Share
Published by
G. T. Wang
標籤: jQuery

Recent Posts

光陽 KYMCO GP 125 機車接電發動、更換電瓶記錄

本篇記錄我的光陽 KYMCO ...

2 年 ago

[開箱] YubiKey 5C NFC 實體金鑰

本篇是 YubiKey 5C ...

2 年 ago

[DIY] 自製竹火把

本篇記錄我拿竹子加上過期的苦茶...

3 年 ago