社群分享按鈕讓人又愛又恨，愛的是透過社群力量，有效將你的網站或部落格文章散播出去，使更多潛在讀者看到，藉此提高流量或網路影響力；恨的是現今常見社群網站按鈕因為整合太多功能，以致於程式非常肥大，甚至會拖慢網站載入速度。在放與不放之間就要交給網站站長們自己選擇，但有沒有折衷方法能使用既有分享功能又不影響到網站效能呢？
本文要介紹的「Sharingbuttons.io 2.0」是一款超級快速、簡單的分享按鈕產生器，不需要使用 JavaScript，也不會有任何追蹤代碼（減少開啟網站時的請求次數），只要在服務裡設定一下分享按鈕，將產生的程式碼複製貼上，就能輕鬆使用！
這項功能非常適合單頁面網站使用，尤其是為了分享按鈕而頭痛的開發者。
Sharingbuttons.io 因為不會用到 JavaScript，載入速度快到難以置信（你相信嗎？載入好幾個按鈕只需發送一個 HTTP 請求），而且支援任何裝置，同時符合每個社群媒體的品牌指南，按鈕看起來就跟我們熟悉的分享按鈕沒什麼兩樣。
如果你還有印象，我還介紹過另一款「Perfect Icons 超棒社交網站按鈕產生器！三步驟快速加入圖示、CSS 語法教學」，其實兩項服務類似，相較之下 Sharingbuttons.io 按鈕又更為簡約，甚至連圖片都無須下載（它是使用 SVG 繪製）。
網站名稱：Sharingbuttons.io
網站鏈結：https://sharingbuttons.io/
使用教學
STEP 1
開啟 Sharingbuttons.io 網站後，會有一個簡單的設定及預覽畫面，預設情況下產生的分享按鈕是帶有圖示及 Share on 字樣，雖然顯示為英文，不過程式碼部分可以自己修改成中文。
STEP 2
我們先從設定功能裡指定分享的網站網址及內容（通常是網站名稱），選擇要產生按鈕的社群網站服務，通常我只選擇 Facebook、Twitter、Google+ 和 Pinterest 四個較常用的社群平台，其他還有 Tumblr、LinkedIn、Reddit、XING、WhatsApp 可用。
另外，從下方還可以挑選分享按鈕尺寸、圖示，尺寸方面有小、中和大三種，圖示的話預設選擇 Solid，若想要圓形外框可以選 Circle（個人認為 Solid 比較清晰好看）。
STEP 3
如果你想在單一頁面裡塞入所有分享按鈕，那麼選擇小尺寸的按鈕是不錯的選擇，這些按鈕本身也有 RWD 特性，依照頁面寬度自動調整到最合適的顯示寬度。例如下圖就是我使用 Small 大小在網站放入所有按鈕呈現出來的樣式預覽。
STEP 4
最後，Sharingbuttons.io 會產生兩段程式碼，左側是 HTML 程式碼，右側為 CSS，只要把 CSS 加入你網站現有的樣式檔，左側放到網頁裡要呈現按鈕的地方即可。
直接用 SVG 刻出來的分享按鈕真的非常強大！不但省去載入檔案的時間，連帶也最小化開啟網頁時送出的請求數，又不用因為這樣而被迫拔掉網站的社群分享功能，或許是目前可以找到的最佳解決方案。
如果你追求網站效能，但不希望拿掉分享按鈕而減少社群分享帶來的效益，不妨研究一下 Sharingbuttons.io ，它還是開放原始碼專案，可以從 GitHub 找到相關說明。
另一款純 HTML + CSS 按鈕「Simple Sharing Buttons Generator」透過線上產生器快速為網站製作屬於自己的社群網站分享按鈕，可以選擇的樣式更多。
