2013年1月28日

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

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


➢➢ 快速選單:

8 則留言:

  1. WFU大,現在我在測試這個語法~
    我在用"三、安裝程式碼"的1與2就發生了問題
    也就是我先把1的程式碼放在前
    無論我把2那一串的程式碼緊接放在1語法的前面還是後面
    都會照成系統錯誤
    這是我截的圖https://lh4.googleusercontent.com/-WN7-AAF42nQ/UWpfJULw7SI/AAAAAAAAB_A/o2mMYmZBPo4/w701-h336-p-o/sshot-761.jpg

    在左上角那邊....

    謝謝~~~

    回覆刪除
  2. <3203716787629464630>(以上內容請勿刪除,從括號之後開始留言)哇~你的樹狀標籤 logo 改得好有創意啊~太古椎了!網站小圖示也很棒~

    言歸正傳,你把程式碼拿掉我就看不出是哪裡的問題了,把程式碼裝回去後再給我看吧!

    回覆刪除
  3. <7533138666610696230>(以上內容請勿刪除,從括號之後開始留言)謝謝你喜歡XDD,最近電腦有些怪,我去重灌後再來測試~

    回覆刪除
  4. WFU~今天我收到了OOcharts寄來的信,說他們會在7月22日停止服務耶>< (雖然去他們的官網看,他們說會推出新的OOcharts…現在已經有beta版了)

    但無論如何,我們正在用的這一版應該真的會在五天之內關掉吧,這是不是代表這個單篇文章瀏覽數不能再有作用呢?

    回覆刪除
  5. <5810769524431334857>(以上內容請勿刪除,從括號之後開始留言)謝謝通知~真是糟糕的消息,OOcharts要收費了...

    還好我之前有另外找替代方案, 不過要花時間才能把整套方案弄出來,操作的步驟也是很多,等我一陣子吧。

    假使如期 7/22 停止服務的話,在我發佈教學文之前,可能會有幾天空窗期沒有單篇文章瀏覽數~

    回覆刪除
  6. 作者已經移除這則留言。

    回覆刪除
  7. 這個要如何加在側邊欄熱門文章的標題旁呢,我試著把它加在 widget-content popular-posts 裡面的標題後面,好像也是無法出現?我加在一般文章的標題上有正常顯示。

    是不是我漏掉了甚麼?

    回覆刪除
  8. <6048648649411370932>(以上內容請勿刪除,從括號之後開始留言)擺放位置只能放在「四、擺放位置」提到的區段而已,想擺在其他地方,只能寫客製程式了喔~

    回覆刪除

張貼留言注意事項:

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