Sharingbuttons.io 超快速分享按鈕產生器,免 JavaScript 無追蹤代碼

Sharingbuttons.io 超快速分享按鈕產生器,免 JavaScript 無追蹤代碼
(Copyright: maxxyustas / 123RF Stock Photo

社群分享按鈕讓人又愛又恨,愛的是透過社群力量,有效將你的網站或部落格文章散播出去,使更多潛在讀者看到,藉此提高流量或網路影響力;恨的是現今常見社群網站按鈕因為整合太多功能,以致於程式非常肥大,甚至會拖慢網站載入速度。在放與不放之間就要交給網站站長們自己選擇,但有沒有折衷方法能使用既有分享功能又不影響到網站效能呢?

本文要介紹的「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 字樣,雖然顯示為英文,不過程式碼部分可以自己修改成中文。

Sharingbuttons.io

STEP 2

我們先從設定功能裡指定分享的網站網址及內容(通常是網站名稱),選擇要產生按鈕的社群網站服務,通常我只選擇 Facebook、Twitter、Google+ 和 Pinterest 四個較常用的社群平台,其他還有 Tumblr、LinkedIn、Reddit、XING、WhatsApp 可用。

另外,從下方還可以挑選分享按鈕尺寸、圖示,尺寸方面有小、中和大三種,圖示的話預設選擇 Solid,若想要圓形外框可以選 Circle(個人認為 Solid 比較清晰好看)。

Sharingbuttons.io

STEP 3

如果你想在單一頁面裡塞入所有分享按鈕,那麼選擇小尺寸的按鈕是不錯的選擇,這些按鈕本身也有 RWD 特性,依照頁面寬度自動調整到最合適的顯示寬度。例如下圖就是我使用 Small 大小在網站放入所有按鈕呈現出來的樣式預覽。

Sharingbuttons.io

STEP 4

最後,Sharingbuttons.io 會產生兩段程式碼,左側是 HTML 程式碼,右側為 CSS,只要把 CSS 加入你網站現有的樣式檔,左側放到網頁裡要呈現按鈕的地方即可。

Sharingbuttons.io

直接用 SVG 刻出來的分享按鈕真的非常強大!不但省去載入檔案的時間,連帶也最小化開啟網頁時送出的請求數,又不用因為這樣而被迫拔掉網站的社群分享功能,或許是目前可以找到的最佳解決方案。

如果你追求網站效能,但不希望拿掉分享按鈕而減少社群分享帶來的效益,不妨研究一下 Sharingbuttons.io ,它還是開放原始碼專案,可以從 GitHub 找到相關說明。

另一款純 HTML + CSS 按鈕「Simple Sharing Buttons Generator」透過線上產生器快速為網站製作屬於自己的社群網站分享按鈕,可以選擇的樣式更多。

分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6251