2016年3月5日 星期六

試用Shareaholic:強化Blog的社群分享功能

0

blogger的社群分享按鈕實在是不明顯、支援的社群服務也不夠多,所以想要改善這個方面,就搜尋到了Shareaholic這個服務:https://www.shareaholic.com/

1 首先就是進入這個網站註冊,一進去就有兩種選擇,因為是要用在blog上,所以就按左邊的For Websites,如下圖。
圖一

2 填完基本資料後,別忘了到信箱收確認信,按信裡面的連結。

3 再來到這個畫面,要填入想使用這個服務的自己的網站。
圖二

4 填好自己網站的基本資料後,會跳轉回如下圖的畫面。
圖三

5 按下網站名稱下方"Get setup code"按鈕,會跳出程式碼,將這段程式碼複製起來,回到blog後台,尋找範本功能,貼到範本中<head>與</head>間(最好放後面一點比較不會影響網站讀取速度)。
圖四

6 改好範本之後,回到shareaholic,按下網站名稱右邊的"verify site"按鈕,將會去偵測你的網站是否已經引用shareaholic相關的程式碼(就是步驟5的那段),如果成功的話,會收到一封信如下圖:
圖五

7 可以開始用這個服務了,功能很多,先試試看「浮動的社群分享按鈕」功能,如下圖紅框內功能。
要將右邊切換為綠色(表示開啟此功能)。
圖六


8 再來同樣按此功能右邊的小螺絲,進行浮動按鈕的細節設定。
左上角可以切換Layout(版面),分別設定Desktop(用電腦看)與Mobile(用手機看)的按鈕樣式。
最下方是所有支援分享的網站,按下去就會新增。
不想設定分享的網站,游標移到預覽區中的按鈕,在上方按x就可以刪掉。
只需要在這裡設定,網站裡面的按鈕就會自己變化,不用再做別的事。

圖七:電腦版面的按鈕設定

圖八:手機版面的按鈕設定


9 除了浮動按鈕外,也可以「在文章內加入分享本文的按鈕」、「在文章內加入相關文章的區塊」等等。
在同上的主畫面,捲到最下方會有"Inline APPs"的區塊,按下方的按鈕,會有三個功能可選。
圖九

10 Share Buttons就是「在文章內加入分享本文的按鈕」,如下圖為細節設定畫面。
設定完請將下圖紅框內的程式碼複製起來。
圖十

11 Related Content就是「在文章內加入相關文章的區塊」,如下圖為細節設定畫面。
設定完請將下圖紅框內的程式碼複製起來。
圖十一

12 然後到blog的後台,在版面設定中,尋找可以貼上自訂程式碼的區塊。下圖以blogger為例,按「新增小工具」> 「HTML/JavaScript」,然後將
步驟10或11的程式碼,新增成一個自訂功能區塊。
圖十二

13 新增完畢後,要把這個區塊拖到「文章區塊內」,下圖以blogger為例。
圖十三

14 Shareaholic也同時可以有網站分析功能,不過下次再研究吧。
手機版面也順利的放上按鈕了,不是在左邊而是在最下方。
圖十四:


0 意見:

張貼留言

歡迎分享本文~