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

一、前言

隨著「讚」按鈕的普及，瀏覽網頁的時候在各種位置都可能看到「讚」，一些內嵌功能讓每則留言都有讚，以某種角度而言，「讚」按鈕太多會造成部分讀者不好的觀感。

當然，「讚」按鈕更偏向是社交工具而非單純讀者反應的工具，如果屬於只想好好閱讀文章的讀者，或許在文章結束的地方有個「讚」按鈕就好，覺得文章不錯就可順手按一下，不必到處都有；並且不一定每篇文章都需要有「讚」按鈕，例如索引、公告性質的文章。

因此，本文的目的便是將讀者反應、「讚」、「+1」按鈕這三項工具集中在文章末端，並讓他們只出現在特定文章的頁面。


二、刪除原始碼

到 Blogger 後台 → 範本 → 編輯 HTML

接著請參考「第一篇」，將已安裝的讀者反應、「讚」、「+1」原始碼刪除（但+1按鈕在</body>前的原始碼請保留）。


三、安裝程式碼


準備動作：

如果還沒裝過「+1」按鈕的話，請參考「官方網頁」，把第一段該放到 </body> 標籤之前的程式碼放上去；第二段程式碼本文會說明。


程式碼擺放位置：

A、K：整段程式碼可放在自訂欲顯示的位置，如跟本 Blog 相同放在文章末端，請放在 <div class='post-footer'> 之前，不過 A、K 這兩行不用 copy。


選擇出現的頁面、條件：

B：此判斷式代表在「文章內文」才顯示這三項工具，其他地方都不會出現。

如果想控制按鈕出現在不同頁面，還有更多的判斷式可以利用，以下為四種常用的判斷式：

<b:if cond='data:blog.pageType == "item"'> 目前頁面在內文
<b:if cond='data:blog.pageType == "archive"'> 目前頁面在歷史文章列表
<b:if cond='data:blog.pageType == "index"'> 目前頁面在分類標籤列表
<b:if cond='data:blog.homepageUrl == data:blog.url'> 網址等於首頁

C：此判斷式代表「有標籤」的文章才顯示這三項工具，當它不等於(!=)空白("")的時候，就代表該文章是有標籤的，會執行接下來的程式碼。

這個判斷式有什麼好處呢？如果 Blog 有一些公告性質的文章（例如「2011 BLOG 更新紀要索引」），或是 Blogger 可開一篇文章充作留言版（例如「三國志11 留言板」）」，這些文章總不需要「讚」吧？此類文章不分配標籤，經由 C 行的判斷式就可過濾掉這些文章，不顯示這三項工具。


顯示三項工具：

D：在 iframe 標籤裡面的內容為「讚」按鈕的程式碼。

E：在 g:pluseone 標籤裡面的內容為「+1」按鈕的程式碼。WFU 選擇的是 medium 尺寸。

F～H：讀者「反應」功能的程式碼，主要內容為 G 行的 iframe 標籤。加上 F、H 行的原始碼可從後台控制是否顯示「反應」功能。這裡跟「第一篇」不同的是，網址的部分這裡變成了 "data:post.url"，因為上一篇是用個別文章舉例，而放在後台範本的程式碼必須用 "data:post.url" 變數讓每篇文章都能正確顯示，就像 D 行的「讚」按鈕也有這個同樣的變數。

以上 D ～ H 都可改成自己的設定，設定內容請參考「第一篇」。


版面配置：

為了讓版面整齊，預計讓「讚」、「+1」按鈕放在同一行，讀者「反應」功能自己一行。但是將「讚」、「+1」的程式碼連在一起時，在 FireFox 瀏覽器總是會分成兩行顯示，其他瀏覽器可同行顯示。試了很多方法最後用 table 標籤總算可以強制擺在同一行顯示。

D：第一個 tabel 標籤起始處，設定字體大小(font-size)； tr 標籤設定這一行垂直對齊方式(vertical-align)； td 標籤分別設定每個欄位不同的寬度、對齊方式；「推薦：」字樣可改為自設文字，或是刪除也可。

另外 WFU 將「讚」按鈕的寬度、長度分別設為「width:75px; height:22px;」

E：第一個 tabel 標籤結尾處；這一行 tr 標籤結尾處； td 標籤設定欄位寬度、對齊方式。

G：第二個 tabel 標籤，設定字體大小； tr 標籤沒有設定，因為「反應」功能可能有預設的配置方式，所以無法設定對齊方式； 對於「評分：」這一欄 的 td 標籤，設定為靠上方對齊才能剛好與「反應」功能高度匹配；而「反應」功能的 td 標籤，請視自己的字串長度來調整寬度參數。


經過版面配置的處理後，這三個工具的位置看起來還滿順眼的吧！當然，您也可以自行動手更改參數，調整成自己喜歡的位置與配置方式。

******** 2012.3.30 增補 ********
由於 blogger 官方反應按鈕的使用率比「讚」按鈕或推文來得低，為了節省系統讀取效率已將之移除，並將資料轉移到推文系統(本文下方的評價功能也屬於推文系統的一部份)，為使本文讀者有所對照，將反應按鈕的生前最後一瞬快照如下：


*******************************