讓Blogger能顯示「單篇文章瀏覽數」__(二)安裝程式碼

(Pic from: psdgraphics.com,freevectorgraphics.org)2015.3.27 公告：由於 Google 試算表全面強制升級，本篇的程式碼已經無效，請前往新版安裝網頁「Blogger 單篇文章瀏覽數 V2」。


三、安裝程式碼

以下的程式碼可放在文章區塊中、任何想顯示文章瀏覽數的位置。不過對於不熟 Blogger 範本內容的讀者，可能會是個大難題。如果不清楚想擺什麼位置，建議先看一下「四、擺放位置」，再回來安裝程式碼。以下為安裝步驟──

1. 到 Blogger 後台打開範本文件 → 編輯 HTML → 在 </head> 之前插入以下程式碼：

<script src="http://wayne-fu.googlecode.com/files/oocharts-min.js"></script>
如果怕這個 js 檔連結以後消失了，可參考「Google Code 簡易使用教學」將 js 檔放在自己的 Google Code 空間。


2. 接續上個動作，在欲顯示文章瀏覽數的地方加入以下程式碼：


以上 K 行為了節省空間，將程式碼壓縮了，如果想瞭解原始碼的話，請下載「這個原始檔」。雖然附檔名為 js，但內容包含 HTML 及 Blogger 語法，所以是不能外連的。


3. 先還不能存檔，以上很多重要參數要改，請見以下行號的說明──

A：藍字的 logo 圖片網址可改為自訂圖案；如果不需要圖片，可將整個 <img> 元素刪除，或改為自訂的提示文字也可；綠字的 pv1 請參考 F 行的說明。

D：紅字部分請填入「上一篇」得到的 OOID。

E：紅字部分請填入「上一篇」得到的 Google Analytics Profile ID，為八位數的字串。

F：如果一篇文章有不只一個位置想放瀏覽數據的話，那麼可以將第 2 點的程式碼全部複製到另一個位置。但是 A 行與本行的綠字 "pv1" 必須改為不同的字串，例如改為 "pv2"。同理，想擺放第三個位置，可改為 "pv3"。

H：藍色的數字如改成其他數字，瀏覽數據就會乘以多少。例如改成 1.5 就會乘以 1.5 倍；改成 5 就會乘以 5 倍。應該不會有人想低調一點，改為 0.5 吧？

以上行號的參數改完即可存檔，欲看效果可看每篇文章的右上角及文末資訊區的最後面；也可按「首頁」或「文章標籤」看效果，列出圖文摘要時也能看到文章瀏覽數，讓訪客有參考的依據。


四、擺放位置

2013.4.13 補充

擺放位置可參考「Blogger 範本__(三)文章及留言區塊的程式碼」
這點要說明比較麻煩一些，比較簡單的方法是舉例我擺放的位置來當作參考──

1. 文章標題下方：後台範本 → 編輯 HTML → 搜尋以下字串

<div class='post-header'>
可能會搜尋到兩個，第一個是行動版的，可以不管。將「三、安裝程式碼」第 2 點的程式碼放在以上字串第二個搜尋結果的下一行，就會出現在文章標題下方。

而如何調整版面位置、文字大小、顏色等等，這就需要一點基礎的 HTML、CSS 概念了，例如想要像本站的效果浮動在最右邊，必須將程式碼 A 行的所有內容放在以下 HTML 碼裡面──

<span style='float: right;'>程式碼 A 行內容</span>

2. 文末資訊區：由於這個區塊的內容很多很雜，只能說個大概，可將程式碼放在──

<div class='post-footer-line post-footer-line-1'>
或

<div class='post-footer-line post-footer-line-2'>
或

<div class='post-footer-line post-footer-line-3'>
的後面。跟第 1 點一樣，以上字串可能會搜尋到兩個結果，第一個是行動版的，可以不管。


五、感想

使用這個功能一段時間後，發現一篇文章的數據很不尋常──



GA 的數據 156，Blogger 後台數據多了不下十倍，我相信這其中仍有「Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因」沒談到的因素在裡面，不過這篇有點算特例，在此就先不討論想法了。

正常來說近兩千個閱覽數在本站會算是很熱門的文章，不過我相信不會是這篇文章，因此 GA 的數據，無論如何在各方面來講，都會是比較令人信服的。

最後，要感謝這陣子被我抓來測試功能的朋友們，讓我知道寫這個功能需要補充、完備的部分。「四、擺放位置」的說明，總歸是比較籠統，有時間會再來整理一下範本內各區塊的程式碼，除了對照會比較清楚，將來有其他 hack 文章時也可成為方便的參考資料。


「讓Blogger能顯示單篇文章瀏覽數」系列標題：
一、準備動作
二、安裝程式碼
三、Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因


➢➢ 快速選單： １ ２ ３