2014年6月29日

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:浮動在左測的分享按鈕,最近也蠻常見的,可依需求使用
  • 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
參考資料:


更多精選推薦文章