September 1, 2008

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

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

今天再向大家介紹另一個工具 JS-Kit, 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>


No comments:

Post a Comment