2013年1月1日 星期二

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

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

Wayne Fu 0 A+

(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 數據差別很大的原因


➢➢ 快速選單:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP