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

一、前言

在 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 色碼。

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

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


三、自訂「讚」按鈕

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

<iframe expr:src='"https://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」按鈕（二）



參考資料：
在Blogger部落格裝上Facebook的「讚」按鈕
Like Button
+1按鈕官方網頁