WFU BLOG

「相關文章+任意尺寸縮圖」的留言#24，詢問了這個問題："Blogger 文章裡相片在 google drive 時，看不到縮圖"。一般而言，很少使用者會把 Google Drive 當作圖床，且如果在 Blogger 使用的話有一些缺點及後遺症，那麼哪些族群可能會這麼做呢？

前陣子 Yahoo、無名的搬家潮期間，印象中看過一篇文章教使用者把 yahoo 的圖搬到 google drive 當圖床，因此相信有不少使用者這麼做。藉這個機會宣導一下，如果曾使用 google drive 當圖床的話，建議找時間把圖片搬到 picasa (G+相簿)，在 Blogger 會是比較長遠的選項。

以下先說明無法抓到縮圖的原理，想直接看 Google Drive 不適合當圖床的理由，也就是 Blogger 使用 PICASA 當圖床的三大好處，請跳「二、使用 Google Drive 當圖床的影響」。

一、Blogger 文章 feed 縮圖原理解析

1. 首先可參考「選擇喜歡的圖片當作 Blogger 文章縮圖」，Blogger 會選取文章中的第一張圖片來製作縮圖，並儲存在後台的文章 feed 資料中。

2. 從 feed 撈縮圖資料的原理可參考「Blogger 最新文章＋任意尺寸縮圖」，不過這篇講的內容以 json 為主，需要先有一點硬知識，下面用比較簡單的方式說明。

3. 我用測試網站，一篇文章放 PICASA 圖床的圖片，其他文章放非 PICASA 圖床的圖片。接著在網址貼上以下格式可顯示 Blogger 的文章 feed 內容：

http://網站名稱.blogspot.com/feeds/posts/summary

以下擷取部分 feed 內容：

<link rel='alternate' type='text/html' href='http://wfu-blog.blogspot.com/2013/05/prv-abc.html' title='隨機輪播 Blogger 的標頭(banner)圖片'/><author><name>Wayne Fu</name><uri>https://plus.google.com/108990319112241335296</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//lh6.googleusercontent.com/-7j1nFs9KS6o/AAAAAAAAAAI/AAAAAAAAHpM/OnRfH_XpFq0/s512-c/photo.jpg'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://4.bp.blogspot.com/-5Mxum2tfdCw/Ukpwn2l45lI/AAAAAAAAH1I/Cx_RS4kCRCA/s72-c/Blogger.png' height='72' width='72'/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-3513801837917459549.post-7656013173114185112</id><published>2012-10-02T13:27:00.001+08:00</published><updated>2013-10-23T11:28:07.808+08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='電腦-blogger'/><category scheme='http://www.blogger.com/atom/ns#' term='電腦-google'/><title type='text'>Blogger 如何安裝兩個相同的小工具？</title><summary type='text'></summary><link rel='replies' type='application/atom+xml' href='http://wfu-blog.blogspot.com/feeds/7656013173114185112/comments/default' title='張貼留言'/><link rel='replies' type='text/html' href='http://wfu-blog.blogspot.com/2012/10/blog-post.html#comment-form' title='0 個意見'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/3513801837917459549/posts/default/7656013173114185112'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/3513801837917459549/posts/default/7656013173114185112'/><link rel='alternate' type='text/html' href='http://wfu-blog.blogspot.com/2012/10/blog-post.html' title='Blogger 如何安裝兩個相同的小工具？'/><author><name>Wayne Fu</name><uri>https://plus.google.com/108990319112241335296</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//lh6.googleusercontent.com/-7j1nFs9KS6o/AAAAAAAAAAI/AAAAAAAAHpM/OnRfH_XpFq0/s512-c/photo.jpg'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-3513801837917459549.post-5978107504625714407</id><published>2012-09-06T19:30:00.000+08:00</published><updated>2013-10-23T11:28:16.015+08:00</updated>

A. 紅色字串即為第一篇文章的縮圖資料，從圖片網址可知是從 blogger 上傳到 PICASA 圖床，自動產生的縮圖尺寸為 72px、正方形(後面會詳細說明)。且紅色字串的前後為 </author>、<thr:total>0</thr:total>類似這樣的藍色字串。

B. 在底部附近可看到第二組藍色字串(第二篇文章的資料)，但中間並沒有包含紅色字串(縮圖資料)，因為這是用了 flickr 及其他圖床測試的結果，均無法產生縮圖資料。

因此結論為，在 Blogger 中要正常顯示文章縮圖，最好使用 PICASA 圖床、或由 Blogger上傳。另外，若想得知網站的縮圖資料是否正常，可由以上步驟來檢驗。

二、使用 Google Drive 當圖床的影響

1. 無法使用縮圖的功能

從上面的說明可瞭解， Blogger 文章 feed 無法產生非 PICASA 圖床的縮圖，那麼如果網站有安裝下列工具的話(或使用動態檢視範本)就可能看不到縮圖：

最後一項不少部落格會安裝，就是頁首有大大的圖片、會隨機輪播文章圖片這樣的小工具。

2. 圖床容量有限制

Google Drive 有容量限制，而 PICASA 可技術性達到無容量上限，詳細內容可參考這篇「PICASA 官方說明」，簡單摘要如下：

使用 PICASA 當圖床，800 x 800 以下的圖片無儲存空間限制。
使用 PICASA 當圖床且已使用 G+ 帳號，2048 x 2048 以下的圖片無儲存空間限制。
而且 G+ 會自動將所有上載的相片縮小到 2048 像素，這代表使用 G+ 永遠不會有儲存空間的問題。

3. Picasa 的網址參數

PICASA 的圖片都可經由修改網址參數，來達到調整實際圖片尺寸的效果，詳細說明請參考「Blogger 熱門文章＋任意尺寸縮圖」→「一、PICASA 圖片規則」。

這有很多好處，例如以下應用：

A.一張比較大的圖片，可以修改參數後，讓比較小的尺寸在不同的情境使用，而不需要上傳各種不同尺寸的圖片。例如文末的作者資訊有兩張 FB 圖案、留言區塊的 FB 留言框也有一張 FB 圖案，這三個不同大小的 logo 其實都是同一張圖，只是用了不同的網址參數就能呈現不同的尺寸效果。

B.文章裡的圖片，可以使用較小尺寸的參數，加快網頁載入速度；而點擊後可另開視窗顯示原圖，讓訪客看清楚圖片裡的資訊。就像使用下面這樣的語法：

<a href="http://PICASA網址參數.../s1600/WFU.png" target="_blank"><img src="http://PICASA網址參數.../s300/WFU.png"/></a>

s1600 就是原圖尺寸，而 s300 代表圖片的長邊是 300px。

C.可藉由程式來控制圖片的尺寸，例如 Blogger 縮圖尺寸固定都是 72px、正方形，藉由修改網址參數後，就能顯示不一樣的縮圖尺寸，例如本站側邊欄的小工具「熱門文章」、「最新文章」、「最新回應」及「相關文章」等等，都是運用這樣的技術。想使用 javascript 來實現這樣的效果，詳細的作法請參考「正規表示式線上自動產生器」→「二、修改 PICASA、Blogger 圖檔的真實尺寸」。

三、推薦的 Blogger 搬家工具

回到開頭要解決的問題，如果從其他部落格搬家到 Blogger 時，能一併將圖片轉移到 PICASA 圖床，就不會有本文的這些麻煩了，以下推薦幾個免費的搬家工具：

◎ 無名 blog 搬家到 blogger (含圖片)：http://xyz.cinc.biz/2013/09/wretch2blogger.html

已測試使用者多，相對而言穩定。

◎ 修正 yahoo / 無名 blog 搬遷破圖：http://kudgame.blogspot.tw/2013/09/yahoo-blog.html

已測試使用者多，相對而言穩定。

◎ Yahoo 完美搬家方案到 Blogger+Picasa 網上版BETA：http://koosan.blogspot.com/2013/10/migrate-yahoo-blog-to-blogger-picasa-with-images-comments-beta.html

已測試使用者還不多，Yahoo 搬家者或許可先測試上一個，有問題再測試這一個。

四、小結

據了解，Yahoo、無名的群聚性很強，使用者之間的聯繫很熱絡，這也是會讓 Blogger 使用者羨慕的地方。那麼，有看到這篇文章的原 Yahoo、無名站長，請發揮你們的群聚性，轉告其他有意、尚未搬到 Blogger 的朋友關於本文的這件事，避免重蹈覆轍。據這位留言的小姐表示，她的部落格有兩千篇文章，如此要處理這麼多文章的縮圖，說真的是一件挺麻煩的事。

最近 Android 平台推出的「Google 注音輸入法」獲得大家一致的好評，紛紛取代原本的輸入法。而 WFU 原本使用的輸入法是「訊飛輸入法」，有語音及手寫兩種方式，既然 Google 注音也支援這兩種輸入方式，那麼就將兩者來比較一下。

先說結論，如果是手機或無觸控筆的行動裝置，必須以螢幕的虛擬鍵盤輸入，那麼 Google 注音在這方面的表現當之無愧，可算是 Android 第一；而如果是有觸控筆的行動裝置，那麼訊飛的「手寫+語音」仍遠勝其他所有輸入法。

因此我想有觸控筆的使用者比較需要看本篇的評測內容，用手指輸入的話可直接使用 Google 注音，或者考慮買枝觸控筆，相信可得到更有效率的輸入方式。

一、手寫評測

很多使用者會詢問「訊飛」有沒有注音輸入？其實當初 WFU 正是因為覺得在行動裝置上使用注音太沒效率，才會找到這個「訊飛輸入法」。使用 "手寫輸入" 的效率，在大部分情形之下勝過 "手指輸入" 加選字的效率，所以其實可以不用在意「訊飛」有沒有注音輸入。

可先參考這篇「訊飛輸入法評測」，以下列出 Google 注音在手寫輸入方面的測試結果：

1. 無法連續書寫：Google 注音寫完一個字後必須停頓一下，再寫下一個字；若連續書寫，會被判讀為同一個字；訊飛的連續書寫，連寫得很草的字辨識率都非常高。

2. 智慧辨識字詞：訊飛在連續書寫下，能從詞庫中自動判別可能的字詞，從而增加了辨識率；Google 注音一次只能判別一個字，因此無法實現這一點。

3. 無法寫簡體：Google 注音選擇繁體後，寫簡體字是無法辨識的；訊飛簡繁可混寫，能寫簡體可節省非常多時間。

綜合以上手寫測試結果，Google 注音還遠遠看不到訊飛的車尾燈。

二、語音評測

Google 很早就發展語音辨識系統，因此這方面的表現會有一定的水準，以下是測試結果：

1. 安裝方式：要啟用語音輸入需要另外設定，如下圖在 Android 的輸入設定畫面，將「Google 語音輸入」勾選──

如果要使用離線語音功能的話，請參考這篇「教您如何在沒有網路的時候使用 Google 離線語音辨識輸入法」，來下載離線語音檔。

2. 語音斷句：Googel 注音在語音唸完一個句子後，沒有任何處置；訊飛在有斷句的地方，會根據語意，插入逗號或句號。

3. 辨識率：以 Google 及訊飛的離線中文詞庫來比較，辨識率都是不錯的；不過訊飛另外提供了「個性化的設計」，有個性化語音、個人語音辭典、詞庫等等，如果有進行這些設定的話，那麼辨識率可以更加提升。

綜合以上語音比較，兩者表現都不錯，不過訊飛略勝 Google 注音一籌。

三、其他

Google 注音在輸入法以外還有一些優點，例如提供了許多表情符號、特殊符號、網路常用字。

而訊飛在各種特殊符號方面，提供得比 Google 注音還多、還完整，這是比較少人知道的。

另外訊飛還提供了一些文書操作的功能，例如複製、剪裁、全選、方向移動等，詳細內容已介紹過，請參考「訊飛輸入法評測」。

四、小結

其實拿「Google 注音」跟訊飛比較也不公平，畢竟 Google 在名稱上也只註明 "注音" 二字而已，相信 Google 目前還不敢拿手寫及語音出來當招牌。

WFU 還是得推薦，在行動裝置上使用語音及手寫才是最有效率及產能的輸入方式，如果能夠入手觸控筆，再搭配訊飛輸入法的話，絕對能夠感受到效能的提升。

在這個「Blogger社群討論串」討論的主題為 "Blogger 較新的文章與較舊的文章之連結"，也就是 "上一篇/下一篇文章" 的功能(不是指首頁或搜尋頁面的 "上一頁/下一頁" 分頁功能)。在文章頁面時，這兩個 Blogger 在頁面下方所設計的按鈕，說實在一直以來認為是個滿雞肋的擺設。試想，時間有限的情況下訪客多半是性急的，豈能奢望訪客有閒情逸致像玩刮刮樂般，來點點看「較新的文章/較舊的文章」會出現什麼寶藏？

或許在十年前部落格剛興起的時候，網站數量還不多，在當時的時空背景，訪客的確有可能如此逛網站。但在資訊爆炸的今天，沒有先把牛肉搬出來，是不會有人買單的。想讓訪客點擊「較新的文章/較舊的文章」，唯有先把文章標題秀出來，這才是一個正確的網頁設計。

不過在 Blogger 要做到這件事不太容易，以下大致先說明一下原理，想直接安裝「改造較新/較舊文章按鈕」，請直接跳「二、安裝程式碼」，安裝完的效果大致像下圖這樣──

一、取得文章標題的原理

從「Blogger 範本__(三)文章及留言區塊的程式碼」→「一、上下頁區塊」，可找到較新/較舊文章按鈕的程式碼。很可惜的是我們線索很少，只能從「較新/較舊文章的連結」來想辦法找到對應的文章標題。

從「Blogger 最新文章」→「一、從 Json 資料找縮圖」，我們可以瞭解一些 Json 的概念。從 Json 中能找到縮圖資料，自然也能找到文章標題。但我們不可能為了找到某篇文章的標題，而讀取整個網站的 feed，當文章很多時，載入速度會是個悲劇。

所幸 Blogger API 提供了一個參數「path」，可以經由文章網址來撈 feed 資料，利如這篇「使用 PICASA 的三大好處」網址為：

http://wayne-fu.blogspot.com/2013/10/google-drive-picasa-photo-space.html

那麼在網址輸入以下字串可得到該篇文章的 feed(json格式)：

http://wayne-fu.blogspot.com/feeds/posts/summary?alt=json-in-script&path=/2013/10/google-drive-picasa-photo-space.html

在得到的 json 格式資料裡面，文章標題字串的位置就在 json.feed.entry[0].title.$t。如果曾研究過「最新文章」或「最新回應」的程式碼，相信這樣的解說足以知道如何操作了。

二、安裝程式碼

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

以上 K 行的內容為了節省空間而壓縮了程式碼，如想瞭解原始碼請下載「newer-older-post-button-131028.js」，不過這個檔案包含了 HTML/JS，所以是無法外連的。

如果對效果不滿意想修改程式碼參數，請繼續往下看。

三、修改參數

首先聲明一下，為了讓大多數使用者安裝方便，將 CSS 也寫入了程式碼之中，這樣可以少幾個安裝步驟，因為對於 Blogger 範本不熟的使用者，只要多一個步驟，就是多了一分安裝失敗的可能性。而看得懂原始碼的資深讀者，可以自行修改 CSS 樣式，或是將 CSS 搬到 </head>之前的位置。

以下說明可以修改的參數，請對照程式碼行號──

F：請根據自己的版面寬度，調整文章標題區塊的寬度，例如想要加寬可以嘗試 "300px" 等數值。

G：較新/較舊文章按鈕中間夾著一個首頁按鈕，預設值 "N" 會將首頁按鈕隱藏，若想顯示首頁按鈕請改為 "Y"。

另外，若想將首頁按鈕改為圖案，可參考「Blogger 範本__(三)文章及留言區塊的程式碼」→「一、上下頁區塊」，將代表「首頁」的字串改為圖檔的 HTML 碼即可。

H、I：這兩行的圖案網址，可置換為自訂圖案網址；如果不想出現圖案，將網址字串清空，留下兩個雙引號 ""即可。

另外，如果要使用預設圖案，網址字串的 "s50" 可經由調整數值，更改圖案大小，例如改為 "s40" 就變的比較小、改為 "s60" 就變的比較大，其原理可參考「Blogger 熱門文章＋任意尺寸縮圖」→「一、PICASA 圖片規則」。

四、小結

開頭所提的「Blogger社群討論串」，+Pan Kuan 提供了其他部落格會使用的浮動按鈕樣式資訊，可將「較新/較舊文章按鈕」改為左、右箭頭的浮動按鈕。有了本文從文章 feed 取得文章標題的技巧後，下一篇將會修改這兩個按鈕，讓其功能更為實用。

Google+ 最近開放了「個人」與「專頁」的自訂網址功能，除了分享一下心得，也藉著這個機會介紹一下 G+ 專頁的妙用。從本文的示意圖來看，"Triple" 代表著 "使用 G+ 專頁，基本上是能讓首頁 +1 數量三級跳的"。

在試用自訂網址時出現了一些意外，另外也發現了 G+ 專頁的 +1 數量不太尋常。由於篇幅的關係，第一篇將著重在專頁的基本說明，以及對經營部落格的好處。下一篇則介紹 +1 數量不尋常的部分，以及 "目前" 能夠加以運用的驚人技巧。

一、G+ 專頁功能介紹

G+ 專頁的功能等同 Facebook 粉絲團，通常是公司、商業組織、名人等等在經營。不過個人部落格也是非常推薦申請 G+ 專頁，請往下看便明瞭。

對於 G+ 專頁基本的使用及介紹，網路上已經有非常多的文章可參考──

1. 想要有基本的認識可先參考這篇：「Google+ 專頁及社群基本介紹」

2. G+ 專頁的建立操作可參考這篇：「快來建立自己的Google+專頁吧！」

3. 對於 G+ 專頁應用層面的探討可參考這篇：「終於來了！深析Google+ Pages粉絲專頁的２大重點，社群媒體操作的下一階段」

4. 上一點的內容提到 Youtube 可與 G+ 專頁作連結，其操作步驟可參考這篇：「將您的頻道連結至 Google+ 專頁」

二、部落格首頁 +1 數量的心理意義

為什麼部落格最好要建立 G+ 專頁，請看以下的分析。

G+ 的 +1 按鈕可分兩種，一種是累積文章頁面的 +1 數，一種是累積首頁的 +1 數。像 Blogger 後台可新增的小工具「+1 按鈕」，這就是用來累積部落格首頁的 +1 數。

個別頁面的文章若寫得好，累積 +1 數量不難；但部落格首頁上的 +1 按鈕，訪客覺得整體評價不錯才比較可能按，而這一點這對於建立初期、不出名的部落格而言，要增加統計數是困難的事。

其實部落格首頁的 +1 數量太低也沒什麼大不了，大部分部落格都不高，訪客其實是不以為意的，通常只是一掃而過，很少刻意會去按 +1。

但，如果你部落格首頁的 +1 有一定的數量，那麼，反而就能引起訪客的注意，他們可能會想：「這麼多人推薦，應該是值得一逛的網站吧？」

因此，這就是 "首頁 +1 數量" 帶給訪客的心理意義，只要你的部落格夠有料，那麼 "首頁 +1 數量" 就可以是強大的催化劑，帶動訪客產生預期的挖寶心裡；不過反之，若是像一些黑帽 SEO，只是想辦法把首頁 +1 數量灌水，訪客發現部落格內容不如預期之後可能會是反效果。

瞭解以上意義後，如果你知道 G+ 專頁可以快速累積首頁的 +1 數量，一定也想趕快來申請 G+ 專頁吧！

三、G+ 專頁如何倍增首頁 +1 數量

根據這篇 Google 「官方文件」的敘述：

We'll now show an aggregated count of users that have engaged with your page, either by +1』ing it or by adding it to a circle. This way, both you and your page's visitors can get an at-a-glance summary of who is interacting with your page

以上的意思代表，有三種數值都會累積在 G+ 專頁的 +1 數量，同時也變成部落格的首頁 +1 數量：

部落格首頁的 +1 數量
G+ 專頁的 +1 數量
G+ 專頁的追蹤者

瞭解了原理之後，以 Blogger 為例，原本只有 +1 按鈕一個地方可以累積 +1 的數量，做了以下動作後：

1. 申請 G+ 專頁，並與部落格首頁作連結。(可參考這份官方文件「你的網站連結」來進行連結)
2. 在 Blogger 後台安裝「Google+ 徽章」小工具。

現在變成有四個地方可以累積 +1 數量：

部落格的「首頁 +1 按鈕」
部落格的「Google+ 徽章追蹤按鈕」
G+ 專頁的「+1 按鈕」
G+ 專頁的「追蹤按鈕」

就像上面兩圖四個紅框部分的按鈕一樣。因此，只要開始經營 G+ 專頁，累積 +1 的速度自然比單單部落格首頁來得快很多了！而更快累積 +1 速度的方法，請繼續閱讀下一篇的內容。

四、G+ 專頁自訂網址的技巧

順便一提 G+ 專頁自訂網址，根據官方文件「開始使用 Google+ 自訂網址」的說明，符合以下條件可為 G+ 專頁申請自訂網址：

追蹤者人數達 10 位以上
帳戶已建立 30 天以上
有個人資料相片

G+ 專頁使用自訂網址後，無論如何比起一串無意義的數字效果來得好，發佈給讀者時，"G+ 專頁" 看起來也稍微 "專業" 一些。美中不足的是，自訂網址的效果並非都很好。

1. 擁有網域的部落格

例如 +Pan Kuan 的部落格網址為 http://www.bigsishead.com，那麼其 G+ 專頁的自訂網址可使用 https://google.com/+Bigsishead這樣的字串，這是效果最好的情形。

2. 沒有網域的部落格

例如本站的部落格網址為 http://wayne-fu.blogspot.com，G+ 專頁的預設自訂網址為 https://google.com/+wayne-fuBlogspot，我們很容易就看得出網址字串產生的規則，也就是去除 "www" 與 "com" 後，其他字串全部擠成一團...各位看倌您說這樣的字串上得了台面嗎？

3. 自訂網址的技巧

經過一陣測試之後，發現以下兩個技巧：

英文字母大小寫可變更
可任意使用多個 "-" 分隔符號，把兩個 "--" 連在一起也可。

經由以上技巧，最後本站設定的 G+ 專頁自訂網址如下：

google.com/+WayneFu-Blogspot

雖不滿意，尚可接受，無魚蝦也好。而且 Google 在這份「官方文件」也明說了，「Google 有權基於任何理由收回或移除自訂網址，而不另行通知。」、「目前自訂網址可供免費使用，但未來我們可能會開始收費」，那麼就暫時先這樣用吧！

五、小結

以上先對 G+ 專頁的運用作基本的介紹，瞭解 G+ 專頁如何 "倍增" 部落格首頁的 +1 數量。下一篇將要介紹專頁的其他用途，以及 "十倍增"、甚至 "百倍增" 首頁 +1 數量的技巧。

延伸閱讀：Google+ 專頁對經營部落格的妙用__(二) +1 數量十倍增的技巧

「上一篇」的內容介紹了 G+ 專頁的功能，及 +1 數量的基本累積方式。本文將介紹讓首頁 +1 數量大幅累積的方法。

只不過必須先提醒一下，本文所述的快速累積技巧，並不存在於官方文件之中，因此目前雖然有效，但也可能一夕之間歸零，端視 Google 官方立場而定。因此先打個預防針，小心不要沈醉在數字的跳動之中囉！

一、十倍增首頁 +1 數的方法

記得在幾個月前的某一天，本站首頁的 +1 數量突然翻倍，由 189 直接跳到 360，一時還以為本站獲得 Google 私下的獎勵！而從那天起，也發現了 +1 數量的計算方式似乎跟以前不太一樣！

所謂「以前」的計算方式：就是指「上一篇」→「三、G+ 專頁如何倍增首頁 +1 數量」的方式。
而新的計算方式為：G+ 專頁貼文所獲得的 +1 數，會直接累積到首頁的 +1 數！

這樣看來，只要專頁貼的越多，+1 數量就累積得越多，部落格的首頁 +1 數要說是「十倍數成長」我想也不為過！

為了驗證我的想法，找到兩個經營 G+ 專頁的成功範例供讀者參考：

1. +Almighty Demiurge 的專頁：google.com/+LkksdgodBlogspot

2. +Pan Kuan 的專頁：google.com/+Bigsishead

讀者可以參考這兩位的專頁，只要勤貼文就能獲得大量 +1 數，這個方法夠簡單了吧！只不過，若是網站的文章還不夠豐富，那麼專頁也無法有太多文章可貼。所以，羅馬不是一天造成的，部落格的內涵得先夠充實才行。

二、一夕歸零的案例

這種一夕歸零的慘案不適合拿別人傷口灑鹽，因此舉本站為例就好了！由於歸零之前沒有任何預警，目前只找到在八月份的文章「讓部落格導覽列選單能浮動置頂」裡面有一張圖，當時的首頁 +1 數為 422，大致能代表其時間點是從 189 一夕暴增到 360 之後約一兩個月：

接著慘案發生在申請專頁「自訂網址」的事件後，不曉得為何 +1 數降回 179，甚至比當初的 189 還少，下面這張圖的時間點就是前一篇文章：

過了一兩天才發現，原來 G+ 專頁申請「自訂網址」後，跟部落格的網址必須重新設定連結，難怪只剩下 179。我想這個數字就是正常累積、不包含 G+ 專頁幫忙灌水的數量了。

重新連結之後，雖然數字後來回到了七百多，但幾天以來數字有上有下(曾到 820 又跳回七百多)，再也不像從前，隨著專頁貼文的 +1 數而穩定上升。自行推測可能的原因：

1. G+ 專頁本意應為推廣自家部落格的文章，但本站專頁大部分都是轉貼其他網站的精選文章，自家文章比例不高。
2. 貼自己網站的文章，+1 數可能比較會被累積。
3. G+ 覺得本站的行為模式可能為不當獲取 +1 數，因此非本站的貼文，其權重有特別調整。

但以上推論是否正確不得而知，因為幾天以來交叉測試的結果，本站或他站的貼文都曾獲得不少 +1 數，但首頁的 +1 數的上升幅度，從未有相同程度的增加。

因此我的最終結論如同本文開頭所提：既然本文所述的快速累積技巧，並不存在於官方文件之中，因此代表計算公式 G+ 仍在調整測試中，本文的技巧可以參考，但不宜太過依賴。

至於本站專頁為何要大量轉貼他站文章，出發點倒是與獲得 +1 數無任何關連，初衷為提供資訊篩選的服務，在此就不佔篇幅說明，有興趣請參考年初的文章「Blogger、網頁技巧、部落格建構的精選資訊──歡迎追蹤 "Blogger調校資料庫G+專頁"」。

三、百倍增首頁 +1 數的方法

百倍增是太誇張了，不過這的確是能一次增加最多 +1 數的方法，當然，也有不小的門檻在。

消息的來源出處為這個「G+ 討論串」，發文者表示：G+ 專頁所成立(擁有)的社群，所有社群的成員數加總，會併入 +1 總數。

聽起來很不可思議對吧？所以寫上一篇之前便做了個實驗(當時的 +1 總數為 179)，用 G+ 專頁的帳號成立了一個「Blogger +1數量」社群，再用人頭帳號灌入五位成員，發了一則貼文──

回到專頁的畫面後，+1 總數竟然真的由 179 上升為 184！下圖左下方可看到在社群的那篇貼文──

為了驗證 +1 數與社群人數為正相關，立即將灌水社群刪除，再回到專頁畫面，果然 +1 數立即從 184 降回 179！下圖左下方可看到社群那篇貼文的 "討論區" 已經消失──

所以，這的確是個證實有效能暴增 +1 數的方法，以 WFU 創立的「Blogger 中文社群」而言，若是將 G+ 專頁帳號的身份改為社群擁有者，那麼是可以立即增加 3721 個 +1 數──

如果拿「數位工作研究會」社群來舉例，那更是可以馬上增加一萬多個 +1 數，對於 179 而言，也算是將近百倍增的效果了！

只不過，G+ 社群要能經營順利，必須說是一件不簡單的任務就是了，「天時、地利、人和」缺一不可。以實務上而言，用心經營專頁會比較實在。

四、正常宣傳 G+ 專頁的方式

看完了非正式管道的撇步，來看看官方認可的正常方式好了，以下內容擷取自部分 G+ 的「官方文件」：

經常更新近況及個人資料：常常有新訊息和完整個人資料的專頁才能吸引使用者。
連結您的 Google+ 專頁與網站
連結您的 Google+ 專頁與 AdWords 廣告活動：將您的專頁與廣告活動連結，您的廣告與專頁即可分享 +1 資訊。只要有人 +1 您的廣告，這個 + 1 的次數就會累增至您的專頁，反之亦然。
連結您的 Google+ 專頁與 AdWords 速成版廣告活動：您可以將 AdWords 速成版的實際連結網頁設為 Google+ 專頁。

由以上內容可知，如果有使用 AdWords 廣告的話，可以有額外的管道能累積 +1 數，提供給讀者參考。

五、小結

其實稍微有點擔心這篇的內容，會讓人陷入數字的迷思之中，所以請小心不要為了 +1 數而患得患失了！不過如果對自己的網站有信心，覺得並不輸其他有數千個 FB 粉絲數的網站，但覺得怎麼目前的 +1 數那麼少，那麼希望這兩篇的內容可以幫到你，讓網站的 +1 數能與網站的內涵名符其實。

「舊版的簡繁轉換語法」於留言 #5 Toby Cheng 表示：「只在IE11用有問題，轉換不了繁簡之餘，還令其他小工具也壞掉。在你這篇blog文章使用繁簡轉換都一樣，按次轉換，那些廣告就會閃一閃」。沒想到最近 IE 才剛釋出最新版 11，就衍生了新的問題，有必要來祈禱一下本站寫的其他小工具，不要也受到 IE 的波及。

不過還是很感謝 Toby 的回報，既然要解決 IE11 下的異常狀況，乾脆把程式碼整個重新檢討一下。由於一年半前的 js 功力不足，一個小工具分成四個 js 檔，還真是有點汗顏。整理一陣之後，將檔案縮到最精簡，執行速度也飛快，當然也必須相容於各大瀏覽器。以下先大致說明原理，想直接安裝請跳「二、安裝程式碼」。

想要先測試效果，可按下面這個按鈕：

簡繁切換

一、更新版的原理

IE 算是滿麻煩的瀏覽器，曾寫了一篇「建議避免使用 IE8(含)以下瀏覽器」。簡繁切換舊版的實力不足，為了舊 IE 而使用了額外的 js 檔，只是沒想到這次 IE11 還是會令人頭痛。

本篇的更新版去除了不必要的 js 檔，只抽取「同文堂」這個網頁其中兩個 js 檔裡面的簡、繁字庫來使用：tongwen_table_s2t.js、tongwen_table_t2s.js。

舊的 js 語法裡面有一段使用了 innerHTML 來修改簡、繁文字，但網頁的 innerHTML 重繪會有兩個缺點：

1. 可能造成動態產生的小工具異常
2. IE 下某些元素不接受 innerHTML 重寫。

更新版使用不同解決方式，先抓取頁面所有的文字節點，再對文字節點的 nodeValue 進行簡繁置換，不但小工具不會重繪，而且此簡單的語法所有瀏覽器都能正常運作。

二、安裝程式碼

如果曾安裝過舊版，那麼舊版程式碼可全部移除。接著請到後台「範本」→「編輯 HTML」，搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

程式碼 D行的數字，如果網頁預設字體是簡體的話，請改為 0。

G 行的 js 檔，為了節省空間將程式碼壓縮了，想瞭解原始碼請下載這個檔「TongWen-WFU-131111.js」。

安裝完以上程式碼後，簡繁切換的按鈕，想以什麼樣的形式呈現，例如文字、標題、放在導覽列等，請依照以下標題的內容進行安裝。

三、安裝文字按鈕

<span onclick="TongWenWFU.toggle()" style="cursor: pointer">簡繁切換</span>

將以上的程式碼貼到網頁中任何想顯示的位置即可
如果是 Blogger，可在側邊欄新增「HTML/JavaScript」小工具，把語法貼入即可。
如不清楚要放在 Blogger 範本中什麼位置，可參考「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼」、「Blogger 範本__(三)文章及留言區塊的程式碼」系列文。

對 HTML/CSS 熟悉的話，以上程式碼的字串、樣式請自行修改；以下按鈕可測試效果：

簡繁切換

四、安裝圖片按鈕

<span onclick="TongWenWFU.toggle()" style="cursor: pointer" title="簡繁切換"><img src="http://3.bp.blogspot.com/-Za82UTx7x2s/UoDK7sYOnXI/AAAAAAAAIFs/HMSRB0CYEHA/s1600/translate.png"/></span>

以上藍字的圖片網址請置換為自己的圖片網址
綠字的提示字串可改為自訂字串
將程式碼貼到網頁中任何想顯示的位置即可

以下按鈕可測試效果：

(圖片來源為「廣告小妹」)

五、安裝在導覽列

如果想要像舊版將簡繁切換按鈕放在 Blogger 的水平導覽列，請參考「密技！在 Blogger 水平功能選單使用語法產生動態效果」 → 「一、使用方式」的步驟，將輸入的程式碼改為以下即可：

<b onclick="TongWenWFU.toggle()">簡繁切換</b>
想看效果網頁可參考本站的分站「三國志11」→ 最上方的那個導覽列的「簡繁切換」選項

至於為何分站有兩個導覽列，有興趣同樣製作兩個導覽列的話，可參考「將 Blogger "標籤" 小工具放在導覽列實作」、「Blogger 如何安裝兩個導覽列？」這兩篇文章。

Facebook 留言框要成功安裝在部落格不是容易的事，從官方提供的安裝方式來看，只能裝在 Blogger、Wordpress 這種開放自訂範本的部落格。但就算在 Blogger、WP，仍然常看到試遍各種網路教學、還是找不出安裝失敗因素的各種反應。其原因主要在於安裝步驟多，使用者不容易找出是那個步驟導致失敗。

前陣子安裝完 FB 留言框後，研究一下整個流程，覺得是有辦法將安裝程式碼的動作簡化到最少──只有一個步驟。利用本文封裝後的程式碼懶人包，以後安裝 FB 留言框就不會是苦差事了。而且更棒的是，由於只有一個步驟，如此只要是支援 js 的部落格，都是有可能成功安裝 FB 留言框的。

一、準備動作

雖然安裝懶人包程式碼只要一個步驟，但仍須事先取得 FB 的身份識別碼，因此請先進行以下動作：

1. 取得 FB 管理者 ID

進入這個網址：http://findmyfacebookid.com

輸入 Facebook 帳號的網址後，按下「Lookup Numeric ID」即可取得管理者 ID，類似 100006369483483這樣的一串數字。

2. 取得 FB 應用程式 ID

由於我一、兩年前就申請過 appID，也不太確定現在的最新程序應該是如何，以下這兩篇是比較清楚的圖文解說：「如何申請Facebook應用程式API(APP ID)的金鑰密碼」、「安裝並管理facebook留言板」。

這兩篇一個有提到要手機驗證、一個沒有，所以請依照自己的狀況，兩篇交互查閱吧！最終能夠得到 FB 的 app ID 就行了，類似 457090704320320這樣的一串數字。

因此以本文來說，取得 app ID 是比較稍微有變數的一部份，能成功的話之後問題就不大了。

二、程式碼內容及參數

安裝程式碼之前，需修改一些參數，請對照以上程式碼行號：

D：紅色字串請改為「一、準備動作」→「1. 取得 FB 管理者 ID」的字串

E：紅色字串請改為「一、準備動作」→「2. 取得 FB 應用程式 ID」的字串

F：藍色字串請改為符合自己頁面寬度的像素值

G：預設值為最多顯示 5 則留言，可自行調整

H：這一行要設定的是 FB 留言框出現在網頁上的位置。稍微解釋一下──

如果對程式碼不熟的使用者，請參照以下大標題，依不同部落格的安裝範例來修改。
如果對 HTML 很熟悉的使用者，想自訂 FB 留言框的擺放位置，可參考類似「Chrome開發人員工具」，來找出預定擺放區塊的 id 或 class，然後將 H 行的紅色字串，置換為 "#id字串" 或 ".class字串" 這樣的形式即可。

三、Blogger 安裝

請到後台「範本」→「編輯 HTML」，搜尋 </body>這個字串，找到後在此字串的前一行，插入「二、程式碼內容及參數」的程式碼即可。

程式碼 H 行的參數即代表 Blogger 的留言區塊，因此可不修改，FB 留言框出現的位置會在原留言區塊的上方；若 FB 留言框想放在別的地方，請按照 H 行的說明進行。

想看效果可參考以下範例網頁：

Blogger 安裝 FB 留言框範例

四、非 Blogger 安裝

非 Blogger 平台的部落格，除了 WP 以外，大致都需要安裝到側邊欄的小工具或自訂欄位，最好放在最下面的位置；且程式碼 H 行的參數就一定要修改了，請參考以下的範例安裝。

1. Xuite

先修改「二、程式碼內容及參數」的所有參數，H 行的紅色字串請改為 ".item_message"
新增自由欄位，所有程式碼複製進去，並將此自由欄位放在側欄最下方即可。
FB 留言框出現的位置會在原留言區塊的上方。

想看效果可參考以下範例網頁：

雨櫻 x 羽櫻 x 語櫻 :: 隨意窩 Xuite日誌

2. Pixnet

Pixnet 本身有提供 FB 留言框的 app，可直接在「應用市集」安裝。測試之後發現，Pixnet 會將這個 app 的位置綁定在文章結尾處而無法移動。因此，如果想讓 FB 的留言集中在部落格原本留言區塊的話，那麼就可使用本文的程式碼，請依以下步驟：

先修改「二、程式碼內容及參數」的所有參數，H 行的紅色字串請改為 "#comment-text"
新增自訂欄位，所有程式碼複製進去，並將此自訂欄位放在側欄最下方即可。
FB 留言框出現的位置會在原留言區塊的上方。

想看效果可參考以下範例網頁：

Pixnet 安裝 FB 留言框範例

其他部落格若想安裝 FB 留言框，但不知道 H 行參數如何修改，請再留言並提供網址，會再測試後告知如何修改，並增加到本文的安裝範例之中。

五、調整留言框 CSS 版面配置

如果對留言框的版面效果不滿意，例如 Xuite 剛安裝後可能會貼住左邊界，那麼就需要設定 CSS 參數，例如設定邊界值 margin 的參數。以下提供的範例，其參數內容請依自己需求調整。

1. 由於每個部落格的設定不一樣，如果知道部落格的 CSS 如何設定的話，可在 CSS 設定區域加入以下程式碼──

.fb-comments {
margin: 10px;
}

2. 如果不清楚部落格 CSS 如何設定的話，那麼最簡單的方法(但網頁執行效率稍差)，就是在程式碼 A行與 B行之間，插入以下程式碼──

<style>
.fb-comments {
margin: 10px;
}
</style>

3. 經測試後 Pixnet 的 FB 留言框會與下方原本的留言貼太近，因此下邊界值最好設定多一些，可在 CSS 設定區域加入以下程式碼──

.fb-comments {
margin-bottom: 20px;
}

六、管理 FB 留言

如何管理 FB 的留言，網路上已經有非常多教學，因此就不用自己再寫一次，以下直接給連結。

如何在 Blogger 插入 Facebook 留言框？

這篇請直接看 Step 7～8，可讓管理者收到留言通知

WordPress加入Facebook留言系統

這篇的後半段，對於如何管理留言講得比較仔細。

最後，如同「四、非 Blogger 安裝」所提，其他部落格若安裝上有問題，歡迎留言詢問，會盡量補齊其他部落格的安裝方式。

在上一篇「Facebook留言板安裝懶人包」的留言 #3，Rong Hua LI 表示「痞客邦在所有會員Blog的head標籤後面加入官方APP ID(101730233200171)...無法取得留言板管理權限?感覺是無解的問題...」。首先必須為上一篇的內容致歉，當初的程式未針對「留言管理」的功能做測試，直到對痞客邦進行測試才發現「留言管理」這功能的原理，因而另外在上一篇貼出了公告及補充。

本篇的內容為，在測試痞客邦留言管理的過程中，發現了 FB 留言框安全上的大漏洞，竟然可以輕易地成為痞客邦 FB 留言框的管理員。因此先下個小結論：「FB 留言框的 AppID 目前是不安全的」，而解決方案的程式將在下一篇釋出，讓每則留言能以 email 通知，說不定這方式會比官方的「留言管理功能」更方便。

一、FB 留言管理功能的原理

FB 留言框在安全性上的設計為，將管理者 ID 與 App ID 字串置在 META 標籤之內，再將 META 標籤擺放於範本中的 HEAD 標籤之內以供系統辨識。

「Facebook留言板安裝懶人包」的程式碼誤以為將 META 標籤 "動態寫入" HEAD 標籤之中即可，而這也是痞客邦、Xuite 等無法修改範本的部落格，唯一能做到的方式。

結果經過實測才發現，FB 讀取 META 標籤內 ID 資料的方式，是直接抓取 "網頁原始碼" 這樣的方式，這代表不會抓到任何 "動態寫入" 的內容。因此這一點是 FB 對於安全性的展現，不會抓取到任何造假的 "動態寫入的 ID 資訊"。

但也因為如此，瞭解原理後便間接得到這個殘酷的結論：任何無法修改範本的部落格，無法把含 ID 資訊的 META 標籤放入 HEAD 標籤之中，將無法取得 FB 留言管理的權限。

二、模擬痞客邦情境的過程

由於痞客邦本身有提供 FB 留言板的 APP，但又沒有開放管理權限給所有使用者，這代表所有的使用者都是共用痞客邦的 FB App ID。而痞客邦的 App ID 資訊，正是存放在每個使用者的範本之中──101730233200171，這串數字只要檢視網頁原始碼就能看到。

在尋找解決方案的過程，曾試著在 Blogger 建立痞客邦的情境，來模擬各種狀況。我將痞客邦的 App ID 寫入自己的範本之中，就像下圖這樣──

接著利用語法動態將痞客邦的 App ID 改變為自己的 App ID，然後想辦法讓 FB 留言框上方出現「公開的回覆」、「版主檢視」、「設定」等這些選項，也就是留言管理的介面，如下圖一般──

接著對著上圖紅框的「設定」另開視窗，赫然出現以下畫面──

注意到了嗎，畫面中紅框的應用程式 ID 正是痞客邦的 App ID，而我竟然進入了其後台管理畫面！

由於這算是安全上的漏洞，為了不讓有心人做壞事，以上的流程我刻意不說明詳細。當然程式有一定基礎的人應該是做得到以上出現的畫面，而相信程式厲害的高手通常會有自己的原則，所以知道有這樣的事就好了！

另外，有心想補救痞客邦或 FB 漏洞的讀者就請通報相關單位吧，因為我既沒用痞客邦、也很少用 FB。

三、我成為痞客邦 FB 留言框管理員

接續上一個圖，我很輕易地就可以把自己的身份改為痞客邦 FB 留言框的版主，如下圖──

再按下「審核應用程式的評論」，會另開視窗──

這下不得了，痞客邦也成為我 FB app 的其中一員，我將可以管理所有痞客邦用戶的留言，公開的回覆有近三萬筆，非公開的回覆有將近四萬筆哩！無論是要隱藏、封鎖用戶，各種權限都有。不過我當然沒這麼無聊啦～這些人我都不認識。

然而麻煩的是，以後所有痞客邦的留言都會通知我，也就是隨時我的 FB 都會有留言通知──

所以，截完圖我就將自己的版主身份移除了，以上流程只是為了展示這個安全性漏洞罷了！

四、所有 FB App ID 都不安全

別以為痞客邦才會有這樣的安全性漏洞，這件事跟自己無關。如果網站有安裝 FB 留言框，那麼就有可能遭到本文展示手法的攻擊。

如「二、模擬痞客邦情境的過程」所提，只要你的網站有 FB 留言框，那麼一經檢視網頁原始碼，App ID 便唾手可得，接著本文所有提到痞客邦 App ID 之處，代入你的 App ID，就換成你的 FB 留言管理權限換人當了，一些非公開的留言也都會被看到！

五、總結

以我個人而言，FB app ID 被知道其實沒什麼影響，因為這個帳號不常用，沒什麼留言需要管理。不過 FB 使用者太多了，相信需要隱私考量的比例是不少。

因此，最後能夠給的建議為，如果有隱私考量的讀者，也許暫時先把含有 App ID 的那一行程式碼去除、或改為空字串，這並不影響 FB 留言框的執行，就是會少了留言管理的功能。

而在無法管理留言的情況下，無法收到留言通知也是麻煩事。下一篇會提供解決方案，讓每則留言能即時以 email 通知，包含留言的文章網址、留言者、留言內容等訊息，如此將不會錯失任何的留言資訊。

首先感謝 +Pan Kuan 及 +Ken Lo 回報，最近在瀏覽本站文章時可能會出現內容段落異常的情形。依照回報的使用環境分析，很可能是 Chrome 31這個瀏覽器版本造成的不相容狀況。

而如何發佈這個異常情形的公告，除了擺放位置外，也考慮到是否所有人都需要看到這個公告。最後決定不干擾大多數讀者的閱讀版面，只在 "Chrome 31" 這個瀏覽器版本出現公告。

本文的內容便是分享這個實作心得，並延伸一些不同的應用。以下先描述異常的現象為何，想直接瞭解語法請跳「二、在特定的瀏覽器版本才顯示公告」

一、本站的異常狀況

根據 Pan Kuan 提供的圖片，本站某些文章會出現類似以下的異常狀況──

由於圖檔很大，按下縮圖可看完整畫面，截圖來自這篇「部落格文章＋特殊文字區塊（一）安裝與使用的完整解決方案」，文章的段落錯亂地很嚴重。

由於本站的內容很大一部份是程式碼教學，因此文章內容大多會穿插程式碼。會引起段落錯亂的情形很可能是 Chrome 31 對語法的解讀不太一樣。為了測試我也下載了 Chrome 31，果真看到異常現象，以下列出有問題的測試系統環境：

1. Pan：

iOS(蘋果移動裝置)
Chrome 31

2. Ken：

Win7(評價不錯)
Chrome 31

3. Wayne：

XP(再戰十年)
Chrome 31 免安裝版、Opera 18

看來兇手就是 Chrome 31 了(Opera 18 其實就是 Chrome 31，一模一樣的引擎)，無論在各種作業系統都一樣。而我在其他的瀏覽器版本，例如 Chrome 28、Opera 15、FireFox、IE，文章都是沒有異狀的。

因此，有看到本篇的讀者，若使用 Chrome 31 而看到不正常的內容，建議暫時先用別的瀏覽器、或比較舊的 Chrome 來瀏覽本站了。我也會盡量找出是什麼語法導致異常，看能否用別的語法來替代。

二、在特定的瀏覽器版本才顯示公告

1. 程式碼內容

如果使用了 Chrome 31 瀏覽本站，可發現在每篇文章的文末，會顯示注意事項。這個訊息如何用語法呈現，請參考以下程式碼──

請對照以上程式碼行號：

F～G：紅色字串 chrome可替換為其他瀏覽器代號，代表偵測到該瀏覽器才顯示公告。請特別注意字串需使用小寫──

FireFox：使用 "firefox" 字串
IE：使用 "msie" 字串
Safari：使用 "safari" 字串
Opera：舊版本使用 "opera" 字串；新版本 15 以後需使用 "opr" 字串。

H：藍色字串 31為版本，代表偵測到瀏覽器該版本才顯示公告，可替換為其他版本數字。

I：橘色字串為公告內容的 HTML 碼。

A、I：兩個綠色字串必須一致，為公告區塊的 id。

2. 程式碼擺放位置

我擺放的位置在文章後面，放在範本中「繼續閱讀」的程式碼後面即可。可參考「Blogger 範本__(三)文章及留言區塊的程式碼」→ 三、文章區塊 → 3. 繼續閱讀。

若想放在其他位置，可參考同一篇文章，或是該系列文章來擺放。

三、應用方式

1. IE 限定

若不限版本、只限定特定瀏覽器，例如偵測到使用者的瀏覽器為 IE 時顯示公告，可參考以下程式碼：

<div id="special_announce"></div>
<script>
//<![CDATA[
(function () {
var info = window.navigator.appVersion.toLowerCase();
if (info.search("msie") > 0) {
document.getElementById("special_announce").innerHTML = "<br/><br/>!! 請注意 !!<br/> 為了得到較佳的顯示效果及閱覽體驗，建議勿使用 IE 來瀏覽網站。";
}
} )();
//]]>
</script>

或是配合偵測瀏覽器版本的程式碼，建議 IE8 以下的瀏覽器升級(原因請見「建議避免使用 IE8(含)以下瀏覽器」)。

2. 不同的瀏覽器顯示不同公告

或許有某些情境，需要依據不同的瀏覽器來顯示不同的公告，那麼「1. IE 限定」的 if 判斷句，可改為以下內容：

if (info.search("msie") > 0) {
document.getElementById("special_announce").innerHTML = "偵測到 IE 時，顯示這一段公告內容";
} else {
document.getElementById("special_announce").innerHTML = "不是 IE 瀏覽器時，顯示這一段公告內容";
}

四、裝飾公告

以上的程式碼，未對公告區塊進行裝修，版面比較不美觀。想要做出與眾不同的公告區塊，需要對 CSS 語法有基本認識，可參考「部落格文章＋特殊文字區塊（二）實作範例__公告、修訂區塊」、「Blogger 首頁公佈欄實作」這兩篇文章，來看看區塊的 CSS 如何設定。

有了概念之後，以本文的程式碼為例，在後台範本的 </head>之前，插入以下語法，即可讓公告區塊變得美觀：

<style>
 #special_announce {
在此放入所有 CSS 語法
}
</style>

新世代 Opera 15 眾多為人詬病的其中一項是「沒有書籤列」，感謝 +Leo Liu 於「可以取代新版 Opera 15 或 Chrome 書籤列的快速書籤選單」留言 #1 的提醒，知道這項功能終於在 Opera 18 現身。

花了一番功夫弄出此功能後，發現不但 Opera 18 可用書籤列，還可有方法實現書籤選單、及匯入書籤，比原本官方提供的兩光書籤套件強很多。很需要書籤功能的使用者，從本篇的操作心得將可得到不少幫助。

一、開啟書籤列功能

由於書籤列在 Opera 18 還是實驗性功能，所以只能在隱藏設定裡看到。

1. 進入隱藏設定

根據下圖 A～D 步驟進行──

A.在網址列輸入 opera:flags便可進入隱藏版的實驗項目設定

B.輸入 quick 可搜尋到「書籤列」的項目

C.更改為「已啟用」可開啟書籤列功能

D.按指示重啟瀏覽器即可使用書籤列

2. 隱藏書籤列

以後若想關閉書籤列，按下「Opera」→「設定」可進入設定畫面(或在網址列輸入 opera://settings也可)──

在「使用者介面」多了一個「顯示快捷列」的選項，可切換顯示或隱藏書籤快捷列。

二、操作書籤列

重啟瀏覽器後，便可看到書籤列上的「+」圖示，先開啟網址，再按「+」，便可將網址加入書籤列。

如果想用比較便利的方式將網頁加到書籤列，可到以下網址安裝「Add Bookmark」這個套件：

https://addons.opera.com/zh-tw/extensions/details/add-bookmark/?display=en

安裝之後，按滑鼠右鍵即可選擇「Add to Bookmark」，可將網頁快速加入書籤列。

三、製作書籤選單

這個書籤列的功能目前雖然還算陽春，不過若操作得宜、且有 "耐心" 的話，能夠實現很多使用者期盼已久的「書籤選單」。

如上圖，在書籤列按右鍵 →「新增資料夾」，可建立多層書籤選單，如圖中的 "WFU 書籤選單"。

接著，大致有三種方式來操作：

按「新增頁面」來增加書籤
用拖曳的方式將書籤列上的書籤拉進建立的資料夾
用拖曳的方式將書籤列上的其他資料夾拉進建立的資料夾，如圖中的 "部落格工具"。

所以說，真的很有閒情逸致的話，是可以一步步將「書籤選單」打造出來！

四、匯入書籤選單

Opera 雖然有「書籤匯入工具」的選項，但目前是反白的狀態。對於事業做比較大的讀者，沒有多餘空閒製作手工書籤選單怎麼辦？

還好有國外網友發現了密技能夠匯入書籤，不過這部分的操作沒有那麼親民，是本文最困難的一部份，需要仔細詳讀這個章節。

根據這個「Opera 官方論壇討論串」，有人表示「將 Chrome 的書籤設定檔複製到 Opera 的設定資料夾即可」。雖然字面上看起來很簡單，不過實際上每個人的作業系統與環境都不一樣，資料夾說不定也曾搬動過，因此 Chrome 的路徑可能都不一樣，要寫出一個適用於所有人的操作流程並不容易。

我找到的解決方式很快速，不過必須先安裝「Everything」這個強大的 PC 端桌面搜尋軟體，其安裝與操作可先參考這篇教學「免費檔案搜尋軟體Everything」。

接著使用 Everything 來搜尋 "Favicons-journal" 這個檔案，如下圖，不到一秒就找出了我的 Opera 與 Chrome 設定檔資料夾路徑──

我的 Opera 路徑是第一個搜尋結果，在 C 槽
我的 Chrome 路徑在 G 槽，看起來奇怪，原因是「讓新版 Opera 15 能使用首頁功能+搬移暫存檔(cache)路徑」我搬離了 C 槽，以減少系統槽的負擔。

如果搜尋結果沒有 Opera 路徑的話，可先按「三、製作書籤選單」的步驟，隨便在書籤列新增個書籤，系統會自動產生設定檔，就可搜尋到 Opera 路徑了。

接著對著自己的 Chrome 路徑的搜尋結果按右鍵，可選擇開啟資料夾，然後複製以下三個檔案：

Bookmarks
Favicons
Favicons-journal

最後，很重要的一個動作──確保 Chrome、Opera 瀏覽器都是關閉的狀態，然後把這三個檔貼到 Everthing 搜尋到的 Opera 資料夾即可。

重新打開 Opera 後，可看到 Chrome 的書籤列重現於 Opera──

A.最右邊的 "Chrome書籤" 就是我在 Chrome 的書籤選單，以後在 Opera 作業就方便了。

B.目前網頁小圖示均為空白，不過開啟網頁後就能讀取到小圖示了，就像最左邊的 "WFU" (本站的小圖示)。

C.最讓人高興的就是這個「Opera 官方提供的書籤套件」可以打包回家了。

五、小結

對 WFU 而言，Opera = 精簡版 Chrome。在 Chrome 常常不穩的情況下，能有個精簡的替代品是好事，且處於 XP 再戰十年的作業環境，瀏覽器的功能越單純越好。現在 Opera 的基礎建設慢慢補齊，剩下的就希望能完善滑鼠手勢，那麼 Opera 有機會能成為我的首選。

由於在上一篇「我如何進入痞客邦Facebook留言框管理介面並成為管理員」發現了 FB 的 App ID 目前有安全上的漏洞，對「留言管理」這個功能有所疑慮，因此決定修改舊版「Facebook留言板安裝懶人包」的程式碼，去除 App ID 的部分。

雖然如此將不能管理留言，不過藉由 FB 提供的 API 仍可取得所有留言資訊，配合 Google 試算表將留言資訊以 email 寄給站長，不會錯失任何留言，且收到通知更為即時。

一、準備動作

1. 選擇是否使用「管理留言」功能

Blogger、WP 等可以修改範本的部落格，可以另外選擇使用「管理留言」的功能，與本文的程式碼並不衝突。而不能修改範本的部落格，以下步驟只要取得 "FB 管理者 ID" 即可跳「二、程式碼內容及參數」。

如果不擔心 App ID 安全問題、選擇管理留言的話，請依照舊版「Facebook留言板安裝懶人包」→「一、準備動作」，來取得 FB 管理者 ID 及 FB 應用程式 ID，並進行下一個動作。

2. 安裝 META 標籤

選擇使用留言管理功能的話，依照舊版「Facebook留言板安裝懶人包」→「三、Blogger 安裝」→「2013.11.22 補充」的內容，將 META 標籤的字串放在範本中 <head>後面即可。

二、程式碼內容及參數

安裝程式碼之前，需修改一些參數，請對照以上程式碼行號：

G：紅色字串請填入自己的 email，並檢查不要拼錯，否則就收不到 email 通知了。

H：預設為不收到自己的留言通知；若要收到自己留言通知請將紅色字串改為 Y。

I：紅色字串請填入自己的 FB 管理者 ID，可參照「一、準備動作」得到此字串。

J：藍色字串請改為符合自己頁面寬度的像素值

K：預設值為最多顯示 5 則留言，可自行調整

L：這一行要設定的是 FB 留言框出現在網頁上的位置，請參照以下大標題，依不同部落格的安裝範例來修改。

三、Blogger 安裝

1. 對程式碼不熟者

請到後台「範本」→「編輯 HTML」，搜尋 </body>這個字串，找到後在此字串的前一行，插入「二、程式碼內容及參數」的程式碼即可。

程式碼 L 行的參數即代表 Blogger 的留言區塊，因此可不修改，FB 留言框出現的位置會在原留言區塊的上方。

2. 對程式碼熟悉者

如果 FB 留言框想放在自訂位置，L 行參數可改為 "#fb-comment-area"，然後可參考「Blogger 範本__(三)文章及留言區塊的程式碼」，把全部程式碼放在範本中的自訂位置即可。

四、非 Blogger 安裝

1. Xuite

先修改「二、程式碼內容及參數」的所有參數
L 行的紅色字串改為 ".item_message"
新增自由欄位，所有程式碼複製進去，將此自由欄位放在側欄最下方即可。
FB 留言框出現的位置會在原留言區塊的上方。

效果可參考以下範例網頁：

雨櫻 x 羽櫻 x 語櫻 :: 隨意窩 Xuite日誌

2. Pixnet

先修改「二、程式碼內容及參數」的所有參數
L 行的紅色字串請改為 "#comment-text"
新增自訂欄位，所有程式碼複製進去，並將此自訂欄位放在側欄最下方即可。
FB 留言框出現的位置會在原留言區塊的上方。

效果可參考以下範例網頁：

Pixnet 安裝 FB 留言框範例

3. 對程式碼熟悉者

若想自訂 FB 留言框在部落格中出現的位置，可參考類似「Chrome開發人員工具」，來找出預定擺放區塊的 id 或 class，然後將 L 行的紅色字串，置換為 "#id字串" 或 ".class字串" 這樣的形式即可。

4. 其他部落格

其他部落格若想安裝 FB 留言框，但不知道 L 行參數如何修改，請再留言並提供網址，會再測試後告知如何修改，並增加到本文的安裝範例之中。

五、使用說明

由於 FB 的隱私性設定，在「不能管理留言」的情況下，以下情況的留言站長不一定能看到，例如：

非站長的朋友
留言者的身份非公開

不過安裝本文的程式碼後，所有的 FB 留言(包含以上兩狀情況)一定可以收到 email 通知。

email 內容大致如上圖，包含了以下資訊：

留言時間
部落格名稱及文章標題
文章網址
留言者暱稱
留言者 FB 網址連結
留言內容

如果有意跟留言者交流，可藉由以上資訊與聯繫留言者，互加好友後，原本無法顯示的留言便能出現在 FB 留言板了。

六、其他注意事項

1. 調整留言框 CSS 版面配置

請參考「舊版文章」→ 「五、調整留言框 CSS 版面配置」

2. Email 每日寄送額度

這個 email 通知的功能，是利用 Google 試算表上的「FormEmailer」這個程式，每天能夠寄出的 email 上限是 500 封。

雖然有限制，但實際上本站發佈的「推文系統」及「WYBOARD 部落格即時留言板」也是共用這個 email 寄送系統，感覺上一天從未寄出達 100 封過，就算現在加入這個 FB 留言通知功能，我相信提供給大部分中小型的部落格使用，也是綽綽有餘。

而如果是超大型的部落格，FB 留言一天肯定超過 100 人次的話，請再私下與 WFU 聯繫了(email 在 G 行程式碼)，必須使用客製的資料庫，以免佔了共同使用的額度。

七、常見 FAQ 整理

若有常見問題產生，會整理在此：

◎ Xuite 貼上程式碼並儲存後，若想要重新編輯「自由欄位」的內容，會發現系統常常自行竄改程式碼，而導致程式無法執行。因此最保險的方法是將本文程式碼自行複製一份，將來欲修改「自由欄位」的內容時，全部重新貼上最為保險。

(設計: +Totoa Hari, 素材: goo.gl/x6WzZC)時光荏苒，不知不覺「Blogger中文社群」滿週歲了。雖然在 G+ 社群之中不算熱門社群，但目前四千多位成員也是不小的規模。

為了慶祝這個值得紀念的日子，藉這熱鬧歡欣的聖誕時節特別舉辦了猜謎活動，所有參加者都能獲得紀念品，最大獎還能獲得「讓部落格在社群置頂宣傳」的機會，以下就來看看活動內容吧！

一、活動時程

活動期間：12/7 ～ 12/21
結算成績與審核：12/22
公布得獎者：12/23 ～ 12/24

二、活動獎品

第一名：部落格可在社群置頂五天()

第二名：部落格可在社群置頂三天()

第三～十名：由 WFU BLOG 提供的「客製試算表資料庫」()

活動紀念品：所有符合資格的參加者，都可得到 WFU BLOG 提供的限量 Blogger 留言小工具()。

會視參加人數斟酌提高得獎數量。

三、活動參加資格

1. 有自己的部落格：成立 30天以上、10篇以上原創文章。

2. 有 G+ 帳號：追蹤者 10人以上。若追蹤者人數不夠，歡迎加 +Wayne Bot 、+Ken Lo、+Pan Kuan，管理員會幫參加者回加。

3. 相同的部落格、G+帳號、email 不能重複參加，經發現會取消資格。

四、活動參加步驟

請先在部落格側邊欄新增「Google+ 徽章」小工具，並選擇顯示「Blogger中文社群」。
在自己的 G+ 帳號發佈貼文，連結請輸入「Blogger中文社群」的網址，貼文內容請填入 #Blogger中文社群慶聖誕
完成猜謎問卷，網址連結為：https://plus.google.com/114469761668527469591/posts/hqWfn29BbsD

若以上不清楚怎麼操作，請見以下詳細步驟：

1. Blogger 後台 → 版面配置 → 新增小工具 → Google+ 徽章 →「徽章類型」選擇「社群」→「輸入 Google+ ID」填入 103807083735607134704→ 儲存

如此便可在側邊欄看到以下社群徽章──

2. 在自己的 G+ 分享一則「公開」的貼文，文字內容請輸入以下的 hashtag：

#Blogger中文社群慶聖誕

連結請貼上社群的網址：

https://plus.google.com/communities/103807083735607134704

這則貼文類似以下圖片

對著上圖紅框的時間按右鍵，可取得這則貼文的連結網址。

五、成績計算與資格查核

1. 成績計算

猜謎題目問卷一共有十二道題目，答對一題可得十分。
分數相同者，以先提交問卷者順位在前。
若有其他部落格參加，前兩名保留給 Blogger 平台。
若得獎者「資格查核」不符，將由順位在後者遞補。

2. 資格查核

管理員會抽查參加者的以下項目：

「三、活動參加資格」提到的事項
「四、活動參加步驟」提到的事項

六、備註

註1：活動的前兩名將可獲得以下在社群置頂的權利──

社群敘述改為得獎者的部落格名稱及網址
社群 logo 改為得獎者的部落格圖示(請得獎者提供圖示)
社群置頂連結增加得獎者的部落格連結

註2：安裝 WFU BLOG 以下工具可適用於「客製試算表資料庫」──

使用自己的試算表資料庫，將可隨時編修資料庫的內容，而不必與他人共用資料庫。

另外，得獎者請任意新增一個新的 Gmail 帳號，提供給 +Wayne Fu 以製作資料庫之用。

註3：這個小工具未曾公開發佈過，特別提供給本次參加活動的朋友當紀念品，效果如下圖：

就像論壇的積分機制，站長對於留言較多的朋友，可設定星等，顯示在留言頭像下方，以鼓勵其他訪客留言。也可參考這篇文章的留言區塊，可看到更多效果範例：

Blogger 最新回應＋留言者頭像＋文章標題

在這篇「7 Blogger Page Types: Analysis, Code Snippets, Data Matrix」看到了過去「Blogger 頁面判斷式(PageType)的各種應用」沒提過的頁面判斷方式，而且其資料整理得很詳細，只差在部分語法可以精簡一些。

因此本篇用自己的方式來說明、及補充上一篇「Blogger頁面判斷式」不足之處。

一、四種頁面判斷式

Blogger 的頁面判斷式共有四種，而標題 "七種" 是因為在 "index" 這個頁面判斷式，原作者再細分成四種頁面形態，所以總共成為七種頁面判斷的方法。

1. archive：文章封存頁面

這個頁面是指官方小工具「網誌存檔」所產生的頁面，網址結尾為 "年份_月份_01_archive.html" 類似這樣的格式。

<b:if cond='data:blog.pageType == "archive"'>
這裡的程式碼，在文章封存頁面才會執行。
</b:if>

2. item：文章頁面

文章頁面的網址結尾為 "/年份/月份/文章網址字串.html"，類似這樣的格式。

<b:if cond='data:blog.pageType == "item"'>
這裡的程式碼，文章頁面才會執行。
</b:if>

3. static_page：靜態網址頁面

靜態網址頁面是由「網頁」小工具所產生，其網址結尾為 "/p/靜態網址字串.html"，類似這樣的格式。

<b:if cond='data:blog.pageType == "static_page"'>
這裡的程式碼，靜態網址頁面才會執行。
</b:if>

4. index：索引頁面

這是最複雜的一種頁面，包含了首頁、標籤、搜尋頁面等情況，因此給予單獨說明。

二、各種索引頁面

<b:if cond='data:blog.pageType == "index"'>
這裡的程式碼，索引頁面才會執行。
</b:if>

當看到以上程式碼時，代表以下四個標題的頁面都會執行。而如果要這四種情境的頁面單獨執行程式碼，請見以下說明。

1. 首頁

首頁也是索引頁面的其中一種，下面是最佳的判斷式語法：

<b:if cond='data:blog.url == data:blog.homepageUrl'>
這裡的程式碼，首頁才會執行。
</b:if>

2. 標籤頁面

按下標籤連結時所產生的頁面，下面是最佳的判斷式語法：

<b:if cond='data:blog.searchLabel'>
這裡的程式碼，標籤頁面才會執行。
</b:if>

3. 搜尋頁面

搜尋頁面必須解釋一下，這是利用官方小工具「搜尋框」時所產生的頁面，網址會有 "/search?q=搜尋字串" 類似這樣的格式。

下面是最佳的判斷式語法：

<b:if cond='data:blog.searchQuery'>
這裡的程式碼，搜尋頁面才會執行。
</b:if>

P.S. 提醒一下，官方搜尋小工具並不好用，還可能故障，建議參考這篇「取代 Blogger 搜尋小工具__新版Google 自訂搜尋」，改安裝 Google 自訂搜尋。

4. 較新的文章、較舊的文章頁面

這種頁面不易簡短解釋，它是專指從首頁按下「較舊的文章」之後所產生的頁面，而不是其他諸如 "標籤頁面"、"搜尋頁面" 、"文章頁面" 等所產生的「較舊的文章」頁面。

此類頁面的網址會有 "/search?密密麻麻的參數" 類似這樣的格式。它跟「3. 搜尋頁面」很類似，網址都有 "search?" 字串，但不同點是網址不會有 "q=搜尋字串" 這樣的格式。

我目前還想不出有什麼情境，要為這樣的頁面寫特別的程式，不過還是列出這種頁面的判斷式語法供參考：

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery == ""'>
<b:if cond='data:blog.searchLabel == ""'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
這裡的程式碼，較新的文章、較舊的文章頁面才會執行。
</b:if>
</b:if>
</b:if>
</b:if>

說真的，程式碼又臭又長，似乎也沒有實用性，希望哪天能幫它找到應用方式。

三、注意事項

介紹完所有的判斷頁面語法後，讀者需要小心的是，這些都是屬於「Blogger 自創的語法」，不是所有地方都能執行，請注意以下：

1. 不可放在「HTML/Javascript 小工具」之中，因為這不是 html 也不是 js 語法，是無法執行的。

2. 不是範本中所有位置都能執行，可放在 <head>～ </head>的區間。

3. 如果放在 <body>～ </body>之間的話，必須注意是否擺放到任何小工具的區間，請務必參考「Blogger 範本__(一)各種註解方式及區塊的修改」→「二、Blogger 各區塊的語法格式」→「2. 語法結構」，語法只能放在紅色字串擺放的位置。

上一篇「Blogger 七種頁面形態判斷語法詳解」可以有千變萬化的應用，讓自己的部落格版面運用更有效率，也與眾不同。本文整理了一些實用範例，除了適合理解與上手，也非常適合套用到自己的部落格。

一、在特定頁面時，隱藏側邊欄的小工具

「Blogger 頁面判斷式各種應用」的留言 #7 穆螢炎霜詢問「進入其他頁面時，原本隱藏工具的位置，多少還是會有一點高度在」。

我的確也有發現，使用原本的語法時(「一、基本使用法」→「3. 讓小工具內容在 "文章頁面" 才出現」)，在某些範本下沒問題(因為側邊欄無邊框)，但在某些範本下(如本站，側邊欄有邊框)就會發生隱藏小工具內容後，仍然會看到邊框、或看得出仍有一點高度。

為了在各種範本下都生效，發現應該隱藏整個小工具才行，故採用以下的步驟較佳：

1. 找出小工具的 id：可利用搜尋小工具的標題來找到小工具的區塊，如下圖紅色字串即為小工具的 id。

2. 在範本中 </head>之前插入以下程式碼：

請對照以上程式碼行號──

A：意思為「非 "索引頁面" 時」，執行 B～F 行程式碼。綠色字串 "index" 可改為其他頁面參數。
C：藍色字串請替換為步驟 1 找到的 id 字串，並在前面加上井字 "#" 符號；想要隱藏多少個小工具，可加入所有的 id 字串，彼此間用小寫逗號 "," 隔開。
D：設定為隱藏的狀態(CSS語法)

3. 可對照步驟 1 的畫面，以上程式碼的執行結果為，非 "索引頁面" 時，例如在 "文章頁面" 或 "靜態網址頁面" 時，將會隱藏「Adsense 160x600」、「WFU專用」、「各種按鈕」這三個小工具。

4. "索引頁面" 等名詞、或語法的變化使用方式，可參考「Blogger 七種頁面形態判斷語法詳解」、「Blogger 頁面判斷式各種應用」，本文之後的範例將省略說明。

二、在標籤頁面只顯示文章標題

部落格文章很多時，「按標籤能顯示含該標籤的文章標題」這樣的想法可能會出現，因為如此找資料比較快，且等待圖片、文摘的載入時間太長。

使用了 Blogger 判斷式即可達到這樣的目的，可參考 +Phil Ko 這篇「讓搜尋標籤的結果頁，只出現標題、摘文與縮圖」，只要去除縮圖、文摘、繼續閱讀的語法，就能在標籤頁面只顯示文章標題了。

三、在首頁顯示自訂尺寸縮圖及文章摘要

+Bin Ye 於「同時縮小 Blogger 縮略圖尺寸和大小」這篇文章提出的構想為，由於完整的圖文載入花費較多頻寬與時間，利用調整 Blogger 文章縮圖尺寸，加上文摘的內容，可讓首頁內容的載入速度加快許多。

借用其構想及部分程式碼，配合本文主題──判斷式，以下是個簡單範例。不過先提醒一下，這個 hack 需要對範本、語法都很熟悉的讀者才建議嘗試，稍不小心可能有小災難。

1. 在範本中搜尋 <data:post.body/>字串，第一個結果通常是在行動範本的小工具(小工具 id 為 "mobile-post")之內，確認是的話，不要修改第一個搜尋結果，請修改其他的所有搜尋結果。

2. 將搜尋結果非行動範本的 <data:post.body/>字串，置換為以下內容：

<b:if cond='data:blog.url == data:blog.homepageUrl'><!--首頁時使用縮圖及文摘-->
<div class='index-thumbnail'>
<b:if cond='data:post.thumbnailUrl'><!--檢測縮略圖存在-->
<script type='text/javascript'>
(function() {
var pic = "<data:post.thumbnailUrl/>";
pic = pic.replace("s72-c","s108-c"); // 更換縮略圖尺寸為 108px 正方形
document.write("<img src='"+ pic +"' style='width: 108px; height: auto; float:left; margin:0 .625em 0 0'/>"); // 加載縮略圖樣式
}) ()
</script>
</b:if>
</div>
<div class='index-snippet'><!--文摘開始-->
<data:post.snippet/>
</div><!--文摘結束-->
<b:else/><!--非首頁時，使用Blogger預設圖文模式-->
<data:post.body/>
</b:if>
<!--<data:post.body/>--><!--此行為註解、保留原本的程式碼-->

3. 所有的說明都在程式碼的綠色字串備註，若還不瞭解，可參考 +Bin Ye 的原文，或參考這篇「Blogger 熱門文章＋任意尺寸縮圖」來修改縮圖尺寸參數。

四、在文章頁面才顯示的小工具

這算是最常使用到的部分了，讓許多程式或小工具在文章頁面才執行，避免首頁或索引頁面載入內容過多、花費時間太長。

舉一些適合在文章頁面才出現，不需在首頁重複出現的例子，如「LinkWithin」、「社交分享按鈕」、「Adsense廣告」、「留言工具」、「作者資訊」等等。簡單使用以下的程式碼，就能讓這些程式在文章頁面才執行：

<b:if cond='data:blog.pageType == "item"'>
這裡的程式碼在文章頁面才會執行
</b:if>

以最常見的 LinkWithin 為例，可參考這篇教學「LinkWithin 用縮圖顯示部落格相關文章」，"Platform" 選擇 "Other" 就能取得 LinkWithin 程式碼，填入上面的範例即可。

不過 WFU 並不推薦使用 LinkWithin 就是了，原因請見這篇「Blogger 相關文章+任意尺寸縮圖+更多相關文章」，LinkWithin 所顯示的文章根本不相關，且 WFU 寫的這個工具比 LinkWithin 功能更強，推薦使用看看。

五、非"索引"及"文章封存"頁面時，收合側邊欄

對於注重友善閱讀體驗的站長，則會喜歡隱藏側邊欄的功能，提供舒適的全版面給讀者閱讀。

以下借用這篇「Blogger 動態版型，讓左/右側邊欄消失，以文章區塊填滿側邊欄」的概念及部分程式碼，可達到「非 "索引" 及 "文章封存" 頁面，也就是在 "文章" 及 "靜態網址" 頁面時，才隱藏側邊欄的效果」──

在範本中 </head>之前插入以下程式碼，存檔後即可看到效果：

<b:if cond='data:blog.pageType != "archive"'>
<b:if cond='data:blog.pageType != "index"'>
<style>
.columns, .fauxcolumn-center-outer {
padding-left: 0 !important;
padding-right: 0 !important;
}
.fauxcolumn-left-outer, .fauxcolumn-right-outer, .column-left-outer, .column-right-outer {
display:none !important;
}
</style>
</b:if>
</b:if>

六、備註

1. 本篇的一些名詞請對照「Blogger 七種頁面形態判斷語法詳解」。

2. 同時也可參考「Blogger 頁面判斷式各種應用」來調整參數、語法、加入自己的程式碼搭配，以符合自己的需求。

3. 若某些範例不知道程式碼要貼在範本什麼位置，可參考「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼」、「Blogger 範本__(三)文章及留言區塊的程式碼」系列文章。

關於浮動導覽列的優點，為了節省篇幅請直接參考「舊版」→「一、導覽列置頂的優點」。不過舊版有以下的狀況未解決：

1. 底色透明的異常狀況
2. 留言 #9 +Ken Lo 表示「搜尋框會左右移動」
3. 當螢幕解析度不同時，導覽列的寬度會異常

因此本文的更新版，用來解決以上情形。以下先大致說明原理，想直接安裝程式碼請跳「二、安裝程式碼」。

一、解決異常狀況的原理

1. 底色透明的異常狀況

在某些範本，例如 Blogger 官方的「簡單範本」，導覽列底色為透明，使用舊版程式碼時，不但透明的浮動導覽列效果很差，而且沒有頁籤的部位，在浮動的時候會消失。

◎ 解決方法：浮動時自動加上底色，非浮動時改回原底色；並事先抓取導覽列的寬度值，浮動時幫導覽列加上寬度。

2. 導覽列的搜尋框會左右移動

某些範本的導覽列會擺置搜尋框，而這種搜尋框通常使用「浮動靠右」的語法。當導覽列浮動時，原本的「浮動靠右」語法會失效，導致搜尋框往左移；等導覽列回到原始位置時，搜尋框才再次浮動靠右。

◎ 解決方法：同第一點，事先抓取導覽列的寬度值，浮動時幫導覽列加上寬度，搜尋框便不會亂跑了。

3. 當螢幕解析度不同時，導覽列的寬度會異常

這一點如同舊版內容 →「三、注意事項」→「4. 導覽列未設寬度」的示意圖，導覽列浮動時，導覽列寬度會撐大，若螢幕解析度改變時，就會看到異狀。

◎ 解決方法：同第一點，事先抓取導覽列的寬度值，浮動時幫導覽列加上寬度，導覽列便可固定寬度了。

二、安裝程式碼

瞭解原理後，程式碼稍加調整就能解決各種狀況。而且為了安裝懶人化，這次的安裝步驟只有一個。

如有安裝舊版「讓部落格導覽列選單能浮動置頂」，請先移除原本程式碼，然後按以下步驟進行：

1. 到後台「範本」→「編輯 HTML」→ 搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：

2. 請參照以上程式碼行號，修改以下參數：

G：如果是 Blogger 官方的範本，這一行通常不需要改，導覽列區塊就是在這裡；如果不是官方範本、或改過範本的話，可參考「Google Chrome 開發人員工具」來找到導覽列的區塊，然後置換本行的紅色字串──

如果要填入區塊的 id，請填入 "#" + id 名稱，例如 "#navbar"。
如果要填入區塊的 class，請填入 "." + class 名稱，例如 ".navbar"。

H：藍色數字的參數為導覽列到網頁頂端的距離(px值)。如果頁面頂端官方的選單導覽列(有 "下一個網誌" 那一欄)沒有隱藏的話，此行的數字說不定要設為 -30，請自行測試調整。

I：本文的程式碼設計了導覽列透明程度的參數，可填入 0 ～ 1 的數字，0代表完全透明，1代表不透明。

J：請依照綠色字串的註解，依導覽列的底色決定不設定字串、或是設定底色。想查詢色碼可參考這個「網頁色碼選擇器」。

三、小結

相信這個更新版已經能解決大部分的異常狀況，剩餘的就是導覽列若有特殊形狀的頁籤，請依照舊版 →「三、注意事項」→「1. 頁籤形狀」與「2. 顏色、透明度」的說明來進行處理了。(2013.12.13)

之前 +Pan Kuan曾在這個「Blogger中文社群討論串」談到這件事，雖然 WFU 曾經提出因應被 IFRAME 框架的語法，但可惜沒有測試的環境來驗證效果。直到最近無意間發現，本站的文章也受到 7headlines 的青睞，而雖然成了受害者，但有了機會可以測試破解 IFRAME 框架的語法，不啻為一個宣導「反框架惡行」的好機會。

以下先說明被框架的影響，接著大致敘述 Blogger 破解框架的原理，想直接安裝語法請跳「三、安裝破解框架程式碼」

一、網站被框架的影響

1. 著作權被消費？

其實這個主題，重灌狂人 +Briian Tsai 已經寫過，還滿詳細的，所以請直接參考這篇「如何避免你的網站被「蓋台」？（破解被Frame內嵌的網站）」即可。

就我個人而言，網頁被 7headlines 綁架的感想是，就像是林書豪、黃色小鴨造成旋風後，大街小巷到處都是相關的週邊產品，產品上都有林書豪或小鴨的圖案，但這些產品都有取得正式授權嗎？林書豪或小鴨作者有被知會嗎？

就像上圖，我們的網頁被綁架後，拿著我們的原創內容當賣點，擺上自家 7headlines 的廣告、宣傳資訊等等，廣告點擊是他們賺，而我們根本完全不會被知會，也很難知情，我想沒有人喜歡被這般拿來消費吧？

2. Google Adsense 的影響？

網頁被框架後，如果這種情況下的 Adsense 廣告被點擊時，由於網址並非我們的網域，而是 7headlines，不曉得 Adsense 的判斷機制為何？是否會損及我們的權益？

我在 Adsense 社群詢問了這樣的問題，由於幾天來還未得到官方的答覆，如果有新的訊息，會再更新內容。

二、Blogger 破解框架的原理

如果是一般的部落格，也許只要照 Briian 提供的程式碼就能解決問題，如下：

if (top.location != location) top.location.href = location.href;

不過 Briian 自己也提了，在 WP 後台編輯文章時(他的部落格是WP)，會有一些問題，因此破解框架的語法，需要有更周全的設計，請看以下分析：

1. Blogger 後台範本的畫面、「範本設計工具」的畫面、文章預覽的畫面，其實都使用了 IFRAME 框架，才能預覽網站效果。因此如果用了上面的語法，那我們不但趕走了 7headlines，自己連 Blogger 以上所提相關畫面也都進不去了，這是非常嚴重的事情。

2. 因此必須使用 js 來判斷框架的網址，當偵測到 blogger 的網址時就不破解框架，其他的網址就破解框架。

3. 但是 js 有跨域的安全性問題，意思就是說當我們網站網址為 ???.blogspot.com，而框架的網址為 blogger.com 時，js 無法讀取 blogger.com 的網址字串。這也代表很難去分辨框架的網址到底是 blogger.com 還是 7headlines。

4. 為了這一點奮戰不少時間，最後找到的解決方法為 document.referrer，從這裡可以判斷出是 blogger.com 還是 7headlines，從而解決了最大的難題。

三、安裝破解框架程式碼

以 Blogger 為例，請到後台「範本」→「編輯 HTML」→ 搜尋 </head>字串，找到後在其前一行，插入以下程式碼：

<!-- 防網頁框架 start -->
<script>
//<![CDATA[
if (top.location != location && document.referrer.search("blogger.com") < 0&& document.referrer.search("blogspot.com") < 0) {
top.location.href = location.href;
}
//]]>
</script>
<!-- 防網頁框架 end -->

以上程式碼代表的含意為，「除了 blogger.com及 blogspot.com這兩個網域，只要網址被 IFRAME 框架，一律強制轉回原網址」。請根據以下三種情境，來調整程式碼：

1. 禁止所有框架網址(非 Blogger、WP 的部落格)

如果不是 Blogger、WP 這類平台，後台編輯畫面不會使用框架的話，那麼可以刪除所有有顏色的字串，代表「只要任何被框架的情況，一律轉址回原網址」。非 Blogger、WP 的部落格，通常程式碼放在可以執行 js 的地方即可。

2. 允許特定框架網址(Blogger、WP 平台)

例如 Blogger 的後台範本為類似下面的網址：

http://www.blogger.com/blogger.g?blogID=????

由於 Blogger 後台會使用框架來預覽網站畫面，因此我們網站必須允許讓 "www.blogger.com" 這個網域框架。

另外也許是「Blogger 無預警轉換區域網址」的影響，後台文章預覽畫面的網域為 ???.blogspot.com，與目前台灣會顯示的區域網址 ???.blogspot.tw不同，會視為不同網域，因此額外也需要允許讓 "blogspot.com" 這個網域框架。

所以在 Blogger 平台，程式碼當中必須包含所有有顏色的程式碼。如果 Blogger 使用自訂網域的話，那麼紅字 "blogspot.com" 請自行置換為自己的網域。

如果是 WP，只需允許一個網域框架的話，請將紅字 "blogger.com" 置換為允許的網域，然後將後面的綠色、紅色組合字串刪除。

3. 允許多個框架網址

如果允許多個網域對我們網站框架，請依照「藍色、紅色組合字串」的規律，來增加或修改允許的網域字串即可，例如以下：

if (top.location != location && document.referrer.search("blogger.com") < 0 && document.referrer.search("wordpress.com") < 0 && document.referrer.search("example.com") < 0)

四、如何知道網站是否被 7headlines 框架？

拜 Google 大神的強力搜索功能，讓這件事異常簡單，以 WFU BLOG 為例，想知道我的哪些文章被 7headlines 框架，只要在 Google 搜尋引擎輸入以下字串即可：

wfu blog site:www.7headlines.com

以上 "wfu blog" 字串請換成自己的網站名稱即可，現在就動手查查看網站是否被 7headlines 佔了便宜吧！我的搜尋結果類似下圖：

五、使用 IFRAME 框架在法律上的責任

感謝 +Ben Yu 提供的訊息，根據這篇「使用網頁框架iframe方法內嵌其他網站的的網頁，這算侵犯嗎??」，律師的回答如下：

就技術面而言，若可讓使用者知道是屬於其他人的網頁，則屬於網路超連結應用的一環，不涉及對他人著作的重製或公開傳輸，所以，解釋上不會構成侵害他人的著作財產權。不過，若是屬於競爭對手網頁的利用，則可能屬於不公平競爭行為，而有違反公平交易法的問題。

從以上解釋，看來少數情況才會違反公平交易法，不過 WFU 仍不清楚什麼情況下可對 7headlines 這種框架行徑提告。

而若認為 7headlines 侵權時，可先參考這篇「保存部落格盜文、盜圖證據的工具__archive.is 應用」保存證據，再進行法律程序。

六、小結

WFU BLOG 只是個小小網站，對於這樣的事情，影響力不足時就算想抗議，也很難起什麼帶頭作用。相信被 7headlines 框架的大網站更多，如果有大型部落格來帶頭評判這樣的事，絕對可以消彌這種利用 IFRAME 框架得利的手段。

如果你的網站也是受害者，在這一類的框架網站停止這種行為之前，歡迎你在自己的部落格寫文章揭露這樣的事情，本文的程式碼請隨意取用、隨意引用，讓更多網站知道本文的程式碼，讓框架網站失去作用，這是我們小網站能夠自保、及為網路盡一份力量的方法！

無論在生活上的事務或是寫部落格，都需要很多參考資料與素材，而我通常使用 Evernote 來當統一收集的工具。在 PC 上複製各種資料非常方便，只要作業系統之內用滑鼠選取範圍後，按下 Win + A就能存進 Evernote 了。

不過在行動裝置(Andoird、iOS)上執行 "選取"、"複製" 的動作不太容易，這造成蒐集資料的不便；而最困難的要屬 G+，因為官方尚未開放 API，很難輕易地分享及複製資料。偏偏 G+ 有許多高價值的追蹤對象及社群，是獲取資訊的重要來源。如果能在看到 G+ 好文的同時，就能輕易地分享到 Evernote，那麼對零碎時間的作業流程，將是莫大的幫助。

測試了許多方法後，最終找到了能將 G+ 貼文分享到 Evernote 的方法，這也是本篇的內容。而利用相同原理，G+ 貼文將也能分享到 email 或 Facebook，由於篇幅的關係，將在下一篇討論。

一、為何 G+ 無法在行動裝置進行分享

在 PC 上使用 G+ 分享貼文時，若指定分享的社交圈，可勾選「另外傳送電子郵件給……」，利用傳送 email 的功能分享給 Evernote，詳細圖文步驟可參考這篇「Google+快速記事同步到Evernote雲端記事本，邊逛Google+邊記錄」。

可惜的是，在行動裝置上 G+ App 未開放「社交圈使用 email 傳送通知」，如此一來，想在 G+ App 上蒐集資訊成了麻煩事，得使用繁複的操作才能完成。若少了 G+ App，我在行動裝置蒐集資訊的任務，大部分只能使用「gReader 來擷取 RSS 到 evernote」。

二、G+ App 進行分享的密技原理

經過不斷測試之後，發現 G+ App 雖然無法分享到 G+ 以外的應用程式，但設定分享對象時，如果我們一直往下捲，會出現你的「手機聯絡人」──

如果你的手機聯絡人設定了 email，就會出現在以上的名單之中；而將 G+ 訊息分享給這些 email 後，測試的結果如下：

1. Gmail：並不會真的寄到 Gmail，會將訊息傳給該 G+ 帳號。

2. 非 Gmail：真的會將訊息寄到該 email。

得出以上結果後，證實了 G+ App 可以透過 email 來分享訊息，如此要分享到 Evernote、Facebook 等等都是可行的了！

雖然解決了自己的難題，不過我用的是 Nexus 7，擔心這功能只是 Google 自家人限定，若其他裝置不能用就尷尬了。還好 G+ 社群結合了許多相同志趣的朋友，藉由不同裝置、不同需求的測試，讓這項功能的輪廓得以描繪出來，在此先感謝所有協助測試的朋友。

三、在 Android 使用 G+ 轉 Evernote

這部分感謝 +Eian Pan +Ida Wu +澳西諾的測試，證實了在 Sony、HTC、Samsung 等 Android 裝置可正常操作，以下為最佳化的流程。

1. 「新增 Evernote email 成為 Android 裝置聯絡人」最安全、最相容的步驟由 +澳西諾提供：

打開 Evernote App → 點選帳號 → 帳戶資訊 → Evernote 電子郵件地址 → 新增至聯絡人，聯絡人名稱可自行更改(例如 "evernote") → 按「完成」

若操作有疑問請見以下流程圖示──

2. 啟動 G+ App → 找一則貼文 → 按分享 → 分享對象輸入剛剛設定的聯絡人名稱 (例如 evernote)，要出現郵件的圖示 → 可選擇是否填入訊息 → 送出。

以上最重要的關鍵為，選擇分享對象時能否看到郵件圖示，如下圖紅圈，選到大象就糟了──

如果需要填入註釋的話，這些訊息會成為 Evernote 的記事標題──

3. 只需幾秒鐘就可檢查是否在 Evernote 能顯示這則 G+ 訊息──

四、在 iOS 使用 G+ 轉 Evernote

這部分感謝 +Pan Kuan 的測試，在 iPad 上也能使用此功能，不過這部分 WFU 無法提供圖片，請參考以下 +Pan Kuan的測試流程：

1. 打開 Evernote App → 點選帳號 → 帳戶資訊 → 往下滑，才能找到 Evernote 電子郵件地址→ 新增至聯絡人，聯絡人名稱可自行更改(例如 "evernote")

2. 啟動 G+ App → 找一則貼文 → 按分享 → 選擇分享對象時， +Pan Kuan 輸入剛剛設定的聯絡人名稱，但無法出現選項 → 於是分享對象改為輸入完整的 "evernote 電子郵件地址"→ 成功，可送出訊息 → 因為輸入過完整的 "evernote 電子郵件地址"，之後會自動成為選項供選取。

五、G+ 轉 Evernote 的缺陷

根據 +Eian Pan 的測試回報，發現 G+ 分享到 Evernote 的記事，並沒有提供原貼文的連結──

這則記事的原網址為這個「Blogger中文社群討論串」，對照上圖後，發現 G+ 轉 Evernote 的功能算是有兩個缺陷：

1. 我打的發文內容，並不會出現在上圖問號之處。不過要說這是缺陷也不太公平，因為 G+ 所有轉貼分享的內容，本來就只會出現最原始的出處內容而已。

2. 下方紅框處的連結，點下去後發現，並非直覺所認為的是貼文連結，而是一個全新的私人轉貼討論串連結。這的確算是個缺陷，因為如果原討論串有些不錯的留言(或第 1 點的發文內容)，都可能因為沒有原貼文連結而錯失掉這些資訊。

以下為解決方法：

在分享之前，先按貼文右上角的「選項」按鈕，再按上圖紅框的「連結」，可將此貼文的連結複製到剪貼簿。

+Eian Pan補充：

公開的貼文才有「連結」選項，非公開的貼文將無法複製連結。

然後在分享內容時，長按螢幕可出現「貼上」選項，將貼文連結貼入分享內容。

另外，若不需要貼文連結，需要「原貼文內容」，可將上一個步驟(按「連結」)改成按「複製文字」，此時就可貼上原貼文內容。

最後在 Evernote 出現的這則 G+ 貼文記事，如上圖紅框處，就會出現原貼文的連結了。後續要做什麼處理都可回到 PC 上再進行，至少我們在行動裝置端已經完成了資料蒐集的動作。

以上為 G+ 轉 evernote 的操作原理、流程及注意事項，如果主要作業環境為 FB 的讀者，下一篇將說明 G+ 轉 FB 的操作流程。

(設計: +Totoa Hari, 素材: goo.gl/x6WzZC)以下公布本次猜謎問題之答案、出處與註解。

活動說明網址：「Blogger中文社群週年慶聖誕活動」。

猜謎題目：「猜謎問卷網址」

一、阿 Ken 剛從 Yahoo 部落格逃難到 Blogger，對這個平台不是很熟悉，甚至連 Blogger 怎麼念都不太清楚。請教導阿 Ken 一下，"Blogger" 這個字的發音比較接近以下那個中文用語？
(單選題，以最接近 google 官方認定的答案為準)

1. 博客
2. 部落格
3. 布拉格
4. 不辣的

正解：3
參考網址：Google 翻譯發音查詢

二、今天阿 Ken 加入了 Blogger 中文社群，看到滿滿的訊息，不知從何下手入門。如果阿 Ken 想要知道貼文的版規、以及如何找到版主整理過的資料之方法，請問應該建議他先閱讀哪篇置頂文章呢？
(單選題)

1. Blogger 新手入門文件
2. 發文注意事項、搜尋精華文章及熱門文章的操作
3. G+(社群) 操作技巧及介紹
4. 刪文備份

正解：2
參考網址：發文注意事項、搜尋精華文章及熱門文章的操作

三、看過置頂文章後，阿 Ken 學會了搜尋精華文章的方法。他先選擇討論區，然後在網址後面加上一些字串就找到了該討論區的精華文章。請問他在討論區網址後面加了什麼字串？
(單選題)

1. 精華文章/
2. /精華文章B
3. /s/精華文章B
4. /f/精華文章B

正解：3
參考網址：發文注意事項、搜尋精華文章及熱門文章的操作

四、稍微熟悉社群的操作後，阿 Ken 在「網頁技巧、設計」這個討論區，利用搜尋熱門文章的功能，找到了一篇關於在 "blogger" "範本" 中 "搜尋語法" 的文章，請問他看到的這個討論串，以下哪些是對的？
(複選題)

1. 貼文的人是 Wayne Fu
2. 在 Blogger 範本的 "內框" 中按 Ctrl + F 才能搜尋到字串
3. 在 Blogger 範本中搜尋 "jump-link" 若找不到，改試著搜尋 "jump"，就能搜尋到了。
4. 能否正確找到需要的字串，要注意輸入的字串，前後有沒有多了空格。

正解：2, 3, 4
參考網址：https://plus.google.com/110723182901901723592/posts/4tvDmTMJTyb

五、從置頂文章「G+(社群) 操作技巧及介紹」中，阿 Ken 學會了 G+ 貼文的技巧，請問以下哪些阿 Ken 的貼文效果是正確的？
(複選題)

1. 這則訊息內將會顯示 “粗體” 效果：我最喜歡*Blogger中文社群*了～～*____*
2. 這則訊息內將會顯示 “斜體” 效果：雖然 _Facebook_ 人很多，不過 G+ 很有潛力呢 ^___^
3. 這則訊息內將會顯示 “刪除線” 效果：所以呢，現在 -Facebook-.Google+ 才是我的最愛 (*´∀`)~♥
4. 指定這則訊息讓某人收到：呼叫呼叫！社群有兒童不宜的廣告，請@waynefu.g@gmail.com儘速來處理...>///<

正解：2, 3, 4
參考網址：「G+(社群) 操作技巧及介紹」→「3. 其他 G+ 操作技巧(24 個必學的 Google+ 小技巧)」
小技巧：將所有選項複製到 G+ 貼文便可立即驗證

六、阿冠剛從痞客邦轉戰 Blogger 平台，想在社群內拜個碼頭，簡單介紹自己的部落格，除了附上部落格網址及自我介紹的內容外，請問分享對象類別應該要選哪類？
(單選題)

1. 最新消息及公告
2. 一般討論
3. 閒聊、文章交流
4. 自介及推薦blogger

正解：4
參考網址：如「Blogger中文社群」討論區名稱字面解釋

七、閱讀了置頂連結「自介 Hashtag 一覽表 (自介請加上合適的 Hashtag)」後，阿冠瞭解了 hashtag 的好處，請問根據這篇置頂文章，目前以下哪些是自介建議使用的 hashtag？
(複選題)

1. #blogger
2. #美食
3. #blogger旅遊
4. #blogger家庭生活

正解：3, 4
參考網址：自介 Hashtag 一覽表 (自介請加上合適的 Hashtag)

八、某天阿冠看到社群的分享不多，想要熱鬧一下，發了好幾篇跟 Blogger 或網路趨勢不相關的分享連結，但這是不行的，請問她違反了置頂「發文注意事項」的哪一條版規？
(單選題)

1. 第一條
2. 第二條
3. 第三條
4. 第四條

正解：1
參考網址：發文注意事項、搜尋精華文章及熱門文章的操作

九、現在阿冠才知道，原來 Blogger 社群還有一個子社群，專門提供作為文章分享之用。關於這個置頂連結「Blogger文章交流社群」，請問以下何者為非？
(複選題)

1. 單一部落格的貼文一天以一篇為限
2. 目前沒有貼文數量限制
3. 專門給 Blogger 平台貼文
4. 可以推薦優質部落格文章

正解：1, 3
參考網址：Blogger文章交流社群 (分享Blogger文章請至此社群)

十、以前阿冠所處的痞客邦有提供客服，有問題隨時能找客服詢問。現在她發現 Blogger 不太一樣，根據置頂文章「Blogger 社群的定位」，請問以下哪些是正確的？
(複選題)

1. 社群由官方創辦，目的是提供一個平台讓 Blogger 新手能夠迅速得到援助與解答。
2. 社群等於 Blogger 客服，在這裡詢問管理員會負責回答。
3. 社群是 Blogger 中文使用者互相幫忙與交流的園地。
4. 在社群多幫忙別人的問題，自己有問題時也比較容易得到幫忙。

正解：3, 4
參考網址：Blogger 社群的定位

十一、阿 Wayne 對著作權不太懂，他在社群討論這個議題時，發現阿冠的文章被盜了。根據該討論串，以下何者是錯誤的？
(單選題)

1. 要合法的引用他人部落格內容，除了註明出處，還要另外取得作者的同意。
2. 在部落格只貼 Youtube 連結、而沒有引用任何圖文，就不會有侵權問題了。
3. 如果我們的圖文被盜，但盜文者的主機、平台在國外，就很難提出侵權告訴。
4. 如果想要分享國外的音樂資訊、又不違法侵權，安全的作法是只貼國外網站連結，讓有興趣的網友到外國網站聆聽，這樣就不必取得作者同意了。

正解：2
參考網址：https://plus.google.com/118094430196481429357/posts/hVW6Gqbs6j4

十二、阿 Wayne 決定最後一題送分，你會讓他如願嗎？請問社群滿週年是哪一天：

1. 12/7
2. 12/8
3. 12/20
4. 12/21

正解：1
參考網址：http://wayne-fu.blogspot.tw/2013/12/blogger-community-1-year-xmas.html

備註：題目由 Blogger 中文社群管理群 +Wayne Fu、+Ken Lo、+Pan Kuan 設計及整合

沿用上一篇「如何讓 Google+ 訊息在行動裝置分享到 Evernote」的技巧後，G+ 也能分享到多個 Email 或是 FB。可先參考上一篇來瞭解原理、及為何要在行動裝置分享 G+ 的貼文。另外本篇的內容涵蓋不同行動裝置、不同手機業者，因此特別感謝 +Jerry Chien 的協助測試。

一、G+ 分享到多個 Email__Android

根據上一篇的原理，G+ 能用 Email 分享的對象，必須在行動裝置的聯絡人名單之中。Evernote 能用自家的 App 直接將 email 設置為聯絡人，而如果想直接設定行動裝置的聯絡人 email，由於每台裝置可能都不一樣，以下提供我操作 Nexus 7 的心得。

1. 新增聯絡人

有兩種方式，在行動裝置直接新增、或使用 Gmail 同步到手機。

◎ 行動裝置直接新增

以 Nexus 7 為例，「應用程式」→「使用者」→可新增聯絡人資料。

如上圖，新增了 evernote 與 facebook 兩個有設定 email 的聯絡人。

◎ Gmail 聯絡人同步到行動裝置

詳細的操作步驟，可參考這篇教學說明「Android使用者必備起手式－Google帳號應用介紹！」

2. 從 G+ 分享到多個 Email

原本測試的方式為，在 G+ App 開一個新的社交圈，然後把所有要分享的手機聯絡人 email 全部丟進去，這樣分享到該社交圈的操作將很方便，一次可分享多個 email。

很可惜的是，在我的 Nexus 7 上這個如意算盤失敗了，任何丟到社交圈的手機聯絡人，都無法傳送 email！

所以，如果我想一次分享多個 Email 的話，有兩種方式：

分享對象一直往下捲，直到看到手機聯絡人為止
直接輸入聯絡人名稱，一個一個輸入。

如上圖，輸入聯絡人名稱時，務必確認有紅圈的 email 圖示，才不會選錯，這樣 evernote 與 facebook 兩個聯絡人都可收到。

二、G+ 分享到多個 Email__iOS

根據 +Jerry Chien 的測試，如「上一篇」的留言 #1，在 iOS 上可以將手機聯絡人丟到 G+ 建立的社交圈，而分享對象選擇該社交圈，即可分享到手機聯絡人，這一點是跟 Android 測試結果不一樣的地方，這樣在 G+ 分享到 email 的操作就方便許多。

三、G+ 分享到 Facebook 的原理

1. 如何找到 Facebook 的發文 email

Facebook 過往有個 email 發文的功能，因此若我們在行動裝置的聯絡人填入這個 FB 發文 email，就能從 G+ 分享到 FB，就像這個網頁「免登入facebook, 以email方式貼文到到facebook塗鴉牆」所描述的，每個 FB 帳號都會有一個專屬的發文 email。

在「FB 官網」對於 "發佈貼文的電子郵件" 是這麼寫的：

點擊任何 Facebook 頁面右上方
點擊設定
點擊螢幕左側的手機版標籤
您的「發佈貼文的電子郵件」列在您手機資訊的底部

但實際上在那個位置卻是看不到「發佈貼文的電子郵件」！根據這個討論串「How to post new status facebook via email?」，看來最近幾個月 FB 為了誘導使用者改用其他方式發文，已經封鎖了以前能顯示這個發文 email 的方式。

經過不斷地 google，找到了這篇「啟用 Facebook 登入驗證（二階段驗證）功能，提高帳戶安全，讓你不再被盜帳號」，總算是有了答案，原來現在需要通過 "簡訊驗證" 之後，「發佈貼文的電子郵件」才會顯示出來。

2. 通過 FB 簡訊驗證的條件

根據上面的教學文章，發現我的手機門號為「台灣大哥大」，剛好不是跟 FB 合作的三家門號「中華、亞太、遠傳」，因此無法完成 FB 的簡訊驗證，所以我也沒得測試 G+ 分享到 FB 的功能了。

這個任務得感謝 +Jerry Chien 完成簡訊驗證，接著跟「G+ 分享到 evernote 或 email」差不多的步驟，就能完成 G+ 分享到 FB 的測試了。

四、G+ 分享到 Facebook 的缺陷

1. 缺陷

根據 +Jerry Chien 的測試，G+ 分享到 FB 的任務不但艱鉅，結果還挺差的，他表示「測試成功。不過，這樣的 e-mail 發文，僅限 "文字內容"，無法顯示連結、照片、影片 ... 等。」

由「簡訊驗證」才能開啟「發佈貼文的電子郵件」這一點來看，FB 是針對手機操作環境來開放這個功能，方便傳送文字簡訊之用，因此只能顯示 "文字內容"，那麼看來 G+ 轉 FB 的效果無法預期。

2. 權宜之計

目前想到的對策，跟「上一篇」→「五、G+ 轉 Evernote 的缺陷」差不多，如果想讓 G+ 轉 FB 的內容產生用途，那麼得在分享之前，先複製 G+ 貼文的連結、或 G+ 貼文的內容，再進行分享，對於資料的收集、後續的加工處理較有幫助。

部落格成立了三年半，這是第一次進行年度回顧，因為今年算是寫得比較有概念、紮實完整的一年。雖然導覽列下方的「公佈欄」一樣能看整年度的大事紀(包含過去年度)，就是內容太過簡略。

藉由這篇回顧，讓新朋友能快速瀏覽本站今年發生了哪些重要大事，而忠實讀者除了可重溫一下各個重大時刻，也能多知道一些文章之外的小插曲！

由於篇幅的關係，難免有遺珠之憾未收錄，不過相信這十件都是非常有代表性的，以下大致依照時間軸的方式來敘述。

一、最熱門的文章：多層樹狀標籤

年初所發佈的這個「多層樹狀標籤更新版」榮登本年度最賣座冠軍，不但瀏覽數到目前為止逼近 18000，同時也累積了破表的留言(超過 250 則，想看新留言得跳到第二頁)，最熱門文章實至名歸。

這個小工具其實改版過多次，過去總以為是程式寫得不好，所以問題多、留言也多。結果把 bug 都清得更少後，瀏覽數及發問的留言反而更多！

所以，將來應該還會再寫個樹狀標籤 "懶人安裝版"，然後文章盡量簡短，文末並增加個常見問題 FAQ，以期待減少樹狀標籤的業務量！

二、最多按 +1 及讚的文章：G+ 留言框網頁版

本站最多 +1 的文章出現在這篇「G+ 留言框網頁版」，原因是四月份時在 Chrome 上流出了一個 G+ 留言框外掛，而我想把這個外掛移植到部落格，於是請教了日本原作者，然後在一天之內生出了這個部落格外掛，結果在 G+ 上造成轟動，受惠於轉貼分享的結果累積了超過 300 個 +1、超過 90 個讚，兩項都是本站之最，第一次感受到社群媒介的力量！

平心而言，這是一個失敗的作品，因為沒幾天就因為 G+ 改版而失去功效(目前最新版本為「G+留言框__與其他留言外掛並存+留言提醒功能」)，不過讓我體會到一件事──跟上時事才能吸引最多的讀者。

然而，跟時事是一件很累的事，而且無法掌握作品的質量。WFU 還是比較習慣作出滿意的成品再發表，因此以後應該很難會再發生同樣的事了。

三、最市儈的 Yahoo 搜尋引擎

從今年五月開始，陸續有 Blogger 知名部落客發現，在 Yahoo 搜尋引擎開始搜尋不到自己的網站，可參考這幾篇：「Yahoo、Bing搜尋歧視Google?Blogger排名訪客流量忽然下降!」、「最近Blogger流量減少，和Yahoo的搜尋引擎有關？」、「Yahoo是故意的！來自Yahoo流量下降的可能原因」。

以上文章曾提到，"沒有買關鍵字排名" 的 Blogger 網站會被 Yahoo 拿來開刀；而我自己則發現，PR 值高的 Blogger 網站的確會被 Yahoo 封鎖，PR 值低的則不會(就像 WFU BLOG...)。無論如何搜尋引擎走到這個地步未免太沒格調，需要像唱片界一般來買排名？

WFU 測試在 Yahoo 搜尋著名的「電腦玩物」，的確搜尋不到該網站，不過發現該網站在 Facebook 的貼文倒是有不少搜尋結果。因此未雨綢繆之故，本站開始將文章貼到 FB 粉絲頁，以備將來萬一被 Yahoo 除名時，仍能讓讀者從 FB 回到 WFU BLOG。

除了本站的文章，FB 粉絲頁也會蒐集最新的 Blogger、部落格、網頁設計、網路趨勢等精選資訊，就像當初成立「G+ 專頁的介紹內容」一般。以上的 FB 粉絲頁及 G+ 專頁，都可利用追蹤功能、或 RSS 訂閱：

G+ 專頁追蹤：https://plus.google.com/+WayneFu-Blogspot
G+ 專頁 RSS：
FB 粉絲頁追蹤：https://www.facebook.com/WFU.BLOG
FB 粉絲頁 RSS：https://www.facebook.com/feeds/page.php?format=atom10&id=351945654935259

或是在本站文章上方的區塊，也能找到這些最新資訊。

四、最麻煩的教學文：單篇文章計數器

七月發佈的這個「Blogger 單篇文章計數器」，是其他部落格都會有，偏偏 Blogger 沒有的功能；我相信這功能大部分 Blogger 使用者都會想裝，但是偏偏這個工具又太難裝。所以對於安裝成功的讀者，WFU 也都深感佩服！

為了完成安裝步驟，得將操作教學分成三篇寫，還得另外再寫一篇「Blogger 後台文章瀏覽數與Google Analytics 數據差別很大的原因」，來解釋當讀者看到 Google Analytics 數據時的困惑！我想不但是本站最麻煩的操作教學，其他網站應該也找不到能相比擬的吧！

如果真的很想安裝此功能的讀者，又覺得步驟太多、或沒時間研究，可以考慮贊助本站，由本站提供服務來幫忙節省一些時間與力氣。

五、最受歡迎的小工具：樹狀標籤及最新回應

八月底宣布「Yahoo 及無名部落格」即將關閉後，開始一波逃難潮湧向各大部落格，當然也包括 Blogger。從那一刻起，發現本站所寫的小工具之中，能夠佔據熱門文章排行榜的，除了前面提的「樹狀標籤」，另一個就是「最新回應」小工具了。

這兩個是當時很多新進 Blogger 使用者必裝的工具，主要原因大概是其他部落格都有分類的工具，但 Blogger 卻沒有；另外就是 Blogger 官方沒有提供像樣的最新回應小工具。

實際上本站這個「最新回應」工具，也的確是目前最好的 Blogger 最新回應工具，能顯示頭像、文章標題、留言內容能收合，功能算是最完整。另外偷偷透露一個消息，最新回應小工具過陣子應該會改版，並且支援表情圖案喔！

下一篇將繼續回顧第六～第十件重要大事。

2013 十件大事回顧(下)