2006-12-15

在文末加入文章訂閱圖示

在預設的版型裡,每篇文章的結尾處,都可以透過管理介面去設定文章格式和功能(動作:版面配置->網頁元素->Blog 文章區塊->修改),像是文章的發表時間、要不要顯示作者、回應,或是一些項目的顯示用詞(comment->意見or回應),另外,還有兩個有圖示的功能:快速編輯(管理者用的)、郵件發佈連結(透過 email 轉寄該文章內容)。現在各種網路書籤的服務大行其道,能不能一樣加入一些圖示供讀者訂閱或收錄自己 Blog 的文章,最好還可以和系統版型的圖示整齊地擺在一起呢?網站的收錄(訂閱 Feed 或是加入"我的最愛"書籤)比較簡單,畢竟 Feed URL 或是網站網址都是固定的,直接寫死連結就好,但是文章的訂閱牽扯到該篇文章的「永久連結」,這一定要發表文章後才會產生的網址,這時候透過 Blogger 的 Hack 才能做到了。

首先瞭解一下版型這部分的程式碼。打開範本的 HTML 程式碼(要展開 Widget 範本),找下面這一行:

<span class='post-icons'>

顧名思義,在這個<span>標籤裡面定義的是文章相關的圖示,這一行下面,會看到關於 email post links(郵件發佈連結)或是 quickedit pencil(快速編輯)的原始碼定義,我們要做的就是在這些圖示後面加入能訂閱文章的圖示,同屬於 post-icons 的區塊中。

步驟很簡單,首先,因為我想讓圖示都靠右,而且連結不會出現底線,因此先自訂 span.post-icons 的 style (有些範本預設沒定義)。接著仿造系統的圖示的定義方法(預設系統圖示定義的樣式表請參考這裡,參考 .email-post-icon 的 Style),在範本裡 CSS 的區段內再加入這些小圖示的 Class 定義,程式碼如下:

/* Adjust post footer*/
span.post-icons {
  float: right;
}
span.post-icons a{
  text-decoration: none;
}

/* Post footer icons*/
.HemiDemi-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-HemiDemi.gif") no-repeat left;
   padding: 8px;
}
.funP-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-funP.gif") no-repeat left;
   padding: 8px;
}
.delicious-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-Delicious.gif") no-repeat left;
   padding: 8px;
}
.Technorati-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-Technorati.png") no-repeat left;
   padding: 8px;
}
.Top-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-Top.gif") no-repeat left;
   padding: 8px;
}

從上面可以看到,我有五個小圖示(16x16),其中四個分別是用來加入 HemiDemi (黑米共享書籤), funP (推推王), Delicious, Technorati 四個書籤服務(HemiDemi 和 funP 是中文的),最後一個是利用 Javascript 讓閱讀的頁面跳到整個頁首,以上用到的圖片和參數要自行調整。

接著是重頭戲,貼入顯示圖示和連結的程式碼到文末去。先找到上面提到的那一行: <span class='post-icons'>,安排圖示的順序,像自己想看到的效果是:在首頁只顯示快速編輯和跳到頁首的圖示,當使用者點入特定文章的完整連結,才出現訂閱的圖示。所以在標籤 <span class='post-icons'> 和 <span> 之間,用下面的程式碼取代:

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

<b:if cond='data:blog.pageType == "item"'>

  <!-- email post links -->
  <b:if cond='data:post.emailPostUrl'>
    <span class='item-action'>
    <a expr:href='data:post.emailPostUrl' title='Email Post'>
      <span class='email-post-icon'>&#160;</span>
    </a>
    </span>
  </b:if>
 
  <!-- Bookmark icons -->               
  <a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&amp;url=" + data:post.url' target='_blank' title='Add to HEMiDEMi'>
    <span class='HemiDemi-icon'>&#160;</span>
  </a>
  <a expr:href='"http://funp.com/pages/submit/add.php?url=" + data:post.url + "&amp;s=" + data:post.title + "&amp;via=tools"' target='_blank' title='Add to funP'>
    <span class='funP-icon'>&#160;</span>
  </a>
  <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Delicious'>
    <span class='delicious-icon'>&#160;</span>
  </a>
  <a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank' title='Add to Technorati Favorites'>
    <span class='Technorati-icon'>&#160;</span>
  </a>
</b:if>

<a href='javascript:scroll(0,0)' title='Top of this page'>
  <span class='Top-icon'>&#160;</span>
</a>

搞定!所以在該文章的固定連結裡顯示完整文章的時候,最多會出現七個圖示(其中四個是書籤訂閱),而在首頁裡最多兩個圖示,分別是快速編輯和跳到頁首。(註:像 data:post.url/data:post.title 這種變數和前後 '+' 的空白不能刪掉,砍掉會有奇怪的錯誤發生。)沒有你要的書籤服務?可以參閱下面 Angelo 的文章,作者很用心地整理了大部分坊間有提供類似服務的程式碼喔~

參考文章:
各大共享書籤代碼

更新:
2007/05/31 - 更改順序,拿掉 MyShare 的圖示,並取代成另外一個當下流行的 funP 「推推王」。

回應: 8

草葉集 提到...

我想請問一下Blogger Hack是什麼?我找不到你說的span class=post-icons這一行,請問一下要如何做才能成功,拜託請教教我,謝謝

Abin 提到...

To 草葉集:
Blogger Hack 的意思是對 Blogger 的樣板原始程式做手動修改,以達到自己目的的動作。要看到 <span class=post-icons>,要先打開範本的 HTML 程式碼(版面配置、修改 HTML),而且一定要「展開小裝置範本」才看得到。我看你的網站原始碼裡面也有,請看清楚再找。

Davin Chao 提到...

To Abin大:
如果要加入推文到Twitter與Plurk,語法要怎麼改會比較好...
還請賜教!

Abin 提到...

To Davin:
抱歉我沒有在用 Twitter 與 Plurk,並不知道該怎麼改。不過我看過 重灌狂人 的 Blog 有介紹過:如何在網站放twitter、Plurk噗浪「推文按鈕」?,你可以參考它的語法,直接塞到樣板裡應該也能 work。

Davin Chao 提到...

To Abin :
那問題我參考了許多書籤的語法,我搞定它了~

Unknown 提到...

請問 Abin大:
我在span class='post-icons' 和 span 之間PO上Abin大的程式碼,但Label標籤不見了。請問一下這問題要怎麼解決呢??謝謝:)

Abin 提到...

To Gavin:
標籤會消失?您應該是貼錯位置了。標籤是在 span class='post-labels' 裡,而 post-icons 是在標籤區段的後面,如果順序不一樣,那應該是樣板不同的關係。原來 post-icons 裡面應該是有「電子郵件發佈」和「編輯文章」的圖示和連結定義,如有有別的,那可能是您找錯地方了。

WhiteRock 提到...

hi,Abin
我不太懂此程式碼需要放置的位子耶,"範本裡 CSS 的區段內再加入這些小圖示的 Class 定義"可不可以請您再指出確切的位子呢? 例如: 某某碼後方,謝謝您囉!

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!