[網站應用] 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 網站確認 

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

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


4A-分享按鈕

4A-1.建立共享按鈕 


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

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



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 ...>結尾一個“/>”當粘貼入。
  • 按  保存更改 按鈕,這個代碼應用到你的網站。 
Share on Google Plus

0 意見 :