Blogger「文章列表+快速顯示讚統計」__簡易安裝

(Pic from: designdownloader.com, Installation sous Linux : Autopackage)2016.4.8 公告：因 Google Drive 外連失效，請勿使用本篇的程式碼，請改用新版「Blogger 文章列表極速版﹍(1) 依日期排列」


以前所做的「文章列表＋讀者反應」雖然能夠勉強列出每篇文章的「讚」統計，不過執行速度真是個大悲劇。當網站規模不大時，這速度是可以忍受的；但文章累積到一定數量，速度慢就是個大問題。歸咎其原因，之前列表裏的的讀者反應有三種，讀取資料時得分別跟三個 server 送出 request(請求)，請求的數目還得乘上文章的數量...光用想像就知道這要等多久了。

為了效率著想，Google 的 +1 使用者相對上極少──刪除；讀者反應的點擊量也不大──刪除，使用刪去法後只需要等待「讚」按鈕顯示的時間。但，當網站有幾百篇文章、甚至上千時，等待 server 傳來這數百、上千個 request 也是一種沒效率，於是花了一點時間研究 facebook 資料庫，終於找到了方便的統計資料存取方式。以下直接說明新版「文章列表＋"讚"統計」的安裝方式，而 facebook 資料庫的存取另外再找時間專文討論。

2013.8.10 公告

由於近日存放在 Google Code 的 js 檔全部被刪除了，本文的外連 js 檔已改放到 Google Drive 空間。曾安裝過本文程式碼的讀者，請修改所有程式碼的 js 檔連結。為了避免日後有其他意外，也建議讀者參考「取代 Google Code 外連 js 檔的選擇__Google Drive」，自行備份 js 檔並上傳到自己的 Google Drive 空間。


2012.7.30 增補

本篇的文章列表均包含"讚"統計，如文章列表不需要讚統計，可參考「動態檢視 Blogger 文章列表──簡易安裝」→ 文末 2012.7.30 增補 → 四、個別安裝，有依日期排列、依標籤排列兩種格式。

簡易安裝篇

一、依日期排列

友站「KuangTC's Blog」使用了兩種文章列表的格式，一個依日期排列，一個依標籤排列；由於版面美觀，於是借用此兩個模版的程式碼來改。

1. 簡易安裝：新開一篇文章 → 複製以下程式碼貼上 → 存檔即完成

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB_main.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB_display.js' type='text/javascript'></script>
接著可以將這篇文章的連結放到部落格上方的水平選單上，就像本 Blog 一般。

欲先看效果請點此展示頁面：「文章列表＋"讚" 統計__依日期排列───展示頁面」

2. 自訂安裝：如果想要自訂字型、顏色、寬度、圖案等等細項，請參考「文章列表＋"讚" 統計__依日期排列──自訂安裝」



二、依標籤排列

這個模版除了依照標籤排列之外，還會標示最新的十篇文章。

1. 簡易安裝：新開一篇文章 → 複製以下程式碼貼上 → 存檔即完成

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label_FB_main.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_label_FB_display.js' type='text/javascript'></script>
接著可以將這篇文章的連結放到部落格上方的水平選單上，就像本 Blog 一般。

欲先看效果請點此展示頁面：「文章列表＋"讚" 統計__依標籤排列───展示頁面」

2. 自訂安裝：如果想要自訂字型、顏色、寬度、圖案等等細項，請參考「文章列表＋"讚" 統計__依標籤排列──自訂安裝」


三、依樹狀標籤排列＋推文數量統計

如果部落格有安裝「樹狀標籤」，也就是標籤為 "AAA-BBB" 形式的話，那麼可以使用這個版本的文章列表；如果同時也安裝過簡易安裝版本的「推文系統」，那麼推文的數量也會一併顯示；沒安裝過推文系統也無妨，因為沒有推文數目當然不會顯示出來。

1. 簡易安裝：新開一篇文章 → 複製以下程式碼貼上 → 存檔即完成

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_Push_main.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_push_count.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_TreeLabel_FB_push_display.js' type='text/javascript'></script>
接著可以將這篇文章的連結放到部落格上方的水平選單上，就像本 Blog 一般。

欲先看效果請點此展示頁面：「文章列表＋"讚" 統計__依樹狀標籤排列───展示頁面」

2. 自訂安裝：如果想要自訂字型、顏色、寬度、圖案等等細項，請參考「文章列表＋"讚"、"推文"統計__依樹狀標籤排列──自訂安裝」

看過展示頁面就可知道速度跟以往真是天差地遠，馬上就幫網站裝個文章列表吧！


注意事項：
  A. 貼上程式碼前，注意是否為「HTML」的編輯模式(而非 "撰寫" 的編輯模式)。
  B. 文章設定 → 「選項」 → 「撰寫模式」，注意是否為「解釋輸入的HTML」。


2012.5.11 增補

四、文章列表動態顯示

由於研發出了文章列表動態顯示的功能，因此目前部落格上方的水平選單已經不是原本的網頁連結，而是動態顯示的語法，執行速度比起原本要重新整理頁面的速度幾乎快上一倍，請見新的安裝方式：「動態檢視 Blogger 文章列表__簡易安裝篇」