Quantcast
Channel: WFU BLOG
Viewing all 787 articles
Browse latest View live

打造舒適閱讀體驗__讓 Chrome 只放大縮小文字(Zoom Text Only 套件)

$
0
0
由於每個網頁預設的字體大小不一,為了讓眼睛能舒適、長時間閱讀,縮放網頁文字是瀏覽器必要功能。Chrome 能藉由按下 Ctrl++Ctrl+-來縮放頁面大小,不過這並非友善的閱讀設計,因為文字雖然變大了,但常常閱讀區塊也隨之變大,導致區塊右邊超出螢幕範圍,而看不到右邊的文字。

因此要打造舒適閱讀的體驗,必須只針對文字來縮放,而頁面所有其他元素保持不變,這才是最佳解決方案。本文要介紹的 Chrome 套件「Zoom Text Only」,正是符合以上敘述的要求。



一、安裝套件





按下右上角的「免費」即可安裝




上圖為展示效果之用,如果覺得 WFU BLOG 的文字不夠大,使用 Zoom Text Only 後,可無限放大文字比例,但文章區塊寬度仍保持不變。






二、縮放文字操作


1. 使用滑鼠

安裝完畢後,右上角會出現一個放大鏡的圖示,如下圖紅框──



點擊圖示後,有三種操作方式:

  • 放大文字:點擊圖中的 "+" 按鈕
  • 縮小文字:點擊圖中的 "-" 按鈕
  • 恢復預設大小:點擊圖中的 "Reset" 按鈕


2. 使用快速鍵

比較方便的操作為使用鍵盤快速鍵,預設的組合鍵如下圖:



  • 放大文字:Alt+=
  • 縮小文字:Alt+-
  • 恢復預設大小:Alt+0



三、操作心得


這個套件的設計還談不上五顆星,但目前在 Chrome 找不到更好的選擇。操作上可以改進的地方是組合鍵的設定,因為預設按鍵組合並不方便。

當使用完 Chrome 預設的 Ctrl++Ctrl+-縮放頁面後,再使用 Alt++Alt+-這樣的組合鍵來微調文字,是比較方便的操作。

但這個套件無法定義鍵盤最右邊那個區塊的加號 "+",這讓我們得想辦法使用別的按鍵組合。最後 WFU 使用的按鍵組合如下:



  • 放大文字:Ctrl+
  • 縮小文字:Ctrl+
  • 恢復預設大小:Ctrl+`




讀者也可依自己習慣來設定組合鍵,不過使用特殊鍵時,務必使用上圖作者提示的字串名稱,例如「向上鍵」改成 "up"、「向下鍵」改成 "down",否則組合鍵就無效了。

猜不透的 Google+ 專頁瀏覽次數?Blogger 站長賺到了!

$
0
0
今年的 4/1 開始,G+ 發布了一個新功能,在瀏覽 G+ 頁面時(無論是個人頁或是專頁),可以看到瀏覽總次數的統計。這樣的設計,當然是為了增加 G+ 使用者的黏著度,就像 RPG 遊戲般,玩家很大一部份的樂趣來自於等級的增加、數字的提昇。

不過,看完自己的統計數字後,總會好奇別人的數字是多少?結果應該會發現,好像落差挺大的!有的人挺正常,有的人出現天文數字(上億)!因此 +Ala Go 提出了本文的問題,相信這也是很多人的疑惑。

就算 "非常認真地" 經營一輩子的部落格,好像都無法輕易達到破億的網頁瀏覽量。以 WFU BLOG 為例,Blogger 官方流量統計都無法破百萬了,G+ 個人頁竟然在 4/1 當天就突破了三千萬,也許這是 Google 送的愚人節禮物吧?



一、G+ 官方定義


本文於四月初測試,不過當時正忙著「更換網域」,結果就擱置到現在。

其實 Blogger 的文章(網頁)瀏覽次數統計,本身已經可以算是「快樂流量」,不過跟 G+ 相比之下,這次 G+ 未免也顯得太過歡樂了!

到底 G+ 的統計基準點為何?來看看「官方的解釋」:

這個數字代表其他使用者瀏覽您內容 (包括相片、訊息與專頁本身)的次數。

看來主要差別在於 "相片" 這一項的定義與統計。由於本站的專頁帳號「Blogger 調校資料庫」沒什麼使用 G+相片,因此如本篇封面圖所顯示,專頁的瀏覽量十多萬,算是可以接受與符合認知的數據。






二、G+ 相片瀏覽數令人狐疑


根據這篇「Google+ Adds Page View Count」,G+ 頁面的瀏覽次數,是從 2012 年十月的資料開始統計。

雖然 WFU 有使用 G+ 相片(PICASA),不過部落格並非美食、旅遊、攝影這類的主題,相信不會有人特地來看我的相簿。那麼,沒什麼理由我的 G+ 個人頁面瀏覽次數,會比部落格 G+ 專頁多了數百倍之多:



時間過了兩個多月,目前 G+ 個人頁的瀏覽數比四月時,又多了一千萬,成為四千萬。為何 G+ 相片的統計,可以差別這麼大,看來需要深究一下 G+ 相片的瀏覽次數定義。



三、交叉比對


案例1

這是 Google 頭頭 Larry Page 的個人頁,擁有不可思議將近一千萬的追蹤人數,不過總瀏覽人數三千多萬,竟然輸給了 WFU...



合理推斷為,這三千多萬應該是真的來自追蹤人數的瀏覽,G+ 相簿所佔比例不大。


案例2

這是電腦玩物 +esor huang 的個人頁,WFU 相信沒意外的話,應該是台灣 No.1(說不定也是世界第一),到目前為止超過四億的瀏覽量。



其網站主題為資訊類,並非美食、攝影這些類別,因此不太可能讀者會常常進入他的 G+ 相簿。以「電腦玩物」的網站規模,WFU 與其相較之下,瀏覽數為 1/10 算是合理。


案例4

這是重灌狂人 +Briian Tsai 的個人頁:



其網站規模與「電腦玩物」都在部落格界數一數二,不過 WFU 竟可以小勝瀏覽數,也許是因為不來恩使用 WP 平台,較少用 G+ 相簿。


案例5

這是藥師吉米的個人頁,擁有兩個 G+ 社群(攝影、旅遊),剛好就是台灣 G+ 社群前兩大(成員數):



其網站規模大,而 G+ 瀏覽數出乎意外的少,合理推斷為他需要能放高品質圖片的大量空間,主要圖床不會在 G+。


案例6

這是海芋小站的個人頁:



其網站主題跟電腦玩物同為資訊類,因此一樣,不太可能讀者會常常進入她的 G+ 相簿。瀏覽次數八千多萬為目前所見第二高。依照其網站規模,瀏覽次數為 WFU 的倍數也算合理。



四、分析結果


從以上的抽樣來看,依照網站規模與瀏覽次數的高度關聯性來分析,「電腦玩物」、「海芋小站」、「WFU BLOG」算是相對而言,G+ 瀏覽次數很高的。

這三個網站有什麼共通點,讀者猜到了嗎?





答案揭曉:這三個網站都是 BLOGGER 平台。


從這個共通點推演下去,一切就變得合理了。Blogger 文章如果插入圖片時,會自動上傳到 PICASA,也就是 G+ 相簿。

G+ 在統計瀏覽次數時,給自己人 Blogger 一點好處(favor)是非常合理的,每瀏覽一篇文章,如果有十張照片,等於 G+ 相片被瀏覽了 10 張,那麼 G+ 瀏覽次數就 +10;如果文章被瀏覽 1000 頁,G+ 瀏覽次數就 +10000!難怪乎 Blogger 平台的站長,G+ 瀏覽次數可以坐直昇機一飛沖天!

沒有使用 Blogger 平台的站長,就算偶爾放一些圖片在 G+ 相簿,只要部落格的文章沒有固定使用 G+ 相片,那麼 G+ 瀏覽數每天增加的數量,必定遠低於 Blogger 平台的站長。

或許非 Blogger 平台的大站,只要勤於耕耘 G+ 粉絲,那麼在瀏覽 G+訊息、G+ 頁面的統計數字還是非常可觀,例如 Larry Page 與重灌狂人。但 G+ 總瀏覽數,在決勝關鍵點 G+ 相簿上,還是會輸給已經經營一段時間、文章放不少圖片的 Blogger 站長。

以下來舉個例子,並且剛好從這樣的結論做出驗證。回到開頭,這是 +Ala Go 的個人頁面:



雖然 Ala 不常使用 G+,不過同為 Blogger 平台,他的網站「La's jargon」文章數比 WFU BLOG 多,因此瀏覽數四千多萬勝過本站算是合理,也符合以上的推論。

2014.6.24 更新:測試時間點四月初時,「海芋小站」仍在 Blogger 平台,而目前的時間點,海芋小站已搬到 WP 平台,瀏覽數增加速度會開始比較緩慢。



五、總結


本文算是一個趣味性的推理紀錄,得出的結論可能會讓讀者驚奇與失望。一方面可能再怎麼努力,G+ 數據也只能緩慢爬升(非Blogger平台、或沒使用 G+ 相簿的帳號);一方面可能什麼事都沒做,就可以坐在山頂納涼(Blogger平台)。

1. 其他操作

所以,既然與努力與否無關,把他關掉眼不見為淨也是一種選項,可參考這篇「官網操作說明」,可知道如何在各種裝置關掉數據統計。


2. 專業數據依據

這篇「New Google Plus Views Count: Important Metric or Vanity of Vanities?」對 G+ 瀏覽數有深入的論述,算是從 Google 內部員工傳出來的資訊,有興趣可詳讀。

當初看這篇外文時,其內容尚未有本文的推論。今日看到其部份內容進行了更新(UPDATED),正是本文的推演結果,因此這份文件可算是本文的佐證及依據了。


G+ 專頁相關文章:

Google 自訂搜尋改良版__兩欄式更方便 (Blogger 專用)

$
0
0
在部落格設置搜尋框功能時,最佳選擇一定是「Google 自訂搜尋」。為何 Blogger 官方搜尋小工具不建議使用,原因在「新版 Google 自訂搜尋」有詳述,最主要的因素為,這個官方工具並非使用 Google 搜尋引擎,導致搜尋結果不佳。

不過 Blogger 官方搜尋小工具有個優點:「搜尋結果能立即出現在文章區塊上方」,這對訪客來說是個非常友善的操作設計,而這正是 Google 自訂搜尋很難做到的一點。

如果你也喜歡這個優點的話,WFU 已將 Google 自訂搜尋(以下簡稱 CSE: custom search engine)改良,讓搜尋結果能有 Blogger 官方搜尋工具的顯示效果,可使用本站側邊欄最上方的搜尋框測試。

以下先大致說明此設計的概念,想直接安裝請跳「二、Google 自訂搜尋準備動作」。



一、設計概念


1. CSE 效果不佳

其實很久以前就想要利用 CSE 來達成官方搜尋工具的顯示效果,因為 CSE 的「重疊」顯示雖然效果不錯,只是使用 "特效" 難免執行速度稍慢一些;另外操作上有點類似燈箱(light box),後來不太習慣操作燈箱的獨立區塊時,無法同時操作底層的區塊(例如選取、複製、貼上)。雖然 CSE 提供了「兩個欄位」的顯示方式,但是要在 Blogger 環境實現不容易。

若是要將搜尋結果區塊硬放在文章區塊上方,一來範本中不容易找到適合的位置,一來頁面效果不好,文章區塊上方會多出一塊難看的空白。


2. 利用 CSE API

因為有了上一篇「404 錯誤頁面的友善設計」的經驗,對於 CSE API 操作比較熟悉,要達成本篇的任務就有了突破點。

當訪客使用 CSE 搜尋後,在文章區塊上方動態做出一個區塊,來顯示搜尋結果,這樣就不會有個空白區塊在那邊。




然後跟 Blogger 官方搜尋工具一樣,如上圖,在搜尋結果區塊的右上角,製作一個可以關閉區塊的打叉圖示,如此這個 CSE 改良版,就跟官方搜尋工具的操作、顯示方式、顯示速度一樣好,但是另外擁有最佳的搜尋結果。






二、Google 自訂搜尋準備動作


1. 未安裝過 CSE:請依照「安裝 Google 自訂搜尋」的流程,來申請安裝 CSE,並注意下圖──



在「外觀和風格」→「版面配置」→ 請選擇「兩個欄位」→ 按下「儲存」


2. 已安裝過 CSE:不需要重新安裝 CSE,不過請依照上圖的流程,一樣選擇「兩個欄位」後儲存。


3. 取得 CSE 搜尋引擎 ID:如下圖的畫面,可取得搜尋引擎 ID──



按下「搜尋引擎 ID」→ 如畫面中紅線部分,記下自己的 ID 號碼。

小提醒:安裝完 CSE 後,建議先在官網的搜尋框,測試一下自己網站的搜尋結果,確保這個自訂搜尋引擎是能運作的。



三、安裝程式碼


1. 擺放位置

如果曾安裝過 CSE 的話,那麼請用本文的安裝程式碼,取代原本的程式碼。

如果沒安裝過 CSE 的話,之後的安裝程式碼,請放在想要顯示搜尋框的地方。如果不知道要放哪裡的話,可以在後台新增小工具 → 選擇「HTML/Javascript」→ 貼上本文的程式碼 → 將小工具拖曳到想顯示的位置。


2. 程式碼


請參考以上程式碼行號──

F:紅色 id 字串請置換為「二、Google 自訂搜尋準備動作」→「3. 取得 CSE 搜尋引擎 ID」→ 自己的搜尋引擎 ID 字串

G:由於過去發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流。

最後將以上程式碼貼到前面「1. 擺放位置」即可。

如果想先測試一下這個 CSE 改良版的話,可先在本站側邊欄最上方的搜尋框測試,搜尋結果會非常快速地立即出現在文章區塊上方。


Google 自訂搜尋相關文章:

Blogger 文章標題最佳化__(2) 符合 SEO 的 H1 H2 H3 標籤配置研究

$
0
0
在 HTML 標籤之中,H1~H6 標籤主要用途為標題的使用。同時搜尋引擎認為標題包含的 "關鍵字" 更為重要,因此網頁如何配置 H 標籤(主要是 H1、H2、H3),是 SEO 需要注重的一環。

在 Blogger 官方範本中,各個 H 標籤的安排,並非以 SEO 最佳化來配置。可能的原因為,新範本是幾年前的產物,設計上是依據 SEO 舊觀念。而在 SEO 規則每日一變的時空下已不適用。這使得注重 SEO 的站長,得自行重新配置一番。

以下先簡單介紹相關概念,再對 Blogger 範本進行重要的 H 標籤的調校。



一、H 標籤的 SEO 概念


探討 H 標籤如何操作 SEO 的文章很多,對於基礎概念,可參考這兩篇「標題與 SEO」、「H1標籤的重要性」先大致了解。

如前所述,SEO 規則天天在變,因此 SEO 文章用於了解大方向就好。至於細節部份,最好是能有所本,也就是說,該論點能附上原始出處的話,才是值得拿來實做的部份。

那麼可信度高的內容在何處呢?這一點還滿困難的,Google 的 Matt Cutts說過的話、發表的內容可以相信,因為他是搜尋引擎的頭頭,基本上 SEO 的規則他說了算。不過要得到彙整過、消化過的資訊並不容易,因為他發布的消息比較零散。

這篇「How To Use H1-H6 HTML Elements Properly」根據 Matt Cutts 做了一些整理,也是本文內容的依據:

  • H1、H2 等標籤不必依照順序,搜尋引擎仍可處理(依據影片內容)
  • 一個頁面最好只使用一個 H1 → 雖然根據影片,Matt Cutts 說不要到處都是 H1 就好,但一個頁面使用一個 H1 "才是這個標籤的本質"。相信當一個頁面只要不是刻意使用超過一個 H1,Google 有辦法判斷出該使用方式是否為惡意、還是正常使用。
  • H2 最好使用二~三個就好 → 避免分散權重
  • H3 最好使用二~三個就好 → 避免分散權重
  • H4~H6 不太重要

以下將檢視 Blogger 範本中的 H 標籤,利用以上數點,來進行最佳化。






二、Blogger 的 H3 標籤配置


官方範本 H3 標籤只有一處:用於文章標題。

1. 文章標題的建議

相信大家都看得出來,「文章標題」的內容及關鍵字,對於搜尋引擎是重要的,因此最好將此處的 H3 標籤改成 H2 或 H1。

至於如何決定是 H2 還是 H1,後面討論 H1 時會有比較詳細的分析。


2. 歷史源由

為何「文章標題」會淪落到使用 H3?這是一個讓人好奇的現象,就算是 Wordpress 平台,預設也是使用 H1 標籤,WFU 試著來還原歷史真相。

在過去,title 標籤是一個 SEO 的重要 "操作" 工具,許多人利用這一點,拼命將關鍵字塞進 title 之中,造成 title 標籤充滿了關鍵字,來達到較好的搜尋結果。

Blogger 的範本中,在文章頁面時,預設會使用 title 標籤來放置「文章標題」的內容。也因為搜尋引擎會索引這部份的內容,那麼「文章標題」的確不需要再放到重要的 H1 標籤之中。

不過幾年前開始,Matt Cutts 大概無法忍受 title 標籤被一堆關鍵字濫用的操作方式,可參考這篇「Why Google Will Ignore Your Page Title Tag & Write Its Own」,結論就是,title 的內容現在已經不會被 google 全盤接受

了解這樣的時空背景後,知道現在 Google 不會只看 title 內容,會同時比對描述內容(meta description)及 H1 標籤,那麼現在起將「文章標題」移到 H1 會是不錯的作法。



三、Blogger 的 H2 標籤配置


官方範本有兩個地方使用 H2 標籤──
  1. 小工具標題
  2. 文章發表日期

WFU 只能說非常的無言,非常不重要的兩個地方,對於搜尋網站、文章內容都沒有幫助,甚至不會擺放任何關鍵字的位置,用了第二重要的 H2。

如果文章標題使用 H1,我們還可能在文章中用了一些「次標題」、「條列式重點」等等,那麼就會用到 H2、H3。相信任何一個「小工具標題」、或「日期」,都不會比這些「次標題」、「條列式重點」的關鍵字還重要。因此勢必得將這兩處的 H2 標籤全部拿掉,例如改用 H4~H6。

另外,根據「一、H 標籤的 SEO 概念」提到,H2 最好只使用二~三個。當部落格側邊欄裝了一堆小工具,這會讓整個網頁有十幾個 H2 標籤,導致 H2 標籤的重要性整個被稀釋掉了。對搜尋引擎而言,H2 數量越少,重要性將越集中。



四、Blogger 的 H1 標籤配置


根據官方範本的預設內容,H1 標籤只有一處:用於網站標題。

1. 網站性質

由於 H1 標籤必須包含該頁面最重要的資訊,根據不同的網站性質,有的適合放「網站標題」,有的適合放「文章標題」,因為文章標題可能包含更多重要的搜尋關鍵字。

舉例1:如果網站名稱含有重要關鍵字的話,例如「搜尋引擎優化 | 台灣SEO學院」、「HairSalon美髮沙龍網」,這可能比文章標題還來得重要,那麼建議 H1 標籤使用網站名稱。

舉例2:以本站為例,網站名稱「WFU BLOG」一點都不重要,沒有關鍵字,搜尋引擎也不 Care,很少人會把這當成關鍵字來搜尋;就算會有,放在 H2 或 H3 標籤就可以了,佔用了唯一的 H1 標籤未免太過浪費。因此本站適合將「文章標題」放在 H1 標籤。


2. H 標籤沒按順序的影響

以前的 SEO 觀念是 H1~H6 標籤必須在網頁依序出現,以方便搜尋引擎爬取。如果把 H2 用於網站標題、H1 用於文章標題,會造成搜尋引擎在網頁內容先爬到 H2、再爬到 H1。

不過根據「一、H 標籤的 SEO 概念」的影片,Matt Cutts 表示現在的搜尋引擎已經能夠處理這樣的事情,所以不必擔心這件事。



五、其他


由於 H4~H6 不是很重要,因此 Blogger 範本這部份內容略過。

如果對 HTML/CSS 熟悉的讀者,看完本篇內容,應該是可以自行修改 Blogger 範本的各個 H 標籤。如果不熟悉的話,那麼下一篇會示範如何修改各個 H 標籤,已達到更好的 SEO 效果。


文章標題最佳化系列:

Blogger 文章標題最佳化__(3) 修改範本 H1 H2 H3 標籤實用技巧

$
0
0
上一篇「符合 SEO 的 H1 H2 H3 標籤配置研究」說明了在 Blogger 範本中,如何配置 H 標籤的概念。本篇則說明如何用最簡單的方法,來批次修改所有的 H 標籤,來達到較佳的 SEO 效果。

除此之外,在文章之中,還可運用各種 HTML 標籤,來達到加強 SEO 效果。



一、修改範本的難處


如果要進行本篇的操作,最好詳讀上一篇「符合 SEO 的 H1 H2 H3 標籤配置研究」的內容再來,才不會一頭霧水。本篇將會示範以下的操作:

  • 網站標題(原使用 H1) → 改用 H2 標籤
  • 文章標題(原使用 H3) → 改用 H1 標籤
  • 小工具、日期(原使用 H2) → 改用 H5 標籤

不過,如果遵循一步一腳印的方式,來逐步修改各個標籤的話,相信讀者會發現,這是一個挺折騰的流程。因為每個 H 標籤在範本中,各自有 CSS 語法設定了相關的參數。

舉例來說,可能會有以下麻煩:

  • 將所有 H1 標籤修改為 H2 後,原來的 H1 標籤 CSS 樣式將不會套用過去。
  • 為了延續 CSS 樣式,將範本中原本 H1 的相關 CSS 參數後,改成 H2 的 CSS 參數 → 又可能導致跟原始 H2 標籤的 CSS 參數打架。

意思就是說,這幾個 H 標籤彼此之間,要順利完成所有相關的 HTML/CSS 轉換,是一件不小的工程。

以下 WFU 試著找到一個最容易操作的流程,但不一定符合 SEO 最佳解,讀者可以參考後自行評量如何取決。






二、修改範本最佳流程


1. 修改原理

如果經由置換字串的方式,可以同時將 HTML 標籤與 CSS 內容同時置換。經查驗 Blogger 範本後,發現 H1~H4 標籤有使用、H5 與 H6 未使用。若經由以下流程,H 標籤的轉換不會發生任何差錯:

  • 先將 H2(小工具、日期) 轉換為 H5
  • 再將 H1(網站標題) 轉換為 H2
  • 最後將 H3(文章標題) 轉換為 H1

這可看成一個簡單的益智遊戲,過程如何推導出來就不解釋了,可自行驗證,以上流程已經是最佳、最速解。


2. 操作流程

建議使用記事軟體來進行字串批次置換,例如 WFU 常用的 notepad++。請按以下操作步驟:

  • 將 Blogger 範本所有內容複製到記事軟體
  • 將所有 "H2" 字串置換為 "H5" 字串
  • 將所有 "H1" 字串置換為 "H2" 字串
  • 將所有 "H3" 字串置換為 "H1" 字串
  • 將記事軟體的內容複製回Blogger 範本

儲存後就輕鬆完成了這個原本可能的大工程。

不過這個流程,是針對將「文章標題」改為 H1 標籤。如果看過上一篇,你的需求不是這樣的話,請依照本文的原理自行找出屬於自己的最佳解。



三、加強文章中的 SEO 效果


除了文章標題,文章內容也能運用各種 HTML 標籤,來對 SEO 進行最佳化。

1. 幾個對 SEO 有幫助的 HTML 標籤

根據這篇「學會Semantic HTML」,文章內容可用 strongem這兩個標籤來產生粗體、斜體,又達到強調的效果(對 SEO 有幫助);而常見的 B、I 標籤雖能產生粗體、斜體,但對 SEO 無效。

除此之外,根據上一篇的概念,文章內的次標題,我們還可使用 H 標題來增加 SEO 效果。


2. 有效率的文章範本範例

雖然了解了以上知識,但在實作上,誰會一邊寫文章,一邊打上 <strong>、</strong>、<H2>、</H2> 這樣的字串呢?這實在太麻煩了!

為了方便作業,WFU 會使用以下這樣的文章範本,每次要寫文章時,將範本叫出來,那麼文章內容要進行 SEO 就是一件很輕鬆的事情了:


請參照以上行號──

A:繼續閱讀語法

C、K:用於文章中的次標題,頭兩個次標題使用 H2 標籤。使用編號(一、二..)為 WFU 的個人習慣,可自行更改。

E~I:
  • 用於次標題中的條列式項目,若包含重要關鍵字時,使用 strong 標籤可利於 SEO(若沒有包含關鍵字,則可去除 strong 標籤)
  • 顏色色碼可自行更改
  • 不需要時可全部刪除
  • 其他次標題需要條列式項目時可複製過去使用

K~O:用於文章中的次標題,使用三個 H3 標籤(避免過度使用 H2)

S:次標題太多時,可改用 H4~H6 標籤,不過須自訂 H4~H6 的 CSS 樣式設定。

補充:H2、H3 等標籤,可參考「特殊文字區塊」來變化 CSS 樣式,讓這些次標題的版面看起來活潑一點,來分隔比較死板的文字段落,CSS 效果可參考本站使用的次標題效果。

以上範例酌供參考,請依據自己的需求修改、或增加自己的常用字串,如此撰寫文章時可節省不少時間。


文章標題最佳化系列:

我的 Histats 計數器操作心得, 你也可以這麼使用

$
0
0
Histats 是很棒的免費網頁計數器服務,可以在網站上即時顯示訪客數、瀏覽數、歷史瀏覽數等等數據,還有龐大數量的樣式可供選擇。雖然在專業的數據分析上,比不上 Google Analytics(以下簡稱 GA),不過 WFU 仍在本站分別裝了 GA 及 Histats 兩種計數器的追蹤碼,看起來功能重複了對吧?

GA 的數據算是最客觀的,如果部落格(將來)要接案子的話,那麼 GA 是成立之初必然得裝的工具,將來客戶會要求看 GA 的數據(而不是看「Blogger 後台的快樂流量」);而且 GA 有 API 能調用,可發揮廣泛的應用方式,例如「Blogger單篇文章計數器」。而 Histats 的話,其即時顯示數據小工具、後台調用資料的友善介面,則是 GA 一直無法做到的的部分,這也是 Histats 無法被取代的原因。



一、Histats 安裝及概念


1. 安裝步驟

由於網路上有很多安裝操作的文章,這部分簡單帶過,以下參考資料是篩選過、內容寫的比較詳細的:


雖然 WFU 「建議避免使用第三方外掛」,不過 Histats 是少數值得推薦的外掛,因為他提供了四種安裝方式,只要選擇非同步(async)的那一種,那麼就不會影響網頁的載入速度


2. 使用概念

其實 Histats 離 GA 的專業度有一大段的距離,如果是非常專業經營、或以商業為考量的的網站,那麼得依賴 GA 才能取得許多深入性的數據。例如 Histats 還無法有進入網頁及離開網頁這一類完整的分析數據(Beta功能)、關鍵字分析數據較少、無法結合 Adsense 知道訪客點擊的網頁等等。

不過 WFU 必須誠實地說,對於深入分析這些數據,我也很頭疼。一方面 GA 的操作界面沒那麼直覺,一方面網站規模還不大,就算進行了細部優化大概效果也還不顯著。

因此目前這個階段,Histats 算是非常合用的分析工具,從簡單、直覺化的操作介面,就能得到許多清楚易懂的數據,例如線上訪客資訊、網頁流量、來源網頁、熱門文章標題等等,還能以各種圖表方式呈現。

一天只要花幾分鐘的時間,就能得到以上訊息,而 GA 要得到這些資訊,我得操作倍數的時間才有辦法,那麼以下就來看看 Histats 的常用功能。






二、線上訪客(User online)


進入 Histats 後台操作介面後,大致像下圖一般──



圖中幾個做記號的,是WFU 常用的選項,本文的心得會以這些選項為主。

按下「User online」後,可看看線上訪客從那個國家來的、多半在看哪篇文章、花了多久的時間停留,也是小有樂趣的事。

上圖紅色底線的 User online 我設定成書籤,方便快速進入。對這個連結按右鍵取得網址即可,長得像這樣:

  • http://www.histats.com/viewstats/?sid=1327967&act=18

這裡有個數據可以稍微留意一下,偶爾看一下訪客的瀏覽器分佈(如圖中紅框)。如果每種瀏覽器都曾出現過,那就沒什麼問題;如果固定只出現 Chrome,而 FireFox 或 IE 都看不到,說不定代表網站裝了什麼外掛或程式,並不是每種瀏覽器都相容,造成某種瀏覽器的訪客流失了。



三、數據摘要(Summary)


按下「Summary」後,會出現網站的摘要數據──



上半部是歷史加總數據,下半部是當日的即時統計數據。需要注意的是,這個畫面的當天數據摘要,當天就會清除,過了午夜十二點就再也看不到,隔日從頭開始計算。

因此紅框標示的「訪客平均拜訪時間」,這是當日限定的數據,無法成為歷史數據(在其他選項查不到),想知道這個數據得睡前來巡一下。

而從訪客的平均停留時間起伏,也可鞭策自己寫出豐富、被需要的內容,而非只是充篇幅的文章。



四、流量統計(Traffic stats)


按下「Traffic stats」後,會列出網站每小時的流量數據──



基本上跟我們的作息成正相關,看久了會發現跟股市差不多,從一小段時間的成交量,就能推估一天的成交量。以本站為例,中午十二點多的訪客總數,乘以三差不多就是一天的訪客總數。

Histats 在「Traffic stats」的界面做得很友善──



右上角的數據篩選介面,可輕易地依小時一日一個月一年份,來篩選出各種數據資料。這部分的數據篩選介面,完勝了 GA 的介面。

以本站為例,從這個界面可以很輕易地看出,星期一~五是流量高峰,六日及假日外出旅遊者眾,通常流量下降許多。

而這個界面在比對月與月之間、年與年之間的流量消長,也是非常方便,只要一個按鈕即可看出差異。



五、來源網站(Referring Site)


按下「Referring Site」後,會列出來源網站的資料──




先說明一下原理,除了使用書籤、或是利用 key in 的方式(及複製貼上)進入我們網站(機率很小),不然的話,一般都會是從某個網頁連到我們網站、或是從搜尋結果連結過來。只要是從連結過來的訪客,瀏覽器都能偵測到該連結的網址,這就是所謂「來源網站」。

如果我們的好文章不少,得到很多讀者青睞而引用(產生了外部連結),那篇引用的文章就可能成為我們的來源跳板網站。另一種方式就像網路高手提供的範本,會有版權聲明的連結,或像是 WFU BLOG 寫了很多工具(會有版權圖示的連結),當讀者使用了這些範本、工具後,版權的連結都會成為一個跳板

上圖借用了「發現被盜文時, 如何保護著作權及反制?」的圖片,因此「Referring Site」是 WFU 非常喜歡看的一個選項,可以得知哪些網站引用了本站的文章、或使用了本站提供的工具,甚至有時還能據此發現盜文者的蹤跡。

「Referring Site」這個選項一樣可使用右上角的數據篩選介面,不過不清楚 Histats 能保留多久、或多大的數據量,以 WFU BLOG 為例,目前 "2014/7月"只能查詢到 "2013/9月"的資料而已,因此要查詢這項資料得儘早。



六、流量依文章標題統計(Traffice by Title)


按下「Traffice by Title」後,會列出下圖的流量資料──



能夠顯示文章標題是很友善的設計,比起 GA 預設顯示網址,能夠直接看到中文標題才比較直覺化。

這項統計可以很方便地知道,當日(或是某一日)受歡迎的文章有哪些。據此,可以考慮多寫一些相關的文章,或在該熱門文章想辦法安插、連結其他文章,來提升流量、或是說留住訪客。

另外,紅框中的「204」代表當下網站有 204 篇文章(或標籤連結)受到讀者的青睞(點擊),可以用來檢視網站有多少比例的文章,是常態性的受到關注。

而那些常常不被點擊的文章,則需要思考一下,是屬於題材太冷門的關係,或是標題下的不好無法吸引注意,還是缺少指向該篇文章的連結?如果有發現應該要得到青睞、但缺乏連結管道的文章,Blogger 平台建議可以參考這篇「讓 Blogger 自動顯示系列文章」,想辦法讓其他熱門文章,在文末自動產生連向該篇冷門文章的連結,以增加曝光的頻率。



七、其他


其他的選項由於不常用到,因此簡短翻譯帶過,有興趣的讀者可自行操作──

1. 搜尋引擎來源(Search Engines)

2. 瀏覽器、操作系統、語言(browsers / os / lang)

可列出訪客使用的各種操作環境、圓餅圖。


3. 訪客來源地區(Geolocation)

可列出訪客來源的國家、城市。


4. 記錄分析(Log Analyzer)

這裡便是前面提過的分析數據(Beta功能),可進行像 GA 一般的網站優化分析。由於只是 Beta 版,能保存的歷史數據有限,且紀錄(log)的容量也有限(目前限定 20k),有這方面需求的話,還是使用 GA 較佳,畢竟這部分不是 Histats 的強項。


5. 流量依文章網址統計(Traffic by Url)

用網址顯示流量統計的可讀性很差。


6. IP 排除(IP exclusion)

基本上各種計數器工具,一定會將站長本身的流量也包含在內,連 GA 也不列外,這是沒有辦法的事,除非能夠像 Histats 提供的這個 IP 排除功能,把站長自己設定的 IP 排除在外。

不過先說結論,「IP 排除」同樣不是完美解決方案,因為台灣大部分使用者多半為 "浮動 IP",因此這項設定只對固定 IP 的站長有效。

附帶一提,想得到精確流量統計的站長,若是 Blogger 平台,安裝這篇「Blogger 與 Google Analytics 如何不追蹤自己的瀏覽量」的程式碼,可解決這個問題(其他平台不一定有辦法)。


以上內容是比較常使用的 Histats 心得,雖然沒有使用到全部功能,不過相信這些功能已經足夠一般使用。下一篇,將著重在 Histats 的計數器工具,分享如何進行自訂版面的應用。


不用語法及後製, Picasa (G+相簿) 圖片立刻變成黑白(灰階)效果

$
0
0
想要在網頁上呈現黑白(灰階)圖片效果,最簡單的方法就是利用影像軟體後製,操作熟練的話很快就能完成。不過,若是網頁有很多圖片、或是不定時需要灰階效果的話怎麼辦?重新上傳也是麻煩,這時如果能透過語法,只針對需要灰階的圖片進行處理,算是最方便的解決辦法。

CSS3 / HTML5 語法都可以做到這種特效,但可惜的是,不是每種瀏覽器版本都支援,要做到跨瀏覽器相容是一件痛苦的事,可參考這篇「使用CSS將圖片轉換成黑白」就能知道原因。目前比較完美的方法,就是安裝 js 外掛,利用程式運算來解決了。

而本文 WFU 要分享的技巧,不須靠後製、也不需要研究任何語法,只要使用 PICASA(Google+相簿) 的圖床,在圖片網址加上一些參數,就能變成黑白圖片。以下就來看看這個魔法,以及各種應用方式吧!



一、PICASA 圖片網址原理


PICASA 圖片網址的基本參數原理,可參考「Blogger 熱門文章+任意尺寸縮圖」→「一、PICASA 圖片規則」,利用改變參數的數字大小,就能改變圖片的尺寸。

不過除了圖片尺寸,PICASA 還能藉由改變參數來達到一些特效,則是從 +綜合口味 發表的這個「Blogger社群討論串」得知,加上一長串複雜的參數後,可以達到毛玻璃的效果。




例如上圖的網址為:"http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400/wfublog.jpg"

插入這行參數後:"-fcrop64=1,000007b9ffffd845:Soften=1,60,0"

圖片網址成為:"http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,000007b9ffffd845:Soften=1,60,0/wfublog.jpg"

效果就像下面這張糊掉了的圖片:




因此,關鍵在於調整 "fcrop64" 及 "Soften" 的參數。而找到其他特效參數的話,也能如法炮製,做出比美後製軟體的特效。,本文首先要介紹的是,算是滿實用的 "灰階" 特效。






二、灰階特效參數


1. 簡化參數

原本的字串 "fcrop64" 參數過長,且會裁切圖片。經測試後,參數可簡化為 "1,ffffffaa",並可維持原圖尺寸。


2. 灰階字串參數

最後找到的關鍵字串及參數為 "ansel=1,ffffff",後面的 "ffffff" 是色碼。


3. 不同色系的灰階消果

如果使用了 "ffffff" 參數,代表為一般的 "黑白" 效果,如果使用了不同的色碼代號,就能呈現各種灰階效果,以下使用三原色的色碼舉例(查詢色碼請參考「網頁色碼選擇器」)──




紅色:上圖使用色碼 "FF0000",圖片網址參數為──

  • http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FF0000/wfublog.jpg




黃色:上圖使用色碼 "FFFF00",圖片網址參數為──

  • http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FFFF00/wfublog.jpg




藍色:上圖使用色碼 "0000FF",圖片網址參數為──

  • http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,0000FF/wfublog.jpg


相信以上三種灰階效果,肉眼是可以分辨地出來。若真的看不出來(螢幕跟 WFU 一樣爛的話),可點擊這三張圖片另開分頁,在不同分頁間切換即可看出差別。而想顯示不同的灰階,只要置換其他不同的色碼即可。



三、Hover 效果應用


瞭解 PICASA 圖片灰階效果的參數如何使用後,接下來介紹一個簡單的 Hover 效果,將原本的圖片設定成黑白,滑鼠經過時顯示原圖,只要利用簡短的語法就能完成。

<img src="http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FFFFFF/wfublog.jpg" onmouseover="this.src='http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400/wfublog.jpg'" onmouseout="this.src='http://1.bp.blogspot.com/-dxTG02G5GdM/U7_kBt8bXqI/AAAAAAAAJ04/doIhYOUMMsw/s400-fcrop64=1,ffffffaa:ansel=1,FFFFFF/wfublog.jpg'"/>
  • 以上程式碼的意思為,一開始圖片網址設定為黑白效果,使用了綠字參數 "-fcrop64=1,ffffffaa:ansel=1,FFFFFF"。
  • 滑鼠經過時(onmouseover),圖片網址改為原圖網址(沒有多餘參數)。
  • 滑鼠離開時(onmouseout),圖片網址改為黑白效果,使用綠字參數 "-fcrop64=1,ffffffaa:ansel=1,FFFFFF"。

想要測試效果,可以將滑鼠移到下面這張圖:





四、整個區塊的圖片變成黑白


這應該是更為實用的應用了,通常這樣的效果需要加裝外掛才能實現,現在只要在範本中加入幾行語法就能實現了。不過,或許以下內容至少需要基礎的 HTML 概念才能理解。

1. 添加 class 名稱

首先在想要實現灰階圖片的所有區塊,全部加上 class 名稱,就像 <div class="picasa-grayscale"> 這樣。(藍色字串名稱 "picasa-grayscale" 可自訂)

例如想把 Blogger 文章區塊的圖片都變成黑白,可在範本中搜尋 <div class='blog-posts...> 這樣的字串(有多處,每一處都要改),由於這個區塊已經設定了 class 屬性,那麼就在 class 的內容新增一個字串名稱,彼此用空白隔開,就像 <div class='picasa-grayscale blog-posts...> 這樣即可。


2. 安裝 js 程式碼

接著在範本中搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


請參考程式碼行號進行修改:

E:紅色字串可改為「1. 添加 class 名稱」的自訂名稱。

M:藍色字串即為灰階程度的參數,請參考「二、灰階特效參數」的說明來更改。



五、後話


幾個月前的太陽花學運,不少網站為表響應與支持,暫時將色調改為黑白。現在知道本文的技巧後,要做到這樣的特效就很容易了。以下是利用本文的程式碼,將 DEMO 網頁的圖片改為黑白的效果:



除了本文的灰階特效,後續會整理 PICASA 圖片其他比較實用的特效來介紹。新朋友若不想錯失本站的最新文章,建議可使用 RSS 或 Email 訂閱;如果找不到訂閱按鈕,可前往本站「訂閱網頁」。



PICASA 相關文章:

搜尋結果不再顯示作者頭像!Google 為何要這麼做?

$
0
0

(Pic from: freepik.com,danzxncrd.blogspot.com)
Google 搜尋引擎最近發生的大事,為取消顯示實施了二~三年的作者頭像(Google Authorship),算是令許多人沮喪的一件事,因為作者頭像對於搜尋結果的點擊率,的確有影響。

+Mark X 撰寫專文說明了這件事,並提出相關建言。本文內容主要轉載自他這篇「Google 搜尋結果移除作者頭像」,希望能讓更多讀者瞭解此事並知道如何因應。

由於 Mark 用詞一向精簡,對於這篇濃縮的精要心得,WFU 試著將其解壓縮。除了灌灌篇幅,也希望對原文部份含意不清楚的讀者,能有所助益。



一、事件始末


這是關於 Google 搜尋介面與排名調整的公告。About Authorship

運用 Google Authorship 與 Google+ 的網站作者,在 Google 搜尋結果中可以附加作者大頭照,這是相當特別的設計。而實際影響點擊率的實驗,我所見的幾個網站上升數據大致分佈於 25%~55% 之間。然而 Google search 在6月底全面移除作者頭像;僅保留作者 G+ 連結,使得許多網站優化操作者失去此項優勢。




1. Google Authorship:作者頭像的介紹,可參考「讓作者頭像出現在搜尋結果」系列文章。




2. 社交圈數據:除了頭像之外補充一點,原本搜尋結果還會顯示作者在多少 G+ 使用者的社交圈之內,例如上圖為舊的搜尋結果畫面,代表 Matt Cutts 有十七萬個使用者追蹤他。

因此 Google 是鐵了心要廢止 "作者權威度" 的各種指標,除了不讓頭像圖案誘導點擊之外,也不給予任何能顯示作者威望的暗示,Google 決定讓搜尋者 "點擊" 的動作回歸到標題先決






二、官方考量


此項決定我在6月初就嗅出端倪,付諸行動移除作者頭像也至少兩週了。很奇怪的是,我只有在少數幾個簡體中文網站看到這項報導,台灣當地似乎沒有網站關切這則新聞。當 John Mueller 決定移除作者圖像數據的原因之一,在於此項可視化設計僅見有利於資訊工作者,相較於其他原創者的資訊不對稱並無有效利用,關於這一點我在兩年前早已提出此項質疑,人微言輕也就沒人在乎。

不過我所知的事實卻無關 Authorship 的利用問題,或是企圖在不同裝置同步簡約的緣故。有些網路觀察者認為此項改變宣告了 Google+ 的失敗,以及搜尋頁面 Google AdSense 形成零和賽局。(備註:雖然有影響到小資客層購買廣告的意願,不過將 Authorship、AdSense 兩者處於相對的零和賽局似乎走偏了。)




1. John Mueller:他是 Google 搜尋引擎趨勢分析工程師,在這個「G+ 討論串原文」,宣布搜尋結果移除作者頭像以及社交圈數據。


2. "其他原創者的資訊不對稱並無有效利用":參照 Mark 這篇「搜尋結果未顯示作者資訊」後,這句話及前後文的原意應為,並非所有站長都知道 Google Authorship 這件事,而就算知道,也非所有站長都能成功完成申請步驟。因此,能在搜尋結果顯示作者頭像的站長有限,多半是長期關注網路資訊的站長能夠得利


3. "企圖在不同裝置同步簡約的緣故":行動裝置崛起導致行動搜尋的數量持續上升,而網頁搜尋與行動搜尋對 Google 而言是兩個系統,為了維護兩套系統較為麻煩,將兩套系統介面統一(不顯示作者頭像),會是比較省事的作法。實際上,現在 Google 已經把 "行動版" 的考量優先於 "網頁版"(Google Adopts a New Strategy: Mobile First)。

為了確認移除作者頭像是否造成影響,Google 在過去一段期間,不斷間歇性地交替測試 "有作者頭像" 與 "無作者頭像" 的搜尋結果與點擊相關性。所以我們時而會看到頭像、時而看不到。


4. "此項改變宣告了 Google+ 的失敗":一方面 G+ 的確是失敗,當初在搜尋結果顯示作者頭像及社交圈數據,的確也是拉抬 G+ 的作法之一;另外來說,或許拿掉這些東西,是間接承認 G+ 不夠重要的一個跡象。


5. "搜尋頁面 Google AdSense 形成零和賽局"::這篇「Google Removes Author Photos From Search: Why And What Does It Mean?」的留言前幾樓,對於廣告點擊這件事有比較深入的討論。這些討論隱含著:

  • Google 的考量不一定著重在提高權威作者的點擊,營利公司當然要有商業考量。
  • 有頭像的文章被點擊,不一定能帶來廣告的點擊(代表收入),Google 也必須在搜尋結果,能兼顧增加廣告的點擊
  • 有些搜尋結果頁面,同時也會優先列出廣告主的付費搜尋結果,而畫面上沒有作者頭像時,當然就能提升付費搜尋被點擊的機率。



三、Mark 觀察


我個人的看法是,這是對於 Google+ 當地商家服務的佈局之一。總之,現在的 Google 搜尋頁面已經移除了作者頭像,但切勿因此忿而移除了 Google+ 的作者連結!真的,你會感謝我阻止你這樣做。這兩週我有做 A、B 測試,雖然沒有了辨識作者照片吸引眼光,有作者連結與沒有作者資訊的文章其排名差很多!似乎 Google 有修改排序公式。親愛的讀者不要再私訊問我怎麼一回事了?




1. G+ 當地商家



2. 不要移除 G+ 的作者連結:感謝 Mark 的實測,因此目前的結論可以是──

雖然搜尋結果不顯示作者頭像,但作者權威性仍然在,依然是影響搜尋結果的重要指標。把網站文章跟 G+ 帳號作連結,申請 Google Authorship 仍是必要的動作,作者權威指數會隨著時間,持續地累積下去。」



四、WFU 觀察


想瞭解更多關於「Google 移除作者頭像」的研究,可參考這篇「Google Removes Author Photos From Search: Why And What Does It Mean?」。移除頭像這件事在國外引起很多人不悅,而 WFU 目前只是感到有些無奈,因為真正的不悅,發生在很久之前。

某天偶然發現,作者頭像消失在搜尋結果?原來並非真的不見,而是 Google 搜尋結果會自動切換到「繁體中文網頁」模式,而在此模式之下,並不會顯示作者頭像!

若將搜尋結果手動切換到「不限語言」模式,作者頭像便會出現。這也無妨,在搜尋「中文字串」的狀態下,"不限語言" 及 "繁體中文網頁" 的搜尋結果相去不遠。

然而,台灣使用者被自動切換到 "繁體中文網頁" 模式後,有多少人會特地手動切換為 "不限語言" 模式,來檢視作者頭像呢?「作者頭像」自此成了看得到吃不到的美麗畫作!

不過,隨著時間過去,當初的不悅感確然已經慢慢消失(麻痺)。這也代表,其實網站流量已經有很長的時間,並非倚靠作者頭像的威能,而是實實在在的流量。看來,Google 是有計畫、漸進式,盡量(稍微)無痛地走向今天這步田地!



五、小結


最後做個小小的收尾,John Mueller 回覆網友的一段話我覺得不錯,雖然這段話其實不是發問者想聽的,網友認為 Google 應該要為起初大力推廣作者頭像的說詞道歉...Anyway,Mueller 說:「對抗搜尋演算法的最好方法,就是做一個絕佳的網站。追尋演算法並非運用時間的最好方式,把這時間拿來讓網站有更棒的內容,會是更好的選擇。」

搜尋引擎演算法不斷在變,一時之間有可能因為找到讓排名大躍進的密招而高興,但之後也可能因為演算法調整而暴跌。不過,憑藉絕佳內容而成為搜尋排名的佼佼者,不會因為演算法調整而殞落。

也許,從這個事件學到的是,因為 Google 的不斷自我調整,讓我們可以專心於網站本身,而少花時間來追蹤 Google 有關 SEO 的新消息~


Google Authorship 系列文章:

Feedburner 訂閱人數飄忽不定?改讓 Feedly 按鈕顯示訂閱人數吧!

$
0
0

(Pic from: SeonBieber)
相信有使用 Feedburner 訂閱按鈕的站長可能會發現,去年七月「Google Reader 關閉」(以下簡稱 GR)之後,Feedburner 接收 GR 訂閱人數的狀態便陷入混亂,顯示的數據保持著區間震盪的走勢,一下子爆衝、一下子又暴跌,週而復始進行無限循環。

忍受這亂象一年後,最近決定動手剷除這個亂源。由於後 GR 時代,看來 Feedly 目前仍穩居 No.1 的地位,算是比較有公信力的指標,因此改用「Feedly 按鈕 + 訂閱人數」會是不錯的替代方案。

而且今年七月起,原本另一個 Feedburner 的替代方案,「Feedpress 已經取消了免費方案」,因此看來使用 Feedly 顯示訂閱人數會是較佳的選擇。

想瞭解更多細節,請繼續看下去;如果想直接安裝程式碼,請跳「二、安裝程式碼」。





一、Feedly 訂閱人數


1. 與 Feedburner 比較

首先看一下本站的 Feedburner 後台訂閱人數畫面──



86 個訂閱者裡面,「unknown」佔了 58 個最多,合理推估這應該代表 Feedly 的訂閱人數。接著查詢 Feedly 的訂閱人數──




使用「WFU BLOG 換網址」之前的 feed 網址查詢,看到舊時代的 feedly 訂閱者有 97 位。接著使用 feedburner 網址查詢──




結果有 70 位訂閱者。總之,這些數據都與 Feedburner 的「unknown」項目兜不起來,且遠高於 feedburner 數據,至此可確定本站在 feedburner 的數據庫已經無任何參考作用。


2. 其他網站的情形與 Feedburner 比較

為了驗證這是不是常態現象,利用以上的檢驗方式,抽樣了幾個網站,結果如下(2014.7.16 抽樣):


Feedburner 與 Feedly 的數據孰大孰小不盡然相同,而且每天觀測的數據,倍數落差之大也讓人難以想像。不過可以確定的是,Feedburner 的數字已經失真很久了,因此在 Feedburner 旁邊擺個比較穩定的 Feedly 數據,會客觀一些


3. Feedly API

Feedburner 沒開放 API,不過 Feedly 這方面很上道,開放了「API」讓我們撈數據,因此要獲得 Feedly 訂閱人數是可行的。以下藉由這個 API,提供顯示單一 feed 訂閱網址的數據。






二、安裝程式碼


1. CSS 樣式

請到後台「範本」→「編輯 HTML」,搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<style>
/* Feedly 訂閱人數 */
.feedly_btn { /* 整個區塊 */
position: relative;
display: inline-block;
margin: 10px 10px 0px 0px;
}
.feedly_btn img { /* 按鈕圖片 */
width: 90px;
height: 35px;
}
.feedly_count { /* 訂閱人數 */
position: absolute;
top: -12px;
right: -10px;
padding: 2px 6px;
color: white;
font-family: arial, sans-serif;
font-size: 12px;
background-color: #d60000;
border-radius: 15px;
box-shadow: 0 2px 2px rgba(0,0,0,0.4);
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
line-height: 12px;
border: 2px solid white;
z-index: 2;
}
</style>



2. 按鈕擺放位置

請將以下 HTML 碼,放在範本中 "任何" 想顯示 Feedly 訂閱按鈕的地方,也就是說可以放不只一個地方

<span class="feedly_btn" title="訂閱 WFU BLOG 到 Feedly"></span>

Title 的藍色提示字串請自行置換。

不清楚要放哪裡的話,找到原本放 Feedburner 按鈕之處,取而代之即可。或是也可參考這兩篇「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼」、「Blogger 範本__(三)文章及留言區塊的程式碼」,來找到合意之處。


3. 主要程式碼

最後,在範本中搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


請參照以上程式碼行號修改:

E:紅色字串請改為自己的 RSS feed 網址

F:如果想使用自訂的按鈕圖片,請置換藍色字串網址

I:由於過去發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流。



三、修改 CSS


若使用預設的設定值,效果大致如下圖一般:




如果想自訂按鈕的各種配置、效果,可參考以下說明修改 CSS 參數:

1. 更改圖片大小

找到 /* 按鈕圖片 */的區間後,可自行修改寬度、高度的像素(px)值。


2. 訂閱人數字體大小

如果想修改字體大小,以下是比較簡單的修改方式。找到 /* 訂閱人數 */區間後,三個紅色數字 12 通常一併更改為相圖數值即可;另外也可斟酌修改紅色數字 6 的大小。

以上只針對比較容易說明的部份,而其他部份的修改,建議具備足夠的 CSS 知識後再進行調整。


Feedly 相關文章:

Facebook 粉絲頁 RSS 網址線上產生器__為何要訂閱 FB 粉絲頁?

$
0
0

由於 FB 粉絲頁的曝光率急速下降,或許讓讀者能訂閱粉絲頁的 RSS 是一種解決方式。以下先提供粉絲頁 RSS 的線上產生器,再詳細解釋為何需要這麼做。



一、FB 粉絲頁 RSS 網址


請按輸入框的提示,輸入對應的 FB 粉絲頁網址即可產生 RSS 訂閱網址:
https://www.facebook.com/
FB 粉絲頁 RSS 訂閱網址如下:
/
2014.7.23 新增:如果常常需要使用這個小工具的話,WFU 另外製作了比較簡潔、載入速度較快的頁面,可將以下連結加入書籤:



二、使用範例


借用「綜合口味」的 FB 粉絲頁當作操作範例:
  • https://www.facebook.com/blog.mixflavor

在小工具的輸入框填入剩餘的網址字串 "blog.mixflavor",按下 Enter 鍵(或按下「送出」),就會出現下圖畫面:



上圖的兩組紅框,第一組即為 RSS 訂閱網址。

如果習慣使用「Feedly」訂閱的話,可改用第二組的 RSS 網址。

下方的資訊為藉由 FB 提供的 API,所擷取到的粉絲頁資訊,例如網站名稱、分類、按讚數量、粉絲頁封面圖等等,按下連結後,可前往對應的網頁。



三、FB 粉絲頁的現狀


相信有經營 FB 粉絲頁的站長一定覺得很嘔,現在 FB 粉絲頁的貼文,可能只有 1/10 不到的粉絲有機會看到;想要讓曝光率更高,只能乖乖掏錢給 FB。

其實這件事對讀者而言也很麻煩,想要追蹤粉絲頁的動態無法再像以前一樣方便,難道只能定期手動點進粉絲頁網址,檢查有沒有漏看的訊息?

為了解決雙方的不便,這也是製作「FB 粉絲頁 RSS 網址線上產生器」的源由。經由訂閱粉絲頁的 RSS 後,消息發佈者與訊息接收者,彼此都從困境得到了解放



四、FB 粉絲頁的變革與應對


在 Google+ 中,只要是加入了社交圈、你正在追蹤的 G+ 專頁(等同 FB 粉絲頁),所有的訊息絕對不會漏接,不必單獨點進個別的 G+ 專頁,這對於收集資訊是非常方便的事。然而,G+ 用的人少,很多有名的粉絲頁只開在 FB,要關注最新消息的話只能追蹤 FB 粉絲頁

如前面所言,FB 越來越不掩飾的商業化,讓 FB 粉絲頁的曝光得拿錢來換。這篇「接收 FB 粉絲頁動態訊息通知」提供了大概要花多少錢,可以提高曝光率的經驗。辛苦經營許久換來的數萬、數十萬粉絲,現在除了帳面數字好看以外,根本不具備任何實質與影響力──如果不花錢的話。

另外這篇「經營Facebook官方粉絲專頁,還有意義嗎?」有更深入的分析,粉絲頁的訊息曝光率可能不到 5%,對於粉絲頁應該如何經營,則建議想辦法將讀者引導回網站,算是正確的方向。



五、總結


1. 讀者

如果是讀者的話,相信本文的小工具,可以解決資訊接收的大問題。

並且除了使用 RSS 閱讀器,還能利用「IFTTT」這樣的線上同步工具,將 RSS 同步到 Email,讓粉絲頁的訊息自動出現在 Email 收件匣,讓收集資訊更為方便。


2. 網站

如果是內容網站的話(不斷有新文章產生),將粉絲導回網站是正確的方向。不過如此一來,也不需要訂閱 FB 粉絲頁的 RSS,直接訂閱網站 RSS 就好,除非 FB 粉絲頁發布的內容跟網站不一樣。

然而,大部分網站並非內容網站,不會提供 RSS 訂閱,例如許多商業網站、公司,多半還是利用 FB 粉絲頁來發布、更新消息。

那麼,這些屬性的網站,也許最好先學著熟悉 RSS、並教導粉絲使用 RSS 閱讀器,最後利用本文的小工具來產生 FB 粉絲頁 RSS 網址,讓粉絲訂閱。

如此,粉絲的數字比較有可能代表實質意義,粉絲頁的訊息不再成為自言自語。


Facebook 相關文章:

長時間瀏覽網頁眼睛不舒服嗎?快使用高對比模式 (Chrome 套件)

$
0
0
電腦螢幕的製程越來越進步,開發出成本越來越低、更省電、顏色更鮮艷的零組件,從 CRT → LCD → LED,然而對眼睛的傷害卻是越來越大。原本 LCD 的背光已經不適合眼睛長期直視,但更慘的是,目前市面上只能買到背光更強的 LED 螢幕(新品)。

要讓眼睛對抗強光、調適瞳孔的程度比較緩和,除了購買昂貴的特殊過濾光線眼鏡,我們能做的,就是盡量將螢幕上的字體放大(讓 Chrome 只放大縮小文字套件),以及使用對眼睛負擔最小的「高對比配色」。

由於現在瀏覽器的使用,佔據了電腦操作很大一部份的時間,因此本文先介紹 Chrome 的兩個高對比套件:High ContrastHacker Vision



一、高對比的原理


為何長時間電腦操作者,需要使用高對比的配色,這篇「配色與易讀性」有非常詳盡的探討。

高對比有兩種主要模式:黑底白字、白底黑字。這篇文章的作者認為「深底淺字」是能讓他長時間作業的配色。而 WFU 接觸到的例子,似乎每個人習慣的模式不同,有人能接受「深底淺字」,但有人不能接受。就像作者也說了,他的觀點與另一位出版人截然相反。

因此,就像每個人的身體構造不盡然相同一般,找出適合自己眼睛的高對比模式,比盲從專家資訊來得重要。

在 Chrome 商店裡,找到了兩款功能不一的高對比模式套件,以下將詳述操作心得,讓讀者能參考並找出適合自己使用的套件、或操作方式。





二、High Contrast


1. 安裝

WFU 在 Win8 使用了高對比佈景後,Chrome 自動推薦了這個套件「High Contrast」,其安裝網址如下:





2. 操作

安裝後,在 Chrome 右上角會產生如下圖紅框的小圖示,按下後有不少選項:



可隨時按下「Disable」(或使用快速鍵)來停止執行這個套件。

有七種不同的模式可選,可自行測試一下效果,我常用的是──

  • Normal:還原為正常顏色
  • Grayscale:灰階效果
  • Inverted Color:色彩反轉,如果原本網頁是淺底深字的話,顏色就會反轉為深底淺字。

如果不想每個網頁分別設定模式,那麼只要選擇了任一模式後,按下「Set as default scheme」,以後每個網頁開啟時的預設值就是這個模式。

如果曾為每個網頁分別設定模式,這個套件的優點是,可以分別記憶每個網頁的模式。而如果要取消所有網站的設定值,按下最下方的「Forget site customizations」即可


3. 心得



雖然 High Contrast 的功能算多,不過缺點不少──

  • 顏色處理效果不夠好,例如本站 WFU BLOG 的配色運氣似乎不佳,在各種模式下看起來都不太順眼。
  • 跟網頁的 js 可能會相衝,例如上圖為 Google 的搜尋頁面,左上方會跑出一塊奇怪的區域;另外本站的浮動導覽列有時也會有異常顯示。
  • 只有三顆半星的評價,Chrome 商店有人留言,希望圖片的顏色能夠不要跟文字一樣變成高對比模式。



三、Hacker Vision


1. 安裝

在 Chrome 商店另外找到了這個套件「Hacker Vision」,其安裝網址如下:





2. 操作

安裝後,在 Chrome 右上角會產生如下圖紅框的小圖示,按下後沒有幾個選項:



可隨時按下「Pause Hacker vision」來停止高亮度模式。

只有有兩種模式可選──

  • Hacker Vision:其實就是 "色彩反轉" 的效果
  • Normal:還原為正常顏色


3. 心得

雖然 Hacker vision 的選項少,不過效果很好,所以得到四顆半星──

  • 顏色處理的效果很棒,後面會附上效果圖。
  • 跟網頁的 js 不會相衝
  • 圖片的顏色不會進行高亮度處理,保持原本色彩

而其缺點自然是沒什麼可以設定的選項,如「一、高對比的原理」所提,每個人眼睛適合的模式不一樣,Hacker vision 只能顯示一種模式,則註定無法適合所有人使用



四、特殊密技


這兩款套件各有各的優點,但各自都有無法彌補的缺點,該怎麼抉擇是一項難題!有辦法可以解決所有缺點,滿足所有需求嗎?

「爭什麼?摻在一起做成撒尿牛丸啊!」沒想到這句話此時能派上用場。以下是 WFU 發現的密技,將「high-contrast」及「hacker-vision」同時安裝在 Chrome 後,發生了奇妙的事──
  • hacker-vision 的選項功能似乎被 high-contrast 的程式覆蓋掉,怎麼選擇都沒有任何作用。
  • 但操作 high-contrast 的選項後,兩者的缺點同時消失,且兩者的優點依然並存

以下詳述這些狀況──


1. 顏色效果更好

下圖是原本「high-contrast」選擇 "Grayscale"(灰階模式)後,本站的顏色效果畫面,色彩偏黑不太好看──




下圖是兩個套件混合安裝,「high-contrast」選擇 "Grayscale"(灰階模式)後,本站的顏色效果畫面,色彩看起來順眼多了──




2. JS 相容性提昇

前面已經看過「high-contrast」下的 Google 搜尋畫面,左上角有異常區塊──




下圖是兩個套件混合安裝後,Google 的搜尋畫面,異常區塊消失了(色調也比較好看了,對吧?)──




3. 顏色反轉模式

前面提過,我覺得「high-contrast」的顏色效果都滿醜的,且圖片的色彩也都會被一起處理(例如變成灰階)。

現在兩個套件混合安裝後,在「high-contrast」選擇 Inverted Color(顏色反轉)模式,就會變成跟「hacker-vision」一模一樣的漂亮顏色,且圖片會恢復為原本的色彩,就像下圖本站的效果──





五、小結


因此結論呼之欲出,將兩個套件同時安裝,能夠得到最大彈性(可選擇各種模式)、最佳色彩最佳執行效果(js 不衝突)。以上測試在 Win8 環境、Chrome 最新版本(V36)下正常運作,由於沒有測試其他作業環境,讀者可以嘗試看看自己作業系統的效果。

其實本站當初設計時,為了讓眼睛看了舒服,採用了比較柔和的配色,我自己在閱覽時,覺得採用 "normal" 模式(原始配色)會比其他模式來的舒適。不過這當然是個人觀感,請還是依照讀者本身的眼球意願,來進行各種模式的設定囉!


Chrome 相關套件:

Blogger 行動版 Adsense 廣告如何追蹤成效?

$
0
0

(Pic from: oxoitech.com)
之前「在 Blogger 行動版放 Adsense 廣告」,由於本站讀者特性多為使用網頁版,因此一直未有動力追蹤行動版的成效。

過了幾個月後,現在覺得應該會有數據來分析 Blogger 行動版投放 Adsense 的效用,作為是否該使用自適應版面的評估。結果赫然發現,在 Adsense 後台找不到 Blogger 行動版的廣告單元,這下子該怎麼追蹤成效呢?

到 G+ 的 Adsense 社群跟官方詢問了一下,很快得到了回覆,但隨即發現這個回覆可說是幫忙起了個頭,但離解決這件事還很遙遠。如果對追蹤行動版 Adsense 收益有興趣的讀者,這件事其實不如想像中容易,以下 WFU 提供的心得可以得到一些概念。但能否有徹底追蹤完整數據的管道,得看將來 Blogger 或 Adsense 會不會改進後台的功能了。



一、Adsense 廣告單元與 Blogger 行動版


1. Adsense 廣告單元

能夠產生 Adsense 廣告單元的管道有兩種:



A. 在「Adsense 後台」→「我的廣告」,從上圖紅框的「新建廣告單元」來建立 Adsense 廣告,這個管道可以自行命名廣告單元的名稱。


B. 如果在「Blogger 後台」→「版面配置」新增「Adsense 小工具」,會產生類似上圖下方的紅框的廣告單元,其名稱是自動產生的,格式為「網站名稱-位置-Adsense-編號-尺寸-as」,字串名稱無法更改。


2. Blogger 行動版

請參考「Blogger 行動版範本擺放 Adsense 廣告的簡易技巧彙整」,如果是「自訂」行動版範本,那麼建立的 Adsense 廣告其實跟網頁版的廣告是一樣的。

如果是「官方」行動版範本,如該篇文章所言,Blogger 會自動在網頁上方產生一個 320 x 50 的 Adsense 廣告、在網頁下方產生一個 300 x 250 的 Adsense 廣告。

請注意!這兩個廣告是 Blogger 自動產生的,創建者為「Blogger」、而不是我們,所以我們沒有這兩個廣告單元的管轄權!

在「Adsense 後台」→「我的廣告」,也就是前面那張圖的畫面,將找不到這兩個廣告單元名稱,自然也看不到任何報告,無法進行追蹤成效






二、Adsense 效果報告


我們試著從別的地方來追蹤 Blogger「官方」行動版所產生的兩個 Adsense 廣告。

1. 廣告單元

這次從「Adsense 後台」→「效果報告」→「廣告單元」來觀察──



從列表找不到這兩個尺寸。(以上圖表的數據必須馬賽克,因為 Adsense 官方規定不可公開收益數據)


2. 廣告尺寸

改從「廣告尺寸」來觀察──



這次得到的數據更少,依然沒有 320 x 50 及 300 x 250 這兩個尺寸。


3. 廣告尺寸 測試版

這是新的選項「廣告尺寸 測試版」──



這下終於 Bingo,看到上圖箭頭處的兩個 320 x 50 及 300 x 250 廣告尺寸了,似乎可以準備開始檢驗成效了!



三、追蹤收益


1. 初步分析

首先解釋一下,由於「廣告尺寸 測試版」是半年多前推出的功能,因此要檢驗數據時,只能從 2013/11/4 這個日期開始,如下圖右上角的紅框──



而才剛開始準備檢驗成效,就發現了不對勁的事,在 2013/11/4 ~ 現今日期的區間內,320 x 50 (Adsense 偶爾會拿 300 x 50 的廣告來填充) + 300 x 50 的廣告請求只有九百多次,但 300 x 250 這尺寸有將近兩萬個請求。

這是因為雖然我的網站擺了 336 x 280 尺寸,但偶爾 Adsense 會自動拿 300 x 250 這尺寸的廣告來填充,所以 300 x 250 這尺寸一萬八千多次的請求裡面,其實大部分都是來自於桌面版廣告的請求。

這下可好,320 x 50 的數據可以確定絕對是來自於行動版的點擊,但 300 x 250 的數據,要怎麼將桌面版的數據分離呢?


2. 分析技巧

接續上圖,對著「300 x 250」點下去,可以單獨顯示這個尺寸的數據──



如上圖,先將左邊紅框篩選方式改為「月份」,可以縮短表格長度,可看到總共點擊數為 "32",請先記住這個數字,這是「網頁版 + 行動版」300 x 250 廣告在這段期間的總點擊數。


3. 自定義渠道

先說明一下,我有多個部落格,每個都有使用 336 x 280(包含 300 x 250) 的廣告單元。而這些廣告單元,我都會分別放入不同的自定義渠道。有了這些預先動作後,可以進行下一步。



接續前圖的操作,現在使用「添加維度」,增加「自定義渠道」。這個動作能把所有在自定義渠道裡面的 300 x 250 廣告單元篩選出來,我們看到這段期間的加總點擊為 "25"。


4. 行動版點擊數據

相信聰明的讀者已經看出端倪,能夠加入「自定義渠道」的只有桌面版的廣告單元。那麼總共點擊次數 32,減去桌面版的點擊次數 25,剩下的 7 次就是行動版 300 x 250 廣告單元的點擊數據;當然,廣告的收益也能用同樣的方法求出來。

如果還想知道這 7 次發生的時間點、其他資料等等,或許還得有耐心從 32 次的點擊數據中,一一刪除 25 個桌面版的數據才能得到。



四、其他難處


會研究這件事,主要想了解本站使用行動版的讀者大概有多少,行動版的廣告夠不夠成點擊的吸引力,藉以評估是否需要進行自適應版面。目前看來行動版讀者算是非常少,不過必須感謝還是會有廣告的點擊,那麼自適應版面這樣的大工程仍然可以偷懶繼續擱著。

當然這只是個人的追蹤成效需求,如果想要更進一步的分析,舉例來說,300 x 250 廣告單元在行動裝置的總點擊次數可以算得出來,但當我們擁有不只一個網站時,想了解個別 Blogger 網站的行動版點擊狀況,看來還是非常麻煩。

問題追根究底,仍在於 Blogger 官方行動版的廣告單元,無法由我們建立及控制,這方面有待 Adsense 與 Blogger 進一步合作來解決了。


Adsense 相關文章:

幫 Blogger 安裝三種留言分頁 (含 Google+ 及 Facebook 留言板)

$
0
0
部落格常見的留言板外掛有 G+、FB、Disqus 等留言板,如果能同時擺放幾個留言板是有他的好處(後面會分析),但多個留言板並存時,隨之而來的是版面凌亂,由上到下的多個留言板會讓訪客滑鼠捲個不停。因而喜歡潔淨版面的站長會選擇只放其中一種,甚至隱藏官方留言板,但這是很可惜的事,因為最不該屏棄的就是官方留言板。

如果安裝了本文的留言分頁小工具後,不但 Blogger、G+、FB 留言板三合一,沒有了上述的缺點,還能各自保有本身的優點。以下先簡單介紹這個留言分頁的功能及三個留言板的優點,想直接安裝請跳至「二、安裝準備動作」。




一、留言板的功能及優點


1. 留言分頁

除了節省擺放留言板的空間以外,這個小工具還能設定預設開啟的分頁為 G+ 留言板、或 FB 留言板。站長可以根據自己網站讀者的習性、三種留言版的使用率,來決定預設開啟的分頁。

這個工具的基本款只放了 Blogger、G+、FB 三個留言板,原因為 G+ 與 FB 留言板,是對社群傳播力有幫助的工具,會比其他任何留言板的功效來得大

另外,這個小工具的 G+ 與 FB 留言板都支援自適應版面,會根據螢幕寬度來顯示留言板的寬度


2. Blogger 官方留言板

簡單說明官方留言板的好處,主要為 SEO 的用途,留言也可成為搜尋引擎索引的內容。由於這個主題比較大,有機會再詳述。


3. G+ 留言板

如果想知道文章誰分享到 G+,有誰留了言、按了 +1,那麼 G+ 留言板是非常棒的工具,不僅僅是留言功能而已

想對 G+ 留言框有通盤的瞭解,這篇「G+ 社交圈與 FB 社團比一比」分析地非常詳細。


4. FB 留言板

最大社群網站的留言板,應該不必多解釋了,如果 FB 朋友多的話,這個留言板對傳播力很有幫助。






二、安裝準備動作


1. 關閉 G+ 留言板選項

如果 Blogger 後台 → Google+ → 勾選了「為這個網誌啟用 Google+ 留言功能 」,請將這個功能取消,以免無法正常執行。


2. FB 管理留言

如果需要管理 FB 留言的話,請依照「Facebook留言板安裝懶人包」→「一、準備動作」,來取得 FB 管理者 ID 及 FB 應用程式 →「三、Blogger 安裝」→「2013.11.22 補充」的內容,將 META 標籤的字串放在範本中 <head>後面即可。


2014.8.1 新增──3. 刪除相關外掛

若曾安裝過「FB留言板安裝懶人包」、「G+留言框與其他留言外掛並存」類似這樣的留言工具,請完整移除原本的程式碼,以免顯示異常。



三、安裝 CSS


請到後台「範本」→「編輯 HTML」,搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<style>
/* 留言分頁 start*/
#commTab { /* 整個分頁區塊 */
height: 35px;
margin-top: 50px;
}
#commTab img {
align: left;
padding: 0 px;
vertical-align: -3px;
}
.commTab-area { /* 個別分頁區塊 */
margin: 30px auto;
}
.commTab-tab { /* 分頁按鈕 */
font: bold 20px Arial;
margin-right: 10px;
}
.commTab-goTop { /* 回到分頁選單按鈕 */
text-align: center;
margin-top: 50px;
font-size: 22px;
cursor: pointer;
}
.commTab-menu { /* 整個分頁區塊 */
margin: 0px -15px -10px -15px;
height: 25px;
border-bottom: 1px dotted #ccc;
}
.commTab-in { /* 作用中的分頁 */
color: #333;
vertical-align: 5px;
border: 1px solid #8abeb7;
border-left: 4px solid #8abeb7;
border-radius: 3px;
padding: 4px;
cursor: pointer;
background-color: #ffffff;
}
.commTab-out { /* 非作用中的分頁 */
color: #777;
vertical-align: 5px;
border: 1px solid #8abeb7;
border-radius: 3px;
padding: 4px 4px 4px 7px;
cursor: pointer;
background-color: #dde3dc;
}
.buttonAll { /* 回到分頁選單按鈕 */
cursor: pointer;
display: inline-block;
text-decoration: none;
font-weight: bold;
color: #fff;
color: rgba(255,255,255,1);
padding: 1px 5px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset;
}
.buttonAll:hover {
box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset,0 0 2px rgba(0,0,0,0.2);
opacity: 0.9;
}
.buttonAll:active {
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4) inset;
opacity: 1;
color: rgba(255,255,255,0.5);
}
.buttonGrey { /* 回到分頁選單按鈕 */
cursor: pointer;
border-radius: 4px;
background: #f2f2f2;
background: rgba(0,0,0,0.05);
border-color: #eee;
border-color: rgba(0,0,0,0.1);
color: #999;
color: rgba(0,0,0,0.5);
padding: 3px 5px;
}
/* 留言分頁 end*/
</style>


想要自訂 CSS 參數的話,請見綠字註釋,來找到對應修改的區塊。



四、安裝程式碼


接著請搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


請參照以上程式碼行號修改參數:

F:請參照綠色字串,填入預設要顯示的分頁代表數字

G:數字 5 可改為 FB 留言框最多顯示的留言數

H:如果部落格顏色是深色底,請改字串為 "dark"

N:由於過去發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流。

2014.8.3 新增:

I~K:這三行分別為 Blogger、Goolge+、Facebook 分頁上的文字。有讀者提出手機版面上,分頁會被斷行的情形,如果想要縮減整個區塊的寬度、避免被斷行的話,可以自行修改這些文字,或是留下空白字串(兩個雙引號)"",來達到這個目的。



五、擴充功能


如前所提,這個留言分頁工具是基本款,由於每個人需要的功能都不一樣,如果有其他客製需求,可用後面的聯絡表單與 WFU 聯繫:

  • 想新增留言分頁,例如 Disqus、「推文」、「私密留言
  • Blogger 以外的部落格想要安裝這個小工具
  • 其他功能請描述


聯絡表單:





六、常見 FAQ


日後若有常見問題,會持續補充在此。

Q1: 留言 #5 詢問如何隱藏 FB 分頁?

Ans: 請在 CSS 多加一行:

.commTab-tab[title="使用 FB 留言框"]{
display: none;
}


Q2: 留言 #7、8 詢問 G+ 留言內容太長時,無法完整顯示?

Ans: G+ 留言框外面是個透明的、有捲軸的框架,用滑鼠滾輪在留言內容捲動,就能把看不到的內容捲上來了。


Q3: 留言 #9 詢問按進 G+ 按鈕, 只是顯示"開始中...", 就這樣子停了下來. :( 沒法鍵入任何文字.?

Ans: G+ 留言框其實偶爾都會這樣,過一陣子應該自己就會修好了。可以用這個網址來檢測:「http://gdriv.es/comments」,輸入自己的網頁,就能測試是否為官方的問題,還是本文小工具的問題。


更多實用工具:

Google+ 分享文章時,如何讓縮圖以大尺寸呈現?

$
0
0
以前在 G+ 分享文章時,縮圖的尺寸比較小。現在他們了解到,社群行銷大圖才是王道!因此我們漸漸可以發現,目前很多 G+ 貼文的縮圖,都是以 "滿幅" 的大圖呈現,能夠快速吸引讀者的目光。

那麼需要具備哪些要件,才能在分享到 G+ 時,讓縮圖以大尺寸顯示呢?請見本文以下的說明。



一、G+ 大尺寸縮圖的原理


首先比較一下新、舊縮圖的差別,這是小縮圖的效果──




下面是大縮圖的貼文,效果一目了然──




根據「官方文件」,G+ 貼文符合兩大要件的話,就能出現大尺寸縮圖──


1. Schema.org 微型資料

G+ 官方建議網頁內容使用「schema.org 微型資料」的註解,如此 G+ 就能抓取正確的網頁標題、說明、縮圖等資訊。


2. 圖片尺寸

成為縮圖的圖片,必須符合兩個要件,才能以大尺寸呈現:

  • 寬度至少 400px
  • 圖片不能過扁,寬高的比例要在 5:2以內


官方文件還詳細提到了,當圖片大於多少 px 時,會以多大尺寸來呈現,有興趣可詳閱官方連結。不過其實沒有很重要,主要了解以上兩點就足夠了。以下分別針對 Blogger 平台與非 Blogger 平台,說明實作上要如何進行。






二、Blogger 平台的作法


1. 新範本

因為 Blogger 是 G+ 的關係企業,如果部落格使用新範本的話,範本內容已經幫我們把一切都打點好了,所以「Schema.org 微型資料」的部份不須操心,我們只要確保「文章中第一張圖(會成為縮圖)」的寬度大於 400px 即可


2. 其他狀況

但還是有很多狀況可能讓 G+ 縮圖無法成為大尺寸,例如:

  • 使用舊範本(例如 WFU BLOG)
  • 非官方範本
  • 使用新範本,但常改範本,不小心把關鍵內容改掉了

如果屬於以上狀況的話,請按以下步驟進行,來補全「Schema.org 微型資料」的內容──


A. 到後台 → 範本 → 編輯 HTML → 搜尋 <body ...>這一行 → 在其下一行,插入以下程式碼:

<b:if cond='data:blog.pageType == "index"'>
<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<meta expr:content='data:blog.title' itemprop='name' />
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description' />
</b:if>
</div>
</b:if>


B. 接著搜尋 <div class='post ...>這一行,應該會有兩個結果,第一個是行動版,可以不改;直接將第二個搜尋結果的整行字串,置換為下面的程式碼:

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='image_url' />
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId' />
<meta expr:content='data:post.id' itemprop='postId' />


存檔後即可,現在就找一篇有圖片的文章貼在 G+ 試試看吧!



三、非 Blogger 平台


其他平台的部落格,如果能修改範本的話(例如 wordpress),可將「Schema.org 微型資料」放入範本中(<body>之後的位置)。

無法修改範本的部落格,通常會幫站長在範本中建立好這些微型資料語法,例如 Xuite,所以也不用擔心貼文在 G+ 無法顯示大圖,只要圖片尺寸符合前述的規則。

而如果真的有某個平台無法改範本、又無法在 G+ 顯示大圖,那麼只能直接放在文章最前面的位置,加入以下程式碼:

<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting' style='display: none;'>
<meta content='填入要顯示的標題' itemprop='name'></meta>
<meta content='填入要顯示的描述文字' itemprop='description'></meta>
<meta content='填入圖片網址' itemprop='image_url'></meta>
</div>


這也就是說,每篇文章都要填一次這樣的內容,是有點麻煩,但對於無法修改範本的平台而言,這也是沒有辦法的事了。




上圖以 Xuite 為例,在文章最前面,填入微型資料語法,就能出現自訂的字串與指定顯示的大圖了。


Google+ 相關文章:

Blogger 各種疑難雜症發問管道, 及提問注意事項

$
0
0

(Pic from: pichost.me)
這篇為長期置頂公告,會固定出現在首頁第一篇,方便新讀者了解相關資訊。而本站的常客麻煩自動無視,於首頁想找新文章時,從第二篇開始看起即可。

相信 Blogger 使用者一定會有許多大大小小的問題、或各種需求,但 Blogger 這個平台跟台灣其他部落格不同,沒有客服人員能解答,只能靠使用者互相幫忙。

這篇文章提供使用者提問的管道,以及說明發問時應了解的技巧,有助於縮短溝通時間及得到答案。



一、Blogger 發問管道


首先,為何 Blogger 沒有客服人員、需要使用者互助,有興趣請參考這兩篇心得「Blogger 中文社群的定位」、「Blogger 的未來」。

目前而言,Blogger 疑難雜症 "比較有效" 的發問管道,在中文語系有以下這些──


1. Blogger 中文社群

位於 Google+ 的「Blogger 中文社群」,提供 Blogger 使用者交流資訊及提問的管道。雖然 G+ 的使用者不如 FB 多,但相對而言,FB 反而沒有 Blogger 的相關社團,因此 Blogger 使用者建議還是申請一個 G+ 帳號,方便在社群與同好交流。

而在社群發文之前,建議先閱讀「置頂討論串」,提供了許多重要資訊、G+ 操作要點、Blogger 新手文件等等。


2. WFU BLOG

在本站發問的話,有兩種管道:

  • 相關主題文章:如 WFU 有寫過相關文章的話,建議在相關文章留言,可讓主題集中,方便其他讀者查詢。另外,提問前可檢查一下文末是否有「常見FAQ」,通常詢問度高的問題可在此找到答案。
  • 留言板:沒有相關主題的話,Blogger 相關問題可在「留言板」提問。

而怎麼知道 WFU 有沒有寫過你要的相關文章呢?首先可參考「本站使用的 Hack 及工具」,另外也可參考「如何使用本站」,來找到需要的資源。


3. FB 粉絲團

如果是習慣使用 Facebook 的讀者,則可利用本站的「FB 粉絲團」發問。

稍微解釋一下,由於「FB調降粉絲團曝光率」,因此本站的 FB 粉絲團已經荒廢很久。而目前想到,粉絲團也可成為提問的管道,剛好可拿來讓習慣使用 FB 的讀者利用,希望不至於成為殭屍粉絲團。



二、提問技巧


「如何提問」這件事遠比我們想像的更困難,又或者可以說,「發問」很簡單,但「能否得到答案」這件事,遠比我們想像的更困難。

常常「發問者」覺得描述得很清楚,但他人卻如陷五里霧中。總之,「球」能否成功地由投手投出,再被捕手穩穩接住,是一門不小的學問,以下簡單整理一些要點,供提問者參考。

1. 提供完整資訊

進入「Blogger 官方論壇」,每則提問都會固定顯示以下訊息:

Please state the blog URL and any other details that you consider relevant, so we can address your issue quickly.

中文意思為,發問時請附上網址,以及任何其他你認為有關連、有影響的資訊(例如截圖、瀏覽器、作業環境、曾做過那些動作等等),方便了解發問者的環境與狀況,以利排除不相關因素。

如果發問時能做到這一點,應該有超過 50% 的機會能獲得解答;若無法附上相關資訊,多半問題會被無視,或是回答者得進行心靈感應,那麼答案可能會差距十萬八千里。


2. 提問口氣

由於 Blogger 沒有客服人員,發問時必須認知這是使用者互助的交流,因而避免開啟與客服應對的模式;同時詢問的文字建議多加修飾,避免被誤會為伸手牌。

總之,彼此的尊重及感謝,更能增加得到答案與協助的機會。


3. 如何縮短溝通時間

發問之前,預先做功課是必須的,可避免前述的「伸手牌」狀況。但不少發問者明明做了不少功課,可惜提問內容過於簡短,導致不知道他做過哪些努力與嘗試。以下是常見的狀況──

回答者:「你可以試試xxxxx」
發問者:「有啊,xxxxx我有試過,不過不行」
回答者:「你可以試試ooooo」
發問者:「有啊,ooooo我也有試過,但也是不行」

這樣是不是很浪費雙方的時間啊?聰明的發問者會把自己試過、不能走的路列出來,再詢問如何到達目的地,節省自己的時間,也讓回答者不會彈性疲乏。



三、提問範圍


1. 官方範本

如果發生在使用官方範本的狀況,屬於一般性的問題、適用範圍大,問題的答案可讓所有 Blogger 使用者受益,基於「網路資訊共享的精神」,在本站提問時 WFU 會盡力解答。


2. 非官方範本

如果發生在非官方範本的狀況,不屬於普遍性的問題、適用範圍小,問題的答案大概只有發問者受益,WFU 無法在本站無償花時間解答。

如果沒有經費來解決問題的話,這類問題可以到 Blogger 社群碰碰運氣,看有沒有成員能幫助,或是到國外論壇詢問,當然這需要英文能力。有經費的話,可參考「諮詢服務」這個網頁來進行。



四、其他注意事項


1. 私訊或私密留言

如前所述,基於網路資訊共享的精神,為了讓時間做更有效的運用,花同樣的時間如果能讓所有人受益,那麼跟只有一個人受益比較起來,我選擇不回答私訊或私密留言的問題。

因此,如果不是很有私交的讀者,建議避免用私訊或私密留言的方式提問,請選擇公開提問。


2. 有匿名需要時

有時,公開提問代表著身份的曝光,如果對隱私有考量的讀者,一樣參考「諮詢服務」這個網頁來進行,將視為私人諮詢。


3. 網址不想公開時

如果不是隱私的考量,身份曝光沒關係,只是純粹某個網站不想被知道,那麼這樣的情況下,WFU 可以接受用私密留言的方式,每篇文章後面的留言區塊 → 留言分頁最右邊的「悄悄話」適合這種用途。

一樣基於網路資訊共享的精神,問答結束後 WFU 會將內容從私密留言中複製到 Blogger 留言區塊,然後去除網址的部份,讓知識及經驗繼續在網路上流通下去。

商品化的 Blogger 工具

$
0
0

(Pic from: allthingsaustralian.com.au)
本篇以下的各式工具,都具有相當的技術成份,而且無法標準化,只能依客製模式生產,因此商品化算是不得不然。

不過這些工具對於吸引、留住讀者的功能性而言,確實也都有其價值,對於規模較大的網站會有幫助,有需要的站長可與我聯繫。


 


一、留言分頁+留言數量顯示


在 Blogger 使用留言分頁,來安裝 G+、FB 等留言框,本身已經需要一定的技術了,不過規模大的網站,當留言數量大的時候,若是其他的分頁裡面有許多留言,訪客是不會知道的。

依據一般訪客的習性(惰性),看不到的多半不會去理會他,因此未開啟的分頁,那些留言就失去了與新的讀者互動的機會;對於站長而言,就是損失了讀者的黏著度、互動度這些機會。




安裝了這個小工具後,各種留言分頁有多少留言數量,全部一目了然,讀者也會好奇其他的留言內容是什麼,那麼就拉長了訪客的停留時間、增加了激盪更多火花的機會。

效果展示請前往以下頁面:




這個工具的基本款介紹請見這篇文章:


基本款只有三個分頁、沒有留言數量統計。需要擴充哪些留言分頁、或是特定需求的功能、客製分頁樣式,可使用文末聯絡表單與我聯繫。 



二、熱門文章──依瀏覽數排序


Blogger 雖然有熱門文章小工具,但無法顯示文章瀏覽數。對於規模比較大的網站而言,把瀏覽數顯示出來的震懾性十足,新訪客一見就會知道這是 "權威性網站",自然會去仔細拜讀每篇作品。




效果展示請前往以下頁面:



功能:
  • 可顯示在網頁,也可顯示在側邊欄
  • 能定期更新文章瀏覽數據,並據此排序
  • 可自訂顯示文章數、圖片尺寸等等細節
 


三、熱門文章──依按讚數排序


除了使用瀏覽數排序,也可讓文章依照按 "讚" 的數量排序。如果網站規模不錯的話,那麼這個工具的效果很好,能讓新訪客先從最有話題性的文章來認識站長。





效果展示請前往以下頁面:



功能:
  • 可顯示在網頁,也可顯示在側邊欄
  • 能定期更新文章按讚數,並據此排序
  • 可自訂顯示文章數、圖片尺寸等等細節
 


四、熱門文章──按 +1 數排序


G+ 的使用者比不上 FB 的數量,不過在 G+ 圈的站長還是不少,如果經營 G+ 有成,「+1」數也是很可觀的。




上圖為「文章列表極速版__依日期排列__「+1」統計」的展示效果,同樣能實現「依瀏覽數排序」、「依按讚數排序」的效果及設定。



五、其他


日後有新工具會持續補充在本篇文章。如果有其他任何部落格、 Blogger 客製功能需求,請參考這篇文章:



若有本文以上工具的需求,請使用下面的表單與我聯繫──

聯絡表單:

為何瀏覽數會爆增?揭開 Blogger 快樂流量的真面目

$
0
0

(Pic from: 3dprint.com)
曾寫過一篇「Blogger 後台文章瀏覽數與 Google Analytics(簡稱GA) 數據差別很大的原因」,大致說明 Blogger 與 GA 各自的計數原理。

當然,在正常的使用下,Blogger 官方的統計數字已經比 GA 高;而本篇要揭露的,是在不經意的使用下、甚或是刻意的使用下,Blogger 官方數據是會爆增的。

因此,本文雖屬學術分析,但請小心服用,以免落入數字陷阱;最好是了解原理後,檢測範本中有無誤用的程式,並使用替代方案。



一、Blogger 正常的計數原理


簡單說明一下 Blogger 如何進行計數:
  • 任何瀏覽器、任何身份開啟頁面一次,就算一個瀏覽數。
  • 所以自己開啟頁面也會算一次
  • 機器人來爬也會算一次

因此 GA 數據比較客觀的主要原因為,三十分鐘內、同一頁面的重複點擊,不會計算瀏覽量,如此可排除人為(或機器)點擊操作瀏覽量的因素

Blogger 雖可在後台選擇「不追蹤我自己的網頁瀏覽量」,但每個瀏覽器都得設定一次、且 cookie 的狀態我們不容易控制,WFU 認為成效不彰,比較好的解決方案可參考這篇「Blogger 與 GA 如何不追蹤自己的瀏覽量」。






二、Blogger 不正常的計數


前面講的是正常情況下 Blogger 的計數方式,現在將要做個小實驗,展示一下如何讓「看不到的頁面也能增加瀏覽量」。

1. 紀錄原瀏覽量

請在自己的部落格(開一個沒人知道的部落格比較準確),在後台隨意挑兩篇文章,分別記下:

  • 瀏覽量
  • 文章網址




如上圖,紅框的「檢視」可複製網址,右邊可看到參加測試的兩篇文章,瀏覽量為 93、100。


2. 安裝程式碼

開一篇新文章,貼上以下程式碼:


F、G行,將前面紀錄的兩篇文章網址,分別填入雙引號內,即可存檔。


3. 執行效果

比較簡單的作法是,使用瀏覽器的無痕視窗(例如 chrome)來開啟這篇新文章,可以避免 cookie 的效果。開啟後,這篇文章的程式碼,會自動載入「填入網址的兩篇文章」的文章標題。效果大致如下圖──




圖中兩個箭頭,即為測試的兩篇文章,自動撈出的標題字串。


4. 奇妙的瀏覽數

我們立刻回到 Blogger 後台,檢查一下文章瀏覽數,赫然發現──



剛剛那兩篇文章,瀏覽數各自多了一次,可是我們明明沒有開啟這兩篇文章啊!這是怎麼回事呢?



三、特殊計數原理說明


前面的程式碼,使用了 Jquery 的 load 函數,只載入指定的兩篇文章的標題,並未載入整篇文章。

但是對於 Blogger 計數器而言,無論這篇文章載入後顯示整篇文章、還是只顯示一個字元,都會當作這篇文章被瀏覽一次。這樣的運作模式,其實就類似機器人的爬取。

如果有人想要取巧,那麼了解以上原理後,就會知道怎麼操作。不過相信大部分使用者是不會這麼做,然而,如果對自己範本內容不了解的話,說不定你就是「快樂流量程式」的使用者喔!



四、快樂流量範例 1


如果曾經使用「Blogger 首頁公佈欄」,這個小工具正是使用 Jquery 的 load 函數,來動態載入「公佈欄」這篇文章。

由於設計這個工具的初衷,是讓公佈欄只在首頁出現,所以最多是訪客讀取首頁時,「公佈欄」這篇文章的瀏覽數(及網站總瀏覽數)會 +1 而已。

不過相信有的使用者會想要公佈欄在每個頁面都出現,那麼就會發生,一天之中「公佈欄」的瀏覽數 = 該日的總瀏覽數,這也代表網站的總瀏覽數被灌水了一倍

看到這樣的事會不會很 "震驚" 呢?後面還有更 "震驚" 的。



五、快樂流量範例 2


國內、國外都有流傳一些「上一頁」、「下一頁」的外掛小工具,更多的是非官方範本中已經內建這個功能,直接放在文章後面(我所知的有 Ivy 範本),用來取代原本 Blogger 頁尾的「上一篇文章」、「下一篇文章」功能,因為能顯示文章標題,才能引起訪客的注意,進而增加點擊率。

這些所有的小工具,其原理都是一模一樣,利用 jquery 來動態載入上一篇、下一篇文章後,再擷取文章標題來顯示。

相信有跟著一起做「二、Blogger 不正常的計數」的讀者,現在都已經知道,這樣子的程式,除了該篇文章會被計數,連「上一篇」、「下一篇」這兩篇文章也會被計數。

這代表什麼呢?開啟一篇文章就能讓網站瀏覽量三倍增啊!相信有裝這類外掛的讀者,現在心中應該是震驚莫名了~



(pic from: agilitrix.com)

知道真相總是殘酷的,不過也不必後悔點了這篇文章進來看,WFU 仍會提供解決方案,決定權在讀者手中。您可選擇繼續服用藍色藥丸,也可選擇服用以下紅色藥丸──


這是目前唯一未使用 jquery 動態載入的解決方案,因此不會造成其他文章瀏覽數異常,副作用為──部落格總瀏覽數歸於平淡~



六、小結


知道本文的原理後,熟悉 js 的使用者會有辦法能讓 Blogger 瀏覽量十倍增,讀一頁等於讀十頁。不過相信認真經營部落格的站長,對這樣的事不會有興趣,因為如果將來打開名氣得到合作機會,業主會要求看 GA 的數據,到時一比對 Blogger 的瀏覽量就糗大了。

所以了解這件事的意義在於,別不小心裝了、或錯誤使用某些程式,而誤以為自己網站的瀏覽量真的有這麼大,名不符實總是不太好的~


更多實用工具:

在 Blogger 標籤動手腳, 擺盜文者一道!

$
0
0

(Pic from: Lois Lin FB)
前幾天「蘋果報導」了一位美少女部落客,在文章安插「台灣是主權獨立的國家」字串,讓盜文者貼到大陸網站而渾然不覺,為何她能成功呢?

因為她把字串埋在標籤,而一般讀者看完本文後,通常不會注意標籤的字串,最後 copy & paste 就把標籤也一併複製了。

+跪婦阿冠 bigsishead 在這個「Blogger中文社群討論串」詢問 "blogger平台該怎麼設tag或埋連結比較能被一起盜過去?",WFU 想到兩種方式可以運用,以下說明原理及操作實例。



一、操作原理


1. 標籤較佳的擺放位置

其實蘋果的這個個案,算是一個比較粗線條的盜文者,因為原文網頁的標籤,位置是放在文章內容之後,而稍微比較注意的盜文者,只會複製文章內容,那麼多半是不會複製到文章後面的標籤內容。

而標籤比較恰當的擺放位置,建議放在文章標題的附近,對讀者而言會有較佳的導覽效果;以本文來說,標籤若放在文章標題下方,那麼盜文者在複製時,從文章標題一路選取下來,一定會複製到標籤的內容,那麼我們在標籤埋的暗樁,就能順利完成任務了。


2. Blogger 範本的標籤區塊

想要把標籤放在文章標題下方,首先得找到「標籤」區塊的程式碼,接著是找到「文章標題」的程式碼。

請參照「Blogger 範本__(三)文章及留言區塊的程式碼」→「三、文章區塊」,可找到「11. 標籤」以及「1. 文章標題」,相信對修改範本熟悉的讀者而言,這樣的說明已經知道如何進行了。

若還不清楚的話,請往下看實例操作。






二、實作說明


1. 標籤區塊程式碼

請到後台「範本」→「編輯 HTML」,搜尋字串 <span class='post-labels'>,會看到以下這一段程式碼

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>


想要安插新的標籤內容,請見以下範例:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
, <a href='輸入連結網址' rel='tag'>輸入標籤字串</a>
</b:if>
</span>

插入以上有顏色的那一行字串,填入對應的連結、字串即可,注意最前面有個逗號 ","。


2. 文章標題區塊程式碼

接著在範本搜尋字串 <b:if cond='data:post.title'>,應該會有兩個搜尋結果,第一個是行動版內容、第二個是網頁版內容,請依自己需求決定改哪個。

搜尋到後,會看到以下內容:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

把步驟 1 修改後的程式碼,貼到以上這一大段的程式碼下一行即可。

請見本文標題下方標籤區塊的模擬效果,標籤多了一個 "台灣是主權獨立的國家"。



三、使用 js 語法


做這種沒有實質效用的標籤,被搜尋引擎索引的話,跟文章內容不相關,也不知道會不會有什麼壞處,那麼或許使用 js 語法來動態產生標籤,既不會被索引,又可達到我們的需求。

1. 準備動作

按照「二、實作說明」的步驟 1,但不要新增內容,直接將原始的標籤區塊程式碼,貼到步驟 2 文章標題區塊程式碼的下一行即可。


2. 語法範例


  • 以上 I 行的紅色字串,請填入自訂的連結、及字串。
  • 如果想安插多個標籤,重複 I 行的內容,插到 I~J 之間即可


3. 安裝位置

如果想要整個網站的文章都套用的話,請在範本中搜尋 </body>這個字串,找到後在此字串的前一行,插入步驟 2 的 js 語法即可。

如果只想在特定文章實現這個功能的話,請在該篇文章的最後面,放入步驟 2 的 js 語法即可。



四、絕妙應用


1. 應用方法

會寫這篇文章,主要是藉由這個小工具,想到一個對付盜文者的妙招,值得推廣一下。

如前所述,對於盜文者而言,標籤是不受注目、沒有殺傷力的一個區塊,尤其標籤數量一多時,更是懶得一一檢視,所以我們可以發揮想像力,設定一個特殊字串,讓搜尋引擎搜尋這個字串時,一定排名在最前面,例如 "wfublog",絕對不會有其他文章、網站使用這個字串吧!所以本文文章標題下方的標籤,我也弄了這個當範例。

當然,如果標籤名稱大多是中文,那麼這個暗樁字串也最好是中文的排列組合,可以故意弄個錯字,保持這個字串的獨特性


2. 抓賊方法

如果自己網站真的成為盜文者標的,那麼利用這個方法,可以讓盜文者把這些特殊的自製字串標籤,一起複製回他的網站,並且讓搜尋引擎索引。

我們定期要做的事,就是 google 這些特殊字串,看看獎落誰家,搜尋方式如下:

wfublog -site:www.wfublog.com

前面的 "wfublog" 就是要搜尋的字串,"-site" 代表不要搜尋的網站,後面填入自己的網址即可,搜尋結果就會排除自己的網站,進而抓出誰盜用這個字串。

當然,"wfublog" 這字串只是舉例,效果不是太好,希望你能設計出更好的防盜字串,保衛自己的著作權。


處理盜文相關文章:

Fancybox, 既優雅又八面玲瓏的燈箱效果 (1)安裝說明

$
0
0
圖片為主的網站若使用燈箱效果,當特效執行時,相信能給予讀者很有質感的加分印象。而這次介紹的 fancybox 燈箱外掛,除了有優雅的展示畫面,更令人驚豔的是,就算不使用圖片的燈箱效果,只要發揮創意,Fancybox 還能做各種應用,例如文字幻燈片、影片彈出、以及這篇 +Mark X 介紹的「文字提示視窗」。而會寫 js、jquery 的話,fancybox 也有 API 能實現各種想像力。

不過讀者請記住一個原則,功能越強、設定越多的的工具,就越不容易學習、操作與上手;功能越簡單、越單一的工具,就越容易安裝,不過也沒什麼項目能設定。

而 fancybox 則是屬於,不但設定不容易,連基本安裝都可能碰壁的一套工具。看了一些網路教學,發現要實現基礎的功能都很有難度,不過要歸咎起來的話,算是官方的問題比較大。而本文的說明內容,相信至少讓讀者能正確安裝,並了解如何套用官方說明書。




一、前言


前言不是已經一大串了嗎,怎麼還有前言?在開始之前,要先了解的概念真的非常多,所以請耐心看下去。

1. 官方說明

首先,必須說「官方說明」做得很差、不利閱讀,且所有主要訊息擠在一個狹長頁面。依照官方的安裝方式,只適合自行架站、有主機的網站,對於一般部落格平台完全不適用,所有的預設小圖示都將無法顯示。

或許從另一個角度看,fancybox 的目標不擺在部落格平台吧!他的客群可能只想針對自架站,這樣才比較有獲利來源(下一點說明)。


2. 非商業網站限定

這個外掛允許個人、非商業網站使用,因此商業網站請參考這個「使用價格」頁面,有提供單一、及不限網站使用的價格選項。


3. 系列文

會找到這個外掛,主要是想取代 Blogger 的官方燈箱效果,從而發現 fancybox 可以模擬的很好。這個系列文目前預定至少有三篇,第一篇只適合喜歡自訂功能、喜歡折騰的讀者。

而第二篇,會提供模擬 Blogger 燈箱效果的 fancybox 懶人包。如果有相同需求的讀者,或許可以等下一篇(這一篇你可能看不下去)。






二、部落格安裝 fancybox 的方法


前面提到,按照官方說明來安裝 fancybox 的話,因為那些 CSS 安裝檔,裡面附了許多預設圖檔的連結,而那些圖檔,得一併上傳到自己的主機。但一般非自行架站的部落格,哪來的主機呢?所以 CSS 內的圖檔路徑當然都讀不到圖了。




請參照以上官網 →「Instructions」,這裡是安裝的程式碼,不過先別複製,因為這些路徑都是不存在的,請依照以下步驟──


1. 下載檔案

從官網頁面往下移動,會看到「License / Download」→ 按下「Download v2.1.5」,可下載所有需要的原始檔。

接著解壓縮成一個資料夾「fancyapps-fancyBox-18d1712」→ 裡面有很多檔案,不過重要的是 Lib、Source 這兩個資料夾 → 將 Lib 資料夾中的 jquery.mousewheel-?.?.?.pack.js 這個檔案,移動到 Source 資料夾裡面。

最後進入 Source 資料夾,將 Helpers 資料夾裡面的所有檔案,移動到 Source 資料夾,這樣所有的檔案就都集中在一起了,如下圖──




2. 上傳檔案方式 1

有兩種上傳檔案的方式,第一個方式比較麻煩,但也許比較好也說不定。

先將 Source 資料夾所有圖檔上傳到自己的圖床空間,然後逐一檢視 Source 資料夾所有的 CSS 檔,檢查有外連圖檔的敘述,將那些圖檔的連結,改成自己的圖床連結,這樣才能讀得到這些圖。

最後將所有的 js、CSS 檔上傳到自己的網路空間即可。怕麻煩的讀者,可採用第二種方式──Google Drive。


3. 上傳檔案方式 2

將 Source 資料夾所有檔案(包含圖檔)上傳到 Google Drive,請參考「外連 js 檔──Google Drive」→「三、Google Drive 的操作」。

當所有的檔案都放在 Google Drive 的同一個資料夾、並確定是公開分享的狀態,那些圖檔不必特別設定路徑,就能被 CSS 檔讀取到(因為放在同一個資料夾),因此這是比較方便的操作方式。


4. 取得外連路徑

安裝程式碼之前,要取得剛剛上傳的那些 js、CSS 檔路徑,如果是 Google Drive,前面的教學文章連結,已經有說明取得檔案路徑的方法,請把這些外連路徑紀錄起來。



三、安裝程式碼


做了這麼多動作,終於可以開始安裝程式碼,回到官方網頁 →「Instructions」,逐一說明如下,這部份的所有程式碼請放在範本中 </head>之前:

1. Jquery

先檢查是否範本中已經有安裝 jquery、且版本在 1.8 以上。如果否的話,請增加以下這一行

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

2. 滑鼠滾輪外掛

這一項為非必要安裝,不過 WFU 建議安裝,因為提供讀者便利的操作方式,以下請填入對應的檔案外連路徑:

<script type="text/javascript" src="填入jquery.mousewheel-?.?.?.pack.js路徑"></script>


3. 主程式碼

主程式碼必須安裝,以下請填入對應的檔案外連路徑:

<link rel="stylesheet" href="填入jquery.fancybox.css?v=2.1.5路徑" type="text/css" media="screen" />
<script type="text/javascript" src="填入jquery.fancybox.pack.js?v=2.1.5路徑"></script>


4. 輔助功能程式碼

這部份為非必要安裝,請依自己需求安裝。檔案中的字串分別代表:
  • "button":按鈕
  • "media":多媒體
  • "thumbs":縮圖

以下請填入對應的檔案外連路徑:

<link rel="stylesheet" href="填入jquery.fancybox-buttons.css?v=1.0.5路徑" type="text/css" media="screen" />
<script type="text/javascript" src="填入jquery.fancybox-buttons.js?v=1.0.5路徑"></script>
<script type="text/javascript" src="填入jquery.fancybox-media.js?v=1.0.6路徑"></script>

<link rel="stylesheet" href="填入jquery.fancybox-thumbs.css?v=1.0.7路徑" type="text/css" media="screen" />
<script type="text/javascript" src="填入jquery.fancybox-thumbs.js?v=1.0.7路徑"></script>




四、簡易使用說明


1. 官方操作說明

根據官方的說明,要使用 fancybox 效果,操作方法其實滿繁複的,首先,想出現燈箱特效的圖片,得手動加入以下 html 語法:

<a class="fancybox" rel="group" href="大圖網址1.jpg"><img src="小圖網址1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="大圖網址2.jpg"><img src="小圖網址2.jpg" alt="" /></a>


然後在範本中 </body>字串的前一行,插入以下程式碼:

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>



2. 前導程式

當部落格有數十篇、數百篇文章,根本不可能一一叫出來,把圖片 html 碼改成這個格式來展示燈箱效果,這可是一個巨大的工程。

為了解決這個問題,WFU 寫了一個前導程式,可不必修改 html 碼,請放在範本中 </body>前一行即可:



請根據以上程式碼行號修改──

E:紅色字串 .post-body是 Blogger 平台的文章區塊,如果非 Blogger 平台,建議利用「Chrome 開發人員工具」找出文章區塊的 class 或 id,然後置換此字串(class 的前面要加 ".",而 id 前面要加 "#")。

M、P:這兩行的藍色字串 "fancybox" 可自訂,不過這兩處字串必須一致。

P:綠色字串也可自訂。


稍微說明一下這個方便的前導程式,做了哪些事情:

  • 只抓出文章區塊的圖片來展示燈箱效果,自動加上 fancybox 需要的參數,不需要手動設定
  • facnybox 預設有超連結的圖片,才能展示燈箱效果,但網頁有的圖片可能當初忘了設定超連結,那麼這個前導程式可以自動補上超連結
  • 網頁上很多小圖示、按鈕,不需要加入燈箱展示,因此預設圖片像素寬度 100 以下時,不進行燈箱展示

使用以上簡便的前導程式後,就可馬上先測試一下 fancybox 的效果。如果都按照本文步驟進行,安裝全部的套件,那麼沒使用任何進階設定、最陽春的效果也能跟這個 DEMO 頁面一樣優雅:




五、小結


fancybox 的安裝並不省事,否則也不需要特地寫一篇文章了。有的讀者可能覺得麻煩,而產生這樣的想法:打開 DEMO 頁面、或本站的原始碼,直接找 js、css 的連結複製到自己的網站使用,只要幾秒鐘就完成了。

這樣的作法,短時間是見效的,不過 WFU 可以直接公佈結果,請參考這篇「Google Drive(js檔)流量限速,建議自行分流」。等某天檔案失效了,還是得回來看這篇,乖乖自行上傳所有檔案。

另外,如果想要更豐富的特效、縮圖等等,還需要加入更多的 js 語法參數,這部份將有待其餘系列文的補充說明。


更多實用工具:

需不需要從 Blogger 搬家到 Wordpress 的觀念釐清

$
0
0

(Pic from: sehabitat.com)
部落格的成長週期若是大略區分,可看成三個階段:

1. 免費部落格平台:例如痞客邦
2. BLOGGER
3. 自架站:例如 Wordpress(簡稱WP)等需要租用主機的平台

這三個階段有何差別,花簡短篇幅介紹一下。



一、部落格三階段


1. 初始期

第一階段類似國宅或宿舍,每一戶的擺設、裝潢統一由平台提供,看起來樣式差不多。如果只需要專心寫文章,不在意家具跟鄰居一樣,那麼住起來也是挺熱鬧、舒服的。當然,上頭管委會有任何新的規章出來,所有用戶只能欣然接受、或是選擇出走。


2. 獨立期

第二階段搬出宿舍,挑個滿意的房子、打掉隔間,重新裝潢成三房兩廳,厲害一點還可隔一個儲藏室(利用 Google 試算表當小型資料庫),在自己的窩自由自在不受拘束,就是少了以前跟左右鄰居串門子的機會。


3. 創業期

攢的錢夠多以後,除了基本的居住需求、還想創一番事業,於是租了個黃金店面、建立金流系統、購物車等等,還要負擔每個月的租金人事維護費用(主機圖床流量等),不過如果收入大於支出,那麼就是值得投資的事業。



二、評估方針


對於該選擇哪個平台,主要當然是評估自身的狀況與需求。沒有什麼額外需求時,一輩子都待在免費部落格平台是有可能的。對於要不要前進到下一個階段,只要需求到了,那就換環境吧!

不過也有很多人選擇環境時,不是基於需求考量,例如家世顯赫的人有足夠資金,那麼也是能選擇住在黃金店面,但是不營業、把家裡弄得漂漂亮亮的,只要能負擔經常性支出即可。

所以這麼說來,可以總結出兩種評估方針:一種是依照需求,一種是依照財力。

財力就先不談,這篇要談的是,如果依照需求來選擇 Blogger 或獨立架站(WP)時,是否有哪些概念需要釐清,來幫助自己找到適合的選擇。






三、釐清 Blogger 的概念


以下採 Q & A 的方式,問題的抽樣來自「Blogger 搬家到自架WordPress部落格」,因為 WFU 對 WP 不熟,因此只針對部份提到 Blogger 的敘述做釐清;而沒有提到的部份,還是可以參考該篇的敘述,當作自己需求的參考。

WP 的專業內容與服務、業務可參考該篇,而 Blogger 的部份請參照以下──


Q1: Blogger的上手門檻較高...市面上必較少看到關於Blogger的中文教學

Ans: google 需要的關鍵字,就有很多中文的分享教學,而最大宗的中文教學就是目前讀者看到的這個網站。可參考「如何使用本站」,多數 Blogger 使用者會遇到的問題,在這裡都能找到解答。


Q2: 官方文件不夠詳細,多數為英文資料

Ans: 請參考「Blogger 新手入門」→「一、官方說明文件」,這兩個官方連結都是全中文敘述,內容非常的詳盡,任何新手問題在這裡都能得到解答。


Q3: 圖片儲存在Google中,那你搬家到WordPress,還是看不到啊!

Ans: Blogger 圖片儲存在 PICASA 空間,也就是現在的 G+ 相簿,只要圖片連結在,就看得到。


Q4: 圖片還是在Blogger上面,哪天Blogger收了,圖片是不是就不見了?

Ans: Blogger 圖片儲存在 G+,哪天若是 Blogger 收了,只要 G+ 相簿沒有倒就沒關係。因此比起 Blogger,WFU 更擔心 G+ 相簿倒。


Q5: 原先使用Blogger的用戶,因為看到無名的關閉,怕問題發生到自己身上

Ans: Blogger 會不會關閉這件事,用這個「Blogger中文社群討論串」來解釋算滿貼切的,"一個產品會不會收攤,從商業經營的角度來看就比較容易判斷,Google Reader 不能賺錢、而 Blogger 可以賺錢,誰會有錢不賺呢~" → 「Blogger 能從 Adsense 賺到收益,且支出不大」,是個賺錢的部門,目前 Google 沒什麼理由關閉賺錢的部門。


Q6: WP 不會被Bing或Yahoo排擠,SEO強化,有用過Blogger的使用者,會覺得自己Google搜尋進來的人比較多,反倒是Yahoo和Bing搜尋進來的使用者較少(因為Blogger是Google的),但如果換成WordPress就沒有服務偏好方,會讓兩家的搜尋引擎正常進來,讓你把握住兩邊來的美好流量。

Ans: 根據這個「Blogger中文社群討論串」,從 Blogger 搬到 WP 的站長 +魏子靖 留言,來自 Yahoo 的流量還是無法與以前相比,供讀者參考。


Q7:如果你是自己綁網址,那麼Blogger大陸應該也可以看到,但是圖片看不到

Ans: 這一點比較複雜,算對也不是、不對也不是。請參考「如何讓大陸讀者能看到 Blogger 網頁及 Picasa 圖片」,原本 PICASA 圖片可經由這篇文章的技巧,讓大陸讀者看到。

不過前陣子 Google 相關產品又遭大陸封鎖,WFU 在 G+ 的 Adsense 社群(Learn with Google for Publishers 繁體中文發佈商社群)詢問此事,香港網友 +企業號 Enterpr1se回答「每年 64 都會這樣子,見慣不怪」。由於此社群非公開的社群,有興趣的讀者可加入此社群,搜尋 wayne 的文章可看到此篇。


目前節錄以上,日後如有其他需要釐清的概念,也會持續補充到本篇。



四、其他評判要點


1. 在階段 1 與階段 2,財力不足時,部落格平台唯一需要擔心的,算是圖片了,其他的資料都還好。如果對 G+ 相簿、Flickr 這類世界龍頭的圖床仍不放心的話,WFU 不反對初始階段就買空間來當圖床,只要財力充沛、有認知要繳一輩子的話。

2. 另外,WP 站長 +企業號 Enterpr1se於「Fancybox, 既優雅又八面玲瓏的燈箱效果」留言 #4 表示,"blogger 還好一點,fancybox...如果是自架 wordpress 就會加重伺服器的負擔 (如果人流很多的話)"。這段引言的意思是,資本不夠粗的話,必須謹慎評估自己的流量、伺服器使用程度,多裝個小外掛可能也要衡量一下。



五、小結


這篇的內容,不在於說服任何人不要從 Blogger 跳槽到 WP ,相反的,朋友曾詢問「會員系統」能否做到的事宜,而 WFU 也誠實建議「在...的情況下,乾脆搬家到 WP」。

就像 3C 消費品,沒有最棒的機種,只有最適合自己的機種,所以一切都是看自身的預算與需求。時候到了就該搬家,而能否適切評估自己的財力與需求正是關鍵。


延伸閱讀:
Viewing all 787 articles
Browse latest View live