Shareaholic 超美超完整社群網站分享按鈕教學(含浮動式按鈕)
寫部落格已經很久了，每隔一陣子就會想幫部落格換上不同的功能外掛，
而每用一個我都會將使用方法與心得寫下來，統一放在這篇文章中：
Blog Plugins：部落格外掛大全整理，什麼都有、什麼都不奇怪，
大家若是好奇這個部落格的外掛功能哪來的，
或是覺得哪個外掛非常新奇好用也想安裝，可以去那邊挖寶 :p
今天要介紹的是 Shareaholic 這個社群網站分享按鈕，
會知道這家是因為在幾個網站上看到覺得很漂亮，先來個預覽圖吧 ^^
這年頭社群網站的力量很大，在文章前後順手放個分享按鈕就能增加不少流量，
先前在自己部落格上放的是自己手動加上去的 Facebook 及 Google+按鈕，
因為得要分開安裝，所以在調整大小時花了好一番功夫才讓風格比較一致，如下圖！
如果覺得這樣長得也不錯，可以參考先前的教學安裝文：
總而言之大概是版面太久沒調整想要換換口味，加上 Shareaholic 實在太漂亮了，
這次研究了一下怎麼在 Blogger 安裝，依往例一樣寫成詳細的教學，
所以接下來就要來教大家怎麼把 Shareaholic 裝在部落格上囉！
步驟一：進入 Shareaholic 網站，先點右上角的 SIGN UP FREE!
這是因為即使先調整了外掛按鈕的長相，要拿程式碼之前還是要有帳號，
不如第一步就先把帳號註冊好囉！
填寫信箱及密碼註冊新帳號：
註冊後至email收信點啟用連結即可：
(我在這步卡了一兩天都沒收到信，不管怎麼重寄都收不到，兩天後才正常)
如果像我一樣沒收到信的，可以在帳號設定這邊重寄認證信、重設信箱，
順帶一提，調整時區也在這邊，若會用到人數統計資料的建議先修改。
步驟二：至 Site Tools (網站工具)，點下 Add Website 來新增網站。
填入網站相關資料，按下 Continue：
DOMAIN：輸入網站所在的網域
NAME：網站名稱
PLATFORM：網站所在平台 (Blogger, WordPress……)
CONTENT CATEGORY：網站類別
CONTENT LANGUAGE：網站內容使用的語言
步驟三：挑選及建立所要的外掛(APPS)類型，預設已建立兩種：
Floated Share Buttons 圖例：
但預設的兩者都不是我想要的，按下 Add App Location -> Share Buttons：
自行調整各項設定，名稱可以註明網站及位置，以後比較好辨識，
調整完各項參數後都可以在即時預覽區看到結果，大家就自行調整吧~
調整完滿意顯示效果後就按下 Save Settings 即可。
步驟四：安裝程式碼，這邊要安裝的有兩個，分別是 Setup Code及按鈕的程式碼，
類似的概念在先前的文章已有詳細做過，可參考：
為Blogger嵌入Facebook讚(like)、寄送分享(send)與留言(comment)外掛及留言管理功能
其中不管是讚、分享還是留言板，都需要事先安裝 Setup Code，
然後再於版面正確的地方插入讚、分享、留言板各自的程式碼。
Shareaholic 的概念也是一樣，若要使用剛剛設定好的分享按鈕，
必須先安裝一份 Setup Code，而分享按鈕會需要額外在適當版面插入程式碼。
(預設的浮動側邊欄已包含在 Setup Code 中了，就只需要安裝 Setup Code 即可)
安裝 Setup Code：
按下上圖的 Get Setup Code 後會跳出以下視窗，將程式碼複製到範本中的 head tag 結尾前。
至 Blogger 管理介面，選擇範本 -> 編輯 HTML：
按 ctrl+f 找到 </head>，在這個 tag 之前插入整段 Setup Code
安裝按鈕程式碼：
點選分享按鈕的程式碼，
複製這段語法，插入任何想要插入的地方：
如果要插入文章標題後，
請在範本的地方按 ctrl+f 繼續搜尋 <b:includable id='post' var='post'>
找到適當位置後插入第二段 code。(因還會有下圖中藍色部份：文章標題等)。
我是在平常自己登入Blogger時標題底下會出現鉛筆符號可編輯的地方插入這段。
完成後效果如下：
編輯範本的好處是自由性很高，可以讓按鈕在任何地方出現，
如果不想使用插入在範本中的方式，也可以透過版面配置 -> 新增小工具
選擇「HTML/Javascript」
填入標題(可留空)，並在下方內容處放入分享按鈕的程式碼：
完成後將按鈕拖拉到版面適當的地方並儲存版面配置：
顯示效果如下：
再舉一例，將 HTML/Javascript 區塊拉到文章結束後，並把區塊的標題拿掉：
效果如下：
甚至我們也可以將分享按鈕的程式碼直接插入在文章之中！
效果如下：
以上就是 Shareaholic 超完整的分享按鈕安裝教學啦，
如果喜歡 Shareaholic 漂亮又完整的分享按鈕們，一定不要錯過囉~
更多本部落格所使用的外掛們，請見：
Blog Plugins：部落格外掛大全整理，什麼都有、什麼都不奇怪，
關鍵字：Blogger, Shareaholic, 社群網站, 分享按鈕, 教學, 浮動式, 左側, 右側, 套件, 外掛, socail, plugin, buttons, share
參考資料：
而每用一個我都會將使用方法與心得寫下來，統一放在這篇文章中：
Blog Plugins：部落格外掛大全整理，什麼都有、什麼都不奇怪，
大家若是好奇這個部落格的外掛功能哪來的，
或是覺得哪個外掛非常新奇好用也想安裝，可以去那邊挖寶 :p
今天要介紹的是 Shareaholic 這個社群網站分享按鈕，
會知道這家是因為在幾個網站上看到覺得很漂亮，先來個預覽圖吧 ^^
這年頭社群網站的力量很大，在文章前後順手放個分享按鈕就能增加不少流量，
先前在自己部落格上放的是自己手動加上去的 Facebook 及 Google+按鈕，
因為得要分開安裝，所以在調整大小時花了好一番功夫才讓風格比較一致，如下圖！
如果覺得這樣長得也不錯，可以參考先前的教學安裝文：
總而言之大概是版面太久沒調整想要換換口味，加上 Shareaholic 實在太漂亮了，
這次研究了一下怎麼在 Blogger 安裝，依往例一樣寫成詳細的教學，
所以接下來就要來教大家怎麼把 Shareaholic 裝在部落格上囉！
步驟一：進入 Shareaholic 網站，先點右上角的 SIGN UP FREE!
這是因為即使先調整了外掛按鈕的長相，要拿程式碼之前還是要有帳號，
不如第一步就先把帳號註冊好囉！
填寫信箱及密碼註冊新帳號：
註冊後至email收信點啟用連結即可：
(我在這步卡了一兩天都沒收到信，不管怎麼重寄都收不到，兩天後才正常)
如果像我一樣沒收到信的，可以在帳號設定這邊重寄認證信、重設信箱，
順帶一提，調整時區也在這邊，若會用到人數統計資料的建議先修改。
步驟二：至 Site Tools (網站工具)，點下 Add Website 來新增網站。
填入網站相關資料，按下 Continue：
DOMAIN：輸入網站所在的網域
NAME：網站名稱
PLATFORM：網站所在平台 (Blogger, WordPress……)
CONTENT CATEGORY：網站類別
CONTENT LANGUAGE：網站內容使用的語言
步驟三：挑選及建立所要的外掛(APPS)類型，預設已建立兩種：
- Floated Share Buttons：浮動在左測的分享按鈕，最近也蠻常見的，可依需求使用
- Cookie Consent Banner：國外有規定要讓使用者知道網站有使用Cookie，這個用不到
Floated Share Buttons 圖例：
但預設的兩者都不是我想要的，按下 Add App Location -> Share Buttons：
自行調整各項設定，名稱可以註明網站及位置，以後比較好辨識，
調整完各項參數後都可以在即時預覽區看到結果，大家就自行調整吧~
調整完滿意顯示效果後就按下 Save Settings 即可。
步驟四：安裝程式碼，這邊要安裝的有兩個，分別是 Setup Code及按鈕的程式碼，
類似的概念在先前的文章已有詳細做過，可參考：
為Blogger嵌入Facebook讚(like)、寄送分享(send)與留言(comment)外掛及留言管理功能
其中不管是讚、分享還是留言板，都需要事先安裝 Setup Code，
然後再於版面正確的地方插入讚、分享、留言板各自的程式碼。
Shareaholic 的概念也是一樣，若要使用剛剛設定好的分享按鈕，
必須先安裝一份 Setup Code，而分享按鈕會需要額外在適當版面插入程式碼。
(預設的浮動側邊欄已包含在 Setup Code 中了，就只需要安裝 Setup Code 即可)
安裝 Setup Code：
按下上圖的 Get Setup Code 後會跳出以下視窗，將程式碼複製到範本中的 head tag 結尾前。
至 Blogger 管理介面，選擇範本 -> 編輯 HTML：
按 ctrl+f 找到 </head>，在這個 tag 之前插入整段 Setup Code
安裝按鈕程式碼：
點選分享按鈕的程式碼，
複製這段語法，插入任何想要插入的地方：
如果要插入文章標題後，
請在範本的地方按 ctrl+f 繼續搜尋 <b:includable id='post' var='post'>
找到適當位置後插入第二段 code。(因還會有下圖中藍色部份：文章標題等)。
我是在平常自己登入Blogger時標題底下會出現鉛筆符號可編輯的地方插入這段。
完成後效果如下：
編輯範本的好處是自由性很高，可以讓按鈕在任何地方出現，
如果不想使用插入在範本中的方式，也可以透過版面配置 -> 新增小工具
選擇「HTML/Javascript」
填入標題(可留空)，並在下方內容處放入分享按鈕的程式碼：
完成後將按鈕拖拉到版面適當的地方並儲存版面配置：
顯示效果如下：
再舉一例，將 HTML/Javascript 區塊拉到文章結束後，並把區塊的標題拿掉：
效果如下：
甚至我們也可以將分享按鈕的程式碼直接插入在文章之中！
效果如下：
以上就是 Shareaholic 超完整的分享按鈕安裝教學啦，
如果喜歡 Shareaholic 漂亮又完整的分享按鈕們，一定不要錯過囉~
更多本部落格所使用的外掛們，請見：
Blog Plugins：部落格外掛大全整理，什麼都有、什麼都不奇怪，
關鍵字：Blogger, Shareaholic, 社群網站, 分享按鈕, 教學, 浮動式, 左側, 右側, 套件, 外掛, socail, plugin, buttons, share
參考資料：
