2011年8月26日

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

A+
一、前言

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

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

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


二、刪除原始碼

到 Blogger 後台 → 範本 → 編輯 HTML

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


三、安裝程式碼


準備動作:

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


程式碼擺放位置:

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


選擇出現的頁面、條件:

B:此判斷式代表在「文章內文」才顯示這三項工具,其他地方都不會出現,例如 Blog 上方有一排「關於我」、「文章導覽」、「留言版」屬於公告性質的頁面都不會出現。

如果想控制按鈕出現在不同頁面,還有更多的判斷式可以利用,請參考這篇文章「如何讓Blogger只顯示標題」,作者整理了四種常用的判斷式:

<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 官方反應按鈕的使用率比「讚」按鈕或推文來得低,為了節省系統讀取效率已將之移除,並將資料轉移到推文系統(本文下方的評價功能也屬於推文系統的一部份),為使本文讀者有所對照,將反應按鈕的生前最後一瞬快照如下:


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


參考資料:
如何讓Blogger只顯示標題
同「Blogger自訂讀者反應、「讚」、「+1」按鈕(一)

沒有留言:

↑TOP

張貼留言注意事項:

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