Share Button 是一個 jQuery 的社群分享按鈕 plugin,並且可以依照自己的網站風格自訂分享按鈕的樣式。
而 Share Button 這個 jQuery 小工具可以提供一個解決方案,並且有下面幾項優點:
iframe
或是載入多餘的 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
window.location.href
。 text
image
app_id
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 函數可以使用,例如開啟或關閉分享按鈕等,但是這個部分通常比較少用,有需要的人可以參考官方網站的說明。