[網站應用] Shareaholic 免費社群分享按鈕-實戰教學

Shareaholic 

免費「社群分享按鈕」進階般
在Blogger 加入 Shareaholic 「社群分享按鈕」-實戰教學！
（＝“＝）要有一點耐心喔！

課前準備：註冊

步驟1：設置Shareaholic

• 登錄 www.shareaholic.com  帳戶(免費 )
• 點擊  網站工具[site tool]
• 點擊  添加網站[Add a New Webside]
  
  PS:如果手殘跳出的話。入口：右上頭像開manu-bar▶ [Webside Dashboard]   

Add a New Website 頁面：

• DOMAIN：把部落格網址貼到這裡。
• NAME：Blogger名稱，下方三個選項稍微設定一下，然後顯選「Continue」繼續保存。 

步驟2：獲取主程式代碼

• 點擊「Get Setup Code」，右側黃底「主程式代碼」全部複製並到剪貼板。

步驟3：安裝 Shareaholic 主程式代碼(回到Blogger)

3-1.安裝Shareaholic主程式代碼到您的Blogger網站

• 1.點擊Blogger「Template」模板▶點選「Edit HTML」
  
• 1.使用CTRL-F或Command-F和搜索：“ / head “
• 2.找到</ HEAD>後方，點擊Enter增加一行，
• 3.貼上Shareaholic主程式代碼。
• 4.儲存範本

3-2.回到Shareaholic 網站確認 

• 回到https://www.shareaholic.com/publisher_tools
• 點擊藍色「Verify Site」確認網址 按鈕

• 片刻後，屏幕上會刷新一綠色橫幅說：“驗證成功”。
  如果沒有，  請點擊這裡尋求幫助。 

步驟4：安裝 Shareaholic 分享按鈕到Blog

記得剛剛我們安裝了「主程式代碼安裝」＋「驗證網站」，
現在可以設定Blog要使用的Shareaholic分享按鈕及相關內容了。 

4A-分享按鈕

4A-1.建立共享按鈕 

• 前往  https://www.shareaholic.com/publisher_tools
• 1.點選Add App Location「增加應用程式位置」
• 2.選擇Share Buttons「分享按鈕」 

• 編輯分享按鈕的位置與外觀，並單擊  保存設置。

• 現在應該可以看到剛剛設定的應用程式位置
• 點擊  </>  選項，將「分享程式碼」複製到剪貼板。

4A-2. 安裝-Shareaholic按鈕代碼(回到Blogger)

• 點擊Blogger「Template」模板▶點選「Edit HTML」
• CTRL-F或Command-F和搜索"post header"，
  找到程式碼：<div class='post-header-line-1'>

• 按Enter鍵創建一個新行並貼上剛剛的「分享程式碼」
• 點擊-儲存範本-就完成囉＾＾

因為叔叔用的是響應式RWD網頁的模板，所以不需要手機版。

所以想要手機版的按鈕得再麻煩一次安裝步驟囉！

***可以參考 Shareaholic 官網教學文章▶Go

Related Content 相關內容

1.建立相關內容：可參考上方教學步驟(4A-1~4A-2)

• 連結官網  https://www.shareaholic.com/publisher_tools
• 點擊添加Add App Location，點選相關內容 
• 編輯按鈕外觀(一般在底部比較不干擾)，儲存設定。
• 找到剛設定的應用程序位置
• 點擊  </>  選項，複製程式碼到剪貼板。

2. 安裝-Shareaholic按鈕代碼(回到Blogger)

• 點擊Blogger「Template」模板▶點選「行動服務」手機版的「Edit HTML」
• CTRL-F或Command-F和搜索"post header"，
  找到程式碼：<div class='post-header-line-1'>
• 按Enter鍵創建一個新行並貼上剛剛的「分享程式碼」
• 點擊-儲存範本-完成手機版

More Option 
    讓分享按鈕顯示在文章底部

• 按照指示進行按鍵顯示在上方，而不是只搜索「post-header-line-1 div」標籤，
• 搜索查找程式碼：<B：如果COND ='數據：post.hasJumpLink'>
  
• 將滑鼠置於的最後一行的末尾，其中包含：</ B：if>
• 按Enter鍵創建一個新的空行。
• 在Shareaholic按鈕的HTML代碼粘貼到空行。
• 可以肯定，在Shareaholic <DIV ...>結尾一個“/>”當粘貼入。
• 按  保存更改 按鈕，這個代碼應用到你的網站。 

延伸推薦：[BLOG懶人工具包] 推薦Blogger免費社群分享按鈕-實戰教學