菜鳥救星網頁設計教學：網頁設計-社群分享按鈕簡單做

文/圖、菜鳥編

文章轉自聯成電腦，未經授權請勿轉載，原文為：聯成電腦網頁設計教學：網頁設計-社群分享按鈕簡單做

近年來，因為SEO排名及自媒體的經營的重要性，許多公司甚至是部落客，也紛紛於自己的網站加入社群連結按鈕。提升自己網站排名及曝光的機會。

目前提供這方面服務的平台很多，主要是提供 JavaScript 程式碼，在網頁上插入編碼就可呈現社群分享按鈕。但缺點就是如果要修改，本身就要對JavaScript有點功力才行。再來就是有時會產生出多餘無用的編碼，也是會影響到網站載入的時間，對於SEO很要求的網站，就要特別注意。

網站名稱：Simple Sharing Buttons Generator
內容說明：使用HTML與CSS編碼撰寫的社群分享按鈕

在首頁可看到此平台標榜著為輕便且對手機支援相當好的分享按鈕產生器，必且非使用JavaScript編寫。開始方式也很快速，可點選右下角「Begin」或是將網頁下拉就可看到樣式的挑選。

提供的樣式也相當多元，包含扁平化圖是或是簡約風格的Icon或是直接用文字來表示。

下一步挑選想要使用的社群連結。

接著針對欄位填入相關網站資訊，這邊所填寫的內容也是當社群分享按鈕點擊時所要分享的網址，所以就看你的社群按鈕是安裝在哪個網頁，就將網址填入即可。

馬上就可以看到預覽的樣式。

最後會產生對應的HTML及CSS編碼，可直接將編碼加入到你的網頁中。

鳥編這邊將這串編碼加到與YAHOO合作的免費拍賣課程活動網頁，可以看到上方就多一串社群分享按鈕，當然你也可以調整HTML或CSS樣式來變更位置。可以到 http://goo.gl/7xLKXD 測試看看喔。

另外，也提醒一下，剛剛所加入的編碼加入後，也記得一併將按鈕圖示下載喔。位置就在剛剛編碼產生的下方，點選「Download the icons」。

加入菜鳥救星官方Line並回覆「我想看文章」，不定期獲得更多知識吧！

不同頻道，不同知識！

Facebook Instagram Youtube