本文要介紹的「Sharingbuttons.io 2.0」是一款超級快速、簡單的分享按鈕產生器，不需要使用 JavaScript，也不會有任何追蹤代碼（減少開啟網站時的請求次數），只要在服務裡設定一下分享按鈕，將產生的程式碼複製貼上，就能輕鬆使用！

這項功能非常適合單頁面網站使用，尤其是為了分享按鈕而頭痛的開發者。

Sharingbuttons.io 因為不會用到 JavaScript，載入速度快到難以置信（你相信嗎？載入好幾個按鈕只需發送一個 HTTP 請求），而且支援任何裝置，同時符合每個社群媒體的品牌指南，按鈕看起來就跟我們熟悉的分享按鈕沒什麼兩樣。

如果你還有印象，我還介紹過另一款「Perfect Icons 超棒社交網站按鈕產生器！三步驟快速加入圖示、CSS 語法教學」，其實兩項服務類似，相較之下 Sharingbuttons.io 按鈕又更為簡約，甚至連圖片都無須下載（它是使用 SVG 繪製）。

網站名稱：Sharingbuttons.io
網站鏈結：http://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」透過線上產生器快速為網站製作屬於自己的社群網站分享按鈕，可以選擇的樣式更多。

喜歡 Sharingbuttons.io 超快速分享按鈕產生器，免 JavaScript 無追蹤代碼 嗎？歡迎將免費資源網路社群加入書籤，以 Facebook、Twitter 或 Google+ 追蹤更新，獲取更多科技新知及免費資源相關介紹教學。