2016年1月18日

安裝常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用

A+
round-social-share-buttons-自製常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用上一篇「圖示字型 Font Awesome 進階使用方式整理」,說明了如何利用重疊圖示,來組合出一個 FB 分享按鈕。

只做出一個不過癮,本篇要示範如何利用 Font Awesome 圖示字型,繼續做出所有常見的社群分享按鈕,例如 G+、Line、微博、噗浪、推特、郵件等等。



一、特點


9-round-social-share-buttons-自製常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用

上面為所有按鈕的示意圖,要觀看動畫效果及操作,請前往展示頁面:



這組社群分享按鈕的特點如下:
  • 不需要安裝外掛程式,可提升頁面載入速度。
  • 不使用圖片,所有的圖案、顏色純粹使用 CSS 及 Font Awesome 圖示字型,縮短讀取時間。
  • 純粹使用超連結進行分享的動作。
  • 滑鼠經過有簡單的動畫
  • 可安裝在網頁多處位置



二、安裝 CSS


以下以 Blogger 的安裝方式來舉例,但本篇的程式碼並不限 Blogger 平台才能安裝,任何網頁都可使用,請參考教學自行擺放在適當位置。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'></link>
<!--圓形分享按鈕-->
<style>
#rndShareBtn a {
display: inline-block;
text-decoration: none;
transition: all .2s;
-webkit-transition: all .2s;
-moz-transition: all .2s;
}
#rndShareBtn a:hover {
-ms-transform: translateY(-4px);
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
#rndShareBtn .fa-stack-1x {
color: #fff;
}
/* FB */
.rs_fb .fa-stack-2x {
color: #3B5998;
}
/* G+ */
.rs_gplus .fa-stack-2x {
color: #d73d32;
}
/* line */
.rs_line .fa-stack-2x {
color: #00c300;
}
/* plurk */
.rs_plurk .fa-stack-2x {
color: #cf682f;
}
.rs_plurk .fa-plurk {
font-family: arial;
font-style: normal;
font-weight: bold;
}
/* weibo */
.rs_weibo .fa-stack-2x {
color: #F5CA59;
}
/* twitter */
.rs_twitter .fa-stack-2x {
color: #2ba9e1;
}
/* tumblr */
.rs_tumblr .fa-stack-2x {
color: #35465d;
}
/* pinterest */
.rs_pinterest .fa-stack-2x {
color: #EA1514;
}
/* email */
.rs_email .fa-stack-2x {
color: #939598;
}
</style>
<!-- -->

  • 開頭綠色字串這一行,可檢查範本中是否已經裝過「Font-Awesome」這個 Icon 圖示字型,若安裝過可刪除此行。
  • 如果想調整圖示的大小尺寸,可參考「圖示字型 Font Awesome 進階使用方式整理」→「二、進階使用方式」→「1. 放大」
  • 其餘的部分,如果對 CSS 熟悉可自行修改參數。



三、安裝分享按鈕(HTML)


接者可將以下程式碼,安裝在 Blogger 範本中任何你想顯示的地方,也可放在側邊欄小工具、網頁底部等等這些常見的位置,總之可以放在多處需要分享的地方。

如果想放在文章結束處的話,可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」→「三、文章區塊」→「3. 繼續閱讀」,放在這裡的程式碼後面:

<!--圓形分享按鈕-->
<div id='rndShareBtn'>
<!-- fb -->
<a class='rs_fb' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 FB' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-facebook fa-stack-1x'></i>
</span>
</a>
<!-- g+ -->
<a class='rs_gplus' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 G+' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-google-plus fa-stack-1x'></i>
</span>
</a>
<!-- line -->
<a class='rs_line' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 LINE' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-whatsapp fa-stack-1x'></i>
</span>
</a>
<!-- plurk -->
<a class='rs_plurk' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 PLURK' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-plurk fa-stack-1x'>P</i>
</span>
</a>
<!-- weibo -->
<a class='rs_weibo' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 微博' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-weibo fa-stack-1x'></i>
</span>
</a>
<!-- twitter -->
<a class='rs_twitter' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 TWITTER' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-twitter fa-stack-1x'></i>
</span>
</a>
<!-- tumblr -->
<a class='rs_tumblr' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 TUMBLR' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-tumblr fa-stack-1x'></i>
</span>
</a>
<!-- pinterest -->
<a class='rs_pinterest' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 PINTEREST' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-pinterest-p fa-stack-1x'></i>
</span>
</a>
<!-- email -->
<a class='rs_email' href=' ' onclick='window.open(this.href, "_blank", "height=500,width=800"); return false;' title='分享到 EMAIL' target='_blank'>
<span class='fa-stack fa-lg'>
<i class='fa fa-circle fa-stack-2x'></i>
<i class='fa fa-envelope fa-stack-1x'></i>
</span>
</a>
</div>
<!-- -->

  • 也許你沒有想要 9 個按鈕全放,那麼可根據提示的註釋字串,自行刪除不需要的按鈕。
  • 很重要的一點,這 9 個按鈕的超連結網址,全部都是空下來的,如果這組按鈕你想要用來分享特定網址的話(例如首頁),那麼請在所有的 href=' ' 這裡,填入要分享的特定網址



四、安裝 JS 程式碼


如果這組社群分享按鈕,你不是只拿來分享首頁網址,而是要讓每篇文章都能執行分享,就必須藉助 JS 來取得文章網址,代替我們自動替換分享連結的網址,那麼請務必安裝後續的 JS 程式碼

接續之前的安裝動作,請在範本中搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:




五、注意事項


最後再提醒一下:
  • 圖示大小請按照教學連結改成滿意的尺寸
  • 分享按鈕可以放在網頁多個地方
  • 要分享特定網址(例如首頁)的那一組按鈕,「三、安裝分享按鈕(HTML)」這裡的程式碼,href=' ' 請一個個填入特定網址。
  • 要用來分享文章的那一組按鈕,href=' ' 絕對不可填入網址,且必須安裝「四、安裝 JS 程式碼」。


更多社群分享按鈕工具:

10 則留言:

  1. 剛剛搜尋又出現了,問題已解決,真是不好意思

    回覆刪除
    回覆
    1. 想要請問,這篇的分享按鈕要設定再行動版也出現應該如何處理呢?

      刪除
    2. 修改行動版的技巧可參考:http://www.wfublog.com/2014/04/blogger-mobile-template-custom-tips.html

      以及本站「行動版」這個標籤的相關文章:http://www.wfublog.com/search/label/%E9%9B%BB%E8%85%A6-%20Blogger-%20Hack-%E8%A1%8C%E5%8B%95%E7%89%88

      刪除
  2. 你好,今天又加入了你這篇文章的教學,超漂亮的:) 而且不難安裝~

    不過我再測試email分享的時候,發現email內會有文字變成亂碼,如下:http://i.imgur.com/48VMZAf.jpg

    因為我的blogger有設定TITLE ( WangHenry娛樂數位| 遊戲 | 3C | 教學 | 開箱 |)

    而分享的email預設為 WINDOWS LIVE MAIL 2012這套微軟的軟體(Windows Essential),所以不知道是title的問題,還是這套收發信件軟體的問題,謝謝:)

    回覆刪除
    回覆
    1. 收信軟體通常可以設定語系,你可以找找調整語系的設定

      刪除
  3. 回報:

    這個工具的圖示有錯誤,但我不知道該怎麼改回來@@

    錯誤的地方為: 第三個實際上是分享到LINE,但他的圖卻是Whatsapp的LOGO~

    這邊能麻煩你修正一下嗎? 謝謝~

    回覆刪除
    回覆
    1. font-awesome 沒有提供 line 的圖示,只能找相近的圖示來使用,你也可以自行替換為其他的圖示。

      刪除
  4. 想請問一下 如何把按鈕 置中/至左

    回覆刪除
    回覆
    1. 請見下面的留言注意事項,CSS 問題可 google 相關教學

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。