ba-post 文章 [HTML9]

2014-06-14

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

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

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

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


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

Share+1-

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

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

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

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

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


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

Share+2-

登入以後,請在右上角的 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_按鈕名稱'/>」這個語法就可以了。按鈕如何排序,也以上下搬動這串語法來進行調整。

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

Share+3-

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


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

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

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

身為部落格作者,我們可以提供方便、不干擾、而且有利統計的系列分享按鈕,讓讀者在喜歡和欣賞我們作品的同時,能夠快速且容易地分享、增加文章的被閱讀率。同樣地,作者也常常是讀者,所以當我們看到好文的時候,也要不吝惜點擊與分享喔!