簡單好看的部落格文章評分工具 JS-Kit

幾個月前曾提過一個讓讀者對部落格文章表達看法的工具 ClickComments， ClickComments 預設了幾個可能的回應，讓讀者在不想打字的情況下，依然能對文章表達喜歡或不喜歡的意見。

今天再向大家介紹另一個工具 JS-Kit， JS-Kit 實際上是個整合型的工具，目前就先介紹為部落格文章評分（給星號）的部分。



JS-Kit 星號的配色很活潑， Rating 功能簡單明白，可以選擇 1-5 顆星來給分， JS-Kit 也開放了一些參數讓使用者自行設定，盡量貼近使用者的需求。參數設定的網頁在這，請大家對照著看，網頁上把參數的 code 都寫得很清楚，直接 copy & paste 就可以使用了。

1. 呈現樣式：
有星等及拇指（Score view）兩種，在星等樣式中，可以選擇要不要將特定讀者的分數與平均分數分開顯示，一起顯示是 Combined view，分開顯示是 Split view。

2. 星號的顏色：
若是選擇 Combined view，就用 starColor 來設定星號顏色，若是用 Split view 的話， starColor 是控制平均分數的顏色，必須增加一個 userColor 來控制特定讀者的星號顏色。

5. 用自己的星號圖案：
可以使用自己喜歡的星號圖案，不過必須先準備五個星號圖檔， star.png 與 star-half.png 用來顯示平均分數， user.png 和 user-half.png 用來顯示特定讀者的分數，而 gray.png 則是初始狀態。再用 imageurl 來設定圖檔位置（要先找個網路空間儲存，例如 Google Page Creator），用 imagesize 控制圖檔大小。

6. & 7. 改變拇指的大小或圖案：
星號圖案可以換，拇指的圖案也能換，建議使用網頁上的 Thumbnail Generator 來進行。

10. 放到單篇文章的語法：
這是最重要的部分了，加上 permalink 參數之後，就能放在每一篇文章裡，讓大家評分， permalink 的設定必須是該篇文章的永久網址， Blogger 平台的就是 data:post.url 了。

經過一番拼拼湊湊之後，加上自己想客製化的參數設定，就能做出一個貼近自己需要的評分工具了。

我也把我的 code 給大家參考，我是選用 Combined view，星號的顏色是金黃色，我放的位置是每篇文章的下方（post footer）。其中 center small 的部分，依照一般模版的設定，可能是 <p class='post-footer-line post-footer-line-?'>， ? 是數字，代表 post footer 第幾行，而 <b:if> 的部分則是讓 JS-Kit 只在單篇文章時出現，不會出現在部落格首頁。

<p class='center small'>
<b:if cond='data:blog.pageType == "item"'>
Rate this post:
<div class='js-kit-ratings' permalink='data:post.url' starColor='Golden' title='Cool Stuff' view='combo'/>
<script src='http://js-kit.com/ratings.js'/>
</b:if>
</p>