2014-06-14

打造部落格(二之一):系列分享按鈕 AddThis 的安裝方式

9 則留言
部落格文章非常需要網路轉貼,才有機會打開影響力。一篇文章再好,如果缺乏分享,也只能埋沒在資訊大海裡面。而且,對於作者來說,讀者的讚賞和分享是非常重要的肯定,也讓作者更有動力繼續撰寫、表達觀點。因此,除了要讓版面更容易閱讀之外,也要讓讀者能夠快速分享喜歡的文章。

除了官方(如 Facebook 和 Google+)按鈕之外,「系列分享按鈕」是一個很好、甚至重要的補充工具。系列分享按鈕之所以重要,是因為它能夠提供官方按鈕以外更多的選擇,方便讀者選擇慣用與喜歡平台來轉貼文章,甚至加入「稍後閱讀」,或者「友善列印」。這篇文章主要談「系列分享按鈕」的安裝 ,至於官方按鈕請見另外一篇

(一)怎麼樣才是好的分享按鈕?

就我自己而言,好的系列分享按鈕,要有三個性質:
  1. 不佔面積,不會影響閱讀和版面
  2. 可以讓作者觀察按讚數據,以及追蹤數量變化
  3. 正確抓取分享的標題、圖示、與摘要
這幾點,官方按鈕都可以做到(雖然仍然需要一些調整),但第三方服務提供的按鈕就不太容易。所以,基於上述三點,我沒有選擇一些常用的第三方服務。


就 1 而言,ShareThis 安裝雖然方便,但它比較大而且位置不能指定,只能放在文章頁尾(footer,就是有作者、時間、標籤的那個小區塊)上方,無法放在頁尾裡面,所我沒有採用。就 2 而言,AddToAny 安裝也容易, 但從它不需要(也不能)註冊來看,似乎不能提供數據觀察與變化追蹤。就 3 而言,這是我為何捨棄原先 Blogger 分享按鍵的原因,因為它有時候抓取不到正確資料(不知道為什麼),例如每篇文章的「搜尋說明」--這是專門為文章所寫的摘要,不是文章第一段的截取--常常沒被抓到。

總體而言,能夠同時做到三項的,我找到的只有 AddThis不過,就在我裝完的幾天之後,AddThis 的官方頁面忽然改版,導致目前能夠得到的按鈕 HTML 語法過於簡化,無法讓我們自訂「分享時的網頁連結」。也就是說,新的按鈕只會抓取當時所在頁面的網址,這會導致當按鈕出現在首頁的時候,每篇文章各自的按鈕按下去都是分享你的「部落格首頁」而不是「單篇文章」。(如果你只打算讓按鈕出現在單篇文章之中,這就不是什麼太大問題。)

所以,我在這裡不只提供安裝教學,也會提供舊版 HTML 語法。

(寫到這裡,慶賀一下:世足,我正在留學的國家荷蘭 5:1 大勝西班牙!一雪四年前冠軍戰之敗。我所在的城市,路上塞滿汽車,荷蘭人狂按喇叭…)

(二)安裝 AddThis 的第一步:申請 AddThis ID

有了 AddThis ID,按讚與分享狀態才能被追蹤,也才有「報表」可看。請先到 AddThis 的首頁,右上角點點選 Sign In,請直接選擇右上角的 Create Account 申請一個帳號,因為就算直接使用社交網站帳號,登進去以後它還是會要你填寫 email 等資訊。


登入以後,請在右上角的 My Site 下拉選單,選擇 Manage Profiles。然後就會看到以下畫面,其中的 Profile ID 就是我們要記下來的號碼。需要的話,可以點進 My Site 做出更多細節選項,例如是否寄送報表到信箱、或者改變 Profile 名稱。也可以點選 Add Profile 增加 ID,如果你有多個部落格的話。

(三)安裝 AddThis 的第二步:調整按鈕語法

按鈕的語法如下:

<!-- AddThis 分享按鈕 begin -->
<div class='addthis_toolbox addthis_default_style addthis_16x16_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.canonicalUrl'>
<a class='addthis_button_facebook'/>
<a class='addthis_button_google_plusone_share'/>
<a class='addthis_button_twitter'/>
<a class='addthis_button_linkedin'/>
<a class='addthis_button_plurk'/>
<a class='addthis_button_instapaper'/>
<a class='addthis_button_compact'/>
<a class='addthis_counter addthis_bubble_style'/>
</div>
<script type='text/javascript'>
var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5391ffb35b3263aa' type='text/javascript'/>
<!-- AddThis 分享按鈕 end -->

橘色部份表示讀者按下按鈕的時候,AddThis 會自動抓取你的文章連結,所以即使首頁中的每篇文章都出現這些按鈕也沒有關係,它們會各自連到獨立的文章。藍色部份表示按鈕尺寸,目前有三種,16x16、20X20、32x32,可以自行選用適合的。紅色部份請換成你剛剛得到的 ID 號碼(如果你沒有改,那所有流量都會算到我這裡來…)。

粗體部份,則是按鈕名稱,基本上,只要 AddThis 有提供的按鈕,都可以被加進這裡,要幾個都可以。那麼 AddThis 有提供哪些按鈕呢?請在 AddThis 首頁選擇以下紅框,然後點選  select your own,接著就會看到 Available Services 有一堆按鈕可選。把你喜歡的按鈕名稱記下來,放進「<a class='addthis_button_按鈕名稱'/>」這個語法就可以了。按鈕如何排序,也以上下搬動這串語法來進行調整。

注意:按鈕名稱必須全部小寫!


(四)安裝 AddThis 的第三步:放置按鈕

最後一個步驟,就是把它放到你希望的位置。我的建議是放在文章頁尾,因為系列分享按鈕通常很長,如果放在標題下方,容易干擾讀者注意標題。而且…如果讀者光看標題就馬上分享,好像也不是這麼「真誠」吧。我放的位置,是文章頁尾的第二區塊。方法如下:

進入「編輯 HTML」,搜尋「<div class='post-footer-line post-footer-line-2'>」,會有兩行,請用第二個,把整段 AddThis 按鈕語法加在此行下面,這樣就可以了!數字 2 就是區塊位置,所以也可以找 1 或 3 的語法段落擺放,就看你打算如何安排位置。以我而言,因為第一區塊放置官方按鈕(點進單篇文章才會出現),第三區塊則是文章資訊(作者、時間、標籤),所以就把 AddThis 放在中間了。

(不太會尋找 HTML 語法的新手,請參考本系列的第一篇文章。)

身為部落格作者,我們可以提供方便、不干擾、而且有利統計的系列分享按鈕,讓讀者在喜歡和欣賞我們作品的同時,能夠快速且容易地分享、增加文章的被閱讀率。同樣地,作者也常常是讀者,所以當我們看到好文的時候,也要不吝惜點擊與分享喔!
9 則留言 :
  1. 1. 語法那段在註解段上方少了一個結尾的script包夾語法( 留言無法直接打那個語法希望我這麼說你看得懂@@)

    2.有錯字哦^^" →「把你喜歡的按鈕名稱記下來,放進「.......(語法留言區無法使用)」這個法語就可以了。」

    3.我將修改後的語法放進範本裡面之後回文章看按鈕完全神隱了! 我三個區塊都放過,按鈕不出來就是不出來! 是不是還要在官方首頁在安裝甚麼語法才可以?

    回覆刪除
    回覆
    1. 謝謝提醒!剛剛稍微修改了一下語法,這邊測試 OK,你再試試看!

      刪除
  2. 我剛把你修改後的語法貼到你建議放的位置,仍然沒看到按鈕耶!! 請問這個有需要同時也在版面配置那邊新增一個html/javascript小工具嗎?

    回覆刪除
    回覆
    1. 我終於弄懂為什麼了:放置 AddThis 於其下方的「那段語法」有兩個,要用第二個!放在第一個下面無效…(可能是給手機版用的?)麻煩澳大再試一次吧 :)

      刪除
  3. 上面那段好難懂....『放置 AddThis 於其下方的「那段語法」有兩個,要用第二個』←這個是在講甚麼??
    建議你在文章內修正說明比較好,不是每個讀者都會看留言版的哦!! 我繼續來說文解字去...

    回覆刪除
  4. 你的意思是要擺在第二個footline2下方對吧?

    回覆刪除
  5. 換了安裝位置按鈕終於出現了! BUT...............怎麼我設定一堆按鈕只會出現前六個? 可你的全部都出現呢!!
    是不是少了一個顯示多少按鈕的語法? 還是有其他問題呢?@@

    回覆刪除
    回覆
    1. 我剛才試了一下,加裝幾個都可以成功啊!不需要其他語法幫助。你確定按鈕語法是正確的嗎?「按鈕名稱」本身正確嗎?我提供幾個我在用的按鈕名稱:pinterest_share、tumblr、baidu、blogger、email、pocket、printfriendly。
      PS. 我忘記 AddThis 中還有一個 addthis 本身的「分享選單按鈕」(不過這不影響按鈕出現與否或數量),名稱是「compact」,已經加入正文之中了。

      刪除
  6. Very interesting! Looking forward the coming part.

    回覆刪除