2011年8月25日

Blogger自訂讀者反應、「讚」、「+1」按鈕(一)

A+
一、前言

在 Blogger 中,要如何知道讀者對單一文章的評價、感覺?除了 Blogger 預設的「反應」(Reactions)、「星號評等」功能之外,另外就是安裝有互動效果的「讚」、「+1」按鈕。

以上這四種工具,由於功力不足無法修改「星號評等」在單一文章的自訂樣式,而其他三種工具都能有彈性調整版面、樣式的 hack 方法,以下為自行摸索的筆記。


二、自訂「反應」功能

請參考此教學網頁,安裝「反應」功能:「加入反應(Reactions )按鈕一窺讀者的想法!

根據此網頁,要自訂反應功能,得修改的原始碼為這一段:
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'>
<tr> <td align='right' valign='top'>
<span class='reactions-label'>
<data:top.reactionsLabel/>
</span>
</td> <td><iframe
allowtransparency='true' class='reactions-iframe'
expr:src='data:post.reactionsUrl' frameborder='0' name='reactions'
scrolling='no'/>
</td> </tr>
</table>
</b:if>
</span>


以本 Blog 文章「有錢人想的和你不一樣 __ (一)前言」為例,使用瀏覽器檢視原始檔(Source)後,可找到了「反應」功能在此文章的程式碼:


如果我們利用這一段程式碼取代原始碼,就能自訂「反應」功能。以上這段程式碼可以修改的部分為:

A:「評分:」可改為自訂的文字

B:「options=」後面這一大串亂碼是跳脫碼,一共有五組亂碼字串被加號 "+" 隔開,每組跳脫碼由一個 "%" 符號加上兩個英文字元組成。

第一組字串的開頭「%5B」及第五組字串的尾端「%5D」分別代表 "[" "]" 這兩個括號;第一個~第四組字串的尾端「%2C」代表 "," 逗號,就是當初在後台用來分隔這五組字串的符號。

其餘的部分就是當初設定「反應」功能填入的五組字串,第一組亂碼字串「%EF%BC%95%E9%A1%86%E6%98%9F」代表本 Blog 設定「反應」功能的第一個字串「五顆星」這三個中文字元,其餘類推。每三組跳脫碼代表一個中文字元,所以這裡一共有九組跳脫碼。

由於這五組字串是 WFU BLOG 設定的,如果想要修改自己 Blog 「反應」功能的字串,請檢視自己網頁的原始檔,搜尋這一段文字 "blog-post-reactions.g?options=",找到之後就可以看到後面跟著的亂碼字串。如果想要安裝「「全文列表(TOC)+讀者反應」系統」並加入自己的「讀者反應」功能,那麼就得將本文中的亂碼字串,置換為自己網頁原始檔中找到的亂碼字串。

另外,當我們有版面配置的問題,設定五個字串導致一行塞不下,希望顯示三個就好的時候,可以從這個部分下手,刪掉兩個不需要顯示的字串達到版面美觀的目的。但實際上要達到這個目的可以直接從後台更改即可(參考本文開頭的 教學網頁),不必 hack 程式碼這麼麻煩。

但是如果想在不同的頁面顯示不同的「反應」版面配置,例如在文章網頁想要顯示完整的五種反應讓讀者勾選,另外在統計資料的網頁想要顯示簡潔的三種反應資料就好,例如本 Blog 的「文章導覽」配置,那麼就可以 hack 這一段程式碼。

C:這裡可以改字體顏色,「%23」代表 "#" 符號,後面的六個數字 "444444" 就是可更改的 html 色碼。想查詢色碼可參考「HTML 色碼表」。

D:這裡是最有價值的一個部分,此網址就是該篇文章的網址,因此整段程式碼搬到別的地方,就可以在別的網頁顯示該篇文章的讀者反應了。範例同樣請見「文章導覽」網頁。

以上這 4 點的程式碼其實必須連在一起,斷行是為了方便閱讀以及易於說明。


三、自訂「讚」按鈕

安裝「讚」按鈕的程式碼為以下:

<iframe expr:src='"http://www.facebook.com/plugins/like.php?locale=zh_TW&amp;href=" + data:post.canonicalUrl + "&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80&amp;share=true"' scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>


「讚」按鈕要擺在什麼位置,請參考「Blogger 範本__(三)文章及留言區塊的程式碼」,選擇自己喜歡的地方


接著,根據官方網站的說明網頁「Like Button」,以上程式碼可以修改的參數有以下:

1. href:" + data:post.canonicalUrl + " 若置換不同的文章網址,就能顯示其他網頁「讚」的統計數字,同樣可在「文章列表+快速顯示"讚"統計」看到效果。

2. layout:有三種選項

A. standard:按鈕佔面積最大,顯示訊息最多。
B. button_count:按鈕所佔面積小,統計數量顯示在按鈕 "右" 方。
C. box_count:按鈕所佔面積小,統計數量顯示在按鈕 "上" 方。

3. show_faces:參數 "true" 代表顯示個人頭像, "false" 關閉此功能(layout 選 standard 這裡才能選 "true")。

4. width:自訂按鈕寬度。

5. height:自訂按鈕高度。

6. action:參數 "like" 代表出現「讚」字樣;參數 "recommend" 代表出現「推薦」字樣。

7. colorscheme:參數 "light"、"dark" 可改變按鈕顏色

8. locale:參數 "zh_TW" 可顯示繁體中文「讚」字樣;參數 "en_US" 顯示英文「like」字樣;改成其他國家就變成不一樣的文字。

2015.12.12 補充:

9. share:參數 "true" 代表顯示分享按鈕, "false" 則不顯示。



四、自訂「+1」按鈕

請參考「官方網頁」安裝「+1」按鈕。所有參數在官方網頁都有中文說明,因此不再贅述。

如果要像「文章導覽」一樣,在同一個網頁顯示不同網址的「+1」按鈕,請在官方網頁往下找到此標題「可以在單一網頁上放置多個不同網址的 +1 按鈕嗎?」,按下去後可看到 「href=」 後面加上自訂的網址即可。


以上是個別功能的基本的修改,下一篇要把這三項功能的程式碼整合起來,並對版面配置進行細項調整。

Blogger自訂讀者反應、「讚」、「+1」按鈕(二)



參考資料:
加入反應(Reactions )按鈕一窺讀者的想法!
在Blogger部落格裝上Facebook的「讚」按鈕
Like Button
+1按鈕官方網頁

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。