Simple Sharing Buttons Generator 線上快速製作純 HTML + CSS 社群網站分享按鈕

Simple Sharing Buttons Generator 線上快速製作純 HTML + CSS 社群網站分享按鈕

對於網站或部落格站長來說,都會想辦法提高網頁的能見度,放上分享按鈕是個不錯的作法,至少在訪客想分享文章鏈結時,他們可以透過按鈕快速將鏈結傳到社群網站,提供這項功能的第三方服務很多,例如大家很熟悉的 AddThis、ShareThis 等等,只要把一行程式碼放入網頁,就能在適當位置顯示社群網站分享按鈕。

不過這麼做有個缺點,就是可能會「載入多餘、無用的 JavaScript 程式碼」,延遲網站開啟的時間,要改善這個問題可以自己做簡單的靜態分享按鈕,利用 HTML 加 CSS 就能實現這項功能,如果你對此沒有任何概念,本文要介紹的這個工具可以幫助你。

Simple Sharing Buttons Generator 它的名稱已經完全出賣了它的功能,這是一個非常簡單好用的分享按鈕產生器,只要進行設定,最終就能產生按鈕的 HTML 及 CSS 程式碼。同時,網站也會提供按鈕圖示包,將圖片上傳到自己的虛擬主機空間即可使用。

如果你想為網站、部落格加入靜態的分享按鈕,這個工具可以提供你適當協助,同時該按鈕也能在行動裝置上正常顯示,趕快動手幫自己的網頁掛上社群網站按鈕吧!

網站名稱:Simple Sharing Buttons Generator
網站鏈結:https://simplesharingbuttons.com/

使用教學

STEP 1

開啟 Simple Sharing Buttons Generator 後,點選「Begin」開始製作按鈕,網站提供六種不同樣式,看起來都很簡潔,使用在各種版面也不會有違和感,點選來選擇自己想要製作產生的社群網站分享按鈕吧!

Simple Sharing Buttons Generator

STEP 2

接著,選擇要顯示的社群網站按鈕,有 Facebook、Twitter、Google+、Pinterest 等等,依照你的需求勾選,然後按下「Next」到下一步。

Simple Sharing Buttons Generator

STEP 3

勾選「No JavaScript」可以產生沒有 JavaScript 代碼的分享按鈕,如果你本身使用的網誌平台不允許插入 Js 語法,那麼利用 Simple Sharing Buttons Generator 產生的按鈕依然可以正常顯示、使用,不會有影響。依序填入你的網站鏈結、標題和描述。

Simple Sharing Buttons Generator

STEP 4

最後一個步驟,Simple Sharing Buttons Generator 會產生按鈕的 HTML 和 CSS 程式碼,使用前記得點選下方的「Download the icons」先將按鈕圖檔打包下載,然後在網頁適當位置加入程式碼,就能夠很輕鬆地把按鈕放入自己的網頁裡囉!

Simple Sharing Buttons Generator

值得一試的三個理由:

  1. 線上產生純 HTML + CSS 分享按鈕
  2. 支援六種不同樣式設計
  3. 適用於 Facebook、Twitter、Google+ 等 11 種社群網站
分享本文