2013年10月11日 星期五

Blogger 私密留言系統 V2.0__簡易安裝及使用說明

Blogger 私密留言系統 V2.0__簡易安裝及使用說明


(Pic from: iconspedia.com,Installation sous Linux : Autopackagehttp://macin.wordpress.com)

簡易安裝》    《驗證站長身份》    《使用說明


2013.8.9 公告

由於近日存放在 Google Code 的 js 檔全部被刪除了,本文的外連 js 檔已改放到 Google Drive 空間。曾安裝過本文程式碼的讀者,請修改程式碼中 V 行的 js 檔連結。為了避免日後有其他意外,也建議讀者參考「取代 Google Code 外連 js 檔的選擇__Google Drive」,自行備份 js 檔並上傳到自己的 Google Drive 空間。



一、簡介

有關功能部分的說明及版本的歷程,請見「Blogger 私密留言(悄悄話)系統發佈網頁


二、V2.0 版簡易安裝

1. 到 Blogger 後台 → 範本 → 修改 HTML

2. 如果想跟本站一樣,把私密留言區塊放在留言區之前,那麼請找到以下的程式碼:

</b:includable>
<b:includable id='comment_picker' var='post'>


3. 在以上程式碼的前一行,插入以下程式碼:

2013.9.17 修改:感謝 茅寶村 留言提醒,按之前安裝的位置會無法顯示,這可能是因為近幾個月 Blogger 結合了 G+ 留言框的緣故。請在範本中找到以下程式碼:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>


應該會有兩個搜尋結果,請裝在第一個搜尋結果即可,插入本文安裝程式碼的位置如下:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

本文程式碼

<b:include data='post' name='comment_picker'/>
</b:if>


3. 以下的安裝程式碼,請放在上面紅字 本文程式碼 的位置:

  1. <!-- WPC2 私密留言-->
  2. <b:if cond='data:blog.pageType == "item"'>
  3. <div id='WPC_System'><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2y8qJ3jOPsZaGLBdBoP0s00ivvOfreXOmc4RoGzPVG0u79YU1fIjgRlxgjzYdyAKUj2Nk1StYCTjI3GuQCak9gwlAX_7ZqUwBGagPgjhlsTqOcnosEkTbPmmAj3ZJDWbTNQf1fwprNYY/s512/indicator-light.gif'/></center></div>
  4.  
  5. <script type='text/javascript'>
  6. var WPC_setting={
  7.   IP:"",
  8.   hostPW:"",
  9.   hostName:"WFU", 
  10.   hostEmail:"email@youremail.com",
  11.   inputStyle:"margin: 10px auto; width: 85%; padding:5px 5px 0px 5px; background-color: #CFD9ED; border:#E8D6C1 1px solid; border-radius: 5px; box-shadow: 2px 2px 2px #d6d6d6;", 
  12.   nameColor:"#45818e",
  13.   userColor:"#fafafa",
  14.   hostColor:"#f1faf6",
  15.   PostTitle:"<data:post.title/>", 
  16.   PostId:"<data:post.id/>",
  17.   PostUrl:"<data:post.canonicalUrl/>",
  18.   BlogUrl:"<data:blog.homepageUrl/>"
  19. };
  20.  
  21. (function() {
  22.   var url = "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/WPC2-share-0829-min.js";
  23.   var script = document.createElement("script");
  24.   script.setAttribute("src", url);
  25.   script.setAttribute("type", "text/javascript");
  26.   document.documentElement.firstChild.appendChild(script); 
  27. } )();
  28. </script>
  29. </b:if>
  30. <!-- 私密留言尾 -->

4. 可自訂參數:

2012.11.7 提醒

建議安裝完後很重要的一點是在 J 行填入自己的 email 帳號,有人留言時會自動寄信通知;很多人安裝完並沒有填入自己的 email,當有人留悄悄話時,請相信我,這樣子是永遠不會知道有人留言的,只有某年某月某一天碰巧去開那篇文章時,才可能會發現。

  C:藍字的圖片網址為動態載入時預先顯示的 gif 圖檔,可改為自訂的動畫圖案。

  G~Q:每一行的結尾必須是逗號,這十分重要。目前看起來很明顯,絕對不會漏掉逗號,但等到範本存檔後,所有的雙引號 " 會被轉換成 &quot;,屆時逗號不一定認得出來,修改時要小心這一點。

  R:這一行的結尾絕對不能有逗號,否則在 IE 下必當。

  G~H:這兩行的參數請參考之後的「三、驗證站長身份」。

  I:藍字部分請改為自己的站長暱稱

  J:若想要收到留言通知,藍字部分請填入自己的 email 帳號若不想收到留言通知,藍字部分請刪除,留下 "", 兩個雙引號及一個逗號即可。

  K:這一行是私密留言輸入框的自訂樣式,想要自訂請參考以下敘述──

margin: 邊界距離
width: 寬度
padding: 內襯距離
background-color: 整個留言框的底色
border: 框線的顏色 形式
border-radius: 圓角效果
box-shadow: 陰影效果

不清楚怎麼改的話,其實主要改 K 行藍字的那兩項,符合自己部落格的顏色配置即可。

  L:藍字部分可更改留言者及站長暱稱的顏色

  M:藍字部分可更改留言者區塊的底色

  N:藍字部分可更改站長回覆區塊的底色

5. 如果想把私密留言放在別的區塊也可,那麼把以上程式碼搬到自訂位置即可。






三、驗證站長身份

安裝完程式碼並儲存後,隨便開一篇文章應該就能看到如本文下方、留言區之前的私密留言輸入框。此時第一個要做的動作便是將站長身份寫入 cookie,否則的話可是看不到任何留言內容。請按以下步驟──

1. 按下私密留言輸入框右上角的圖案,會彈出以下版權宣告視窗──



2. 按「確定」關掉它,會發現在「送出」鈕的左方出現了目前的 IP 位址。(下圖紅線圈起來的部分)



確保你 IP 不變的情況下(小心不要斷線),趕快將自己的 IP 位址複製起來。(註:如果沒有出現 IP 的話,表示目前所有偵測 IP 的伺服器都已達到流量上限,請換個時段再進行)

3. 馬上到 Blogger 後台 → 範本 → 修改 HTML → 找到剛剛安裝的私密留言區塊,你會看到以下片段──

<script type='text/javascript'>
var WPC_setting={
IP:&quot;&quot;,
hostPW:&quot;&quot;,
hostName:&quot;WFU&quot;,

所有的雙引號都被轉碼以致於程式碼不易辨識,不過沒關係,IPhostPW這兩個參數還是很好辨識,請將 IP 與 hostPW 那兩行,也就是原程式碼中的 G 行與 H 行,改為以下──

IP:"114.45.8.20",
hostPW:"1234",

紅字請改為你自己目前的 IP 位址(冒號是小寫,若是去複製輸入框的冒號就成了大寫)。藍字請自設站長密碼,用來驗證身份之用,可不要照著填 1234,不然有可能被破解的。

4. 儲存之後,隨便再開一篇文章,就會彈出以下視窗──



5. 接著,請再回到範本,將 IP 與 hostPW 那兩行,也就是原程式碼中的 G 行與 H 行,恢復為以下剛開始的狀態──

IP:"",
hostPW:"",


這個動作很重要,否則密碼資料留在範本裡,就被有心人士看光光啦!而若是 IP 資料留在範本裡,如果你是浮動 IP,哪天就有可能此 IP 輪到別人使用,而站長身分就得分別人用了。

範本儲存以後,到此為止就正式完成了私密留言系統的安裝流程了。


四、自訂資料庫

由於 2.0 版加入 email 通知功能、IP 及密碼驗證功能,這些是透過 Google 試算表來完成,而這些設定比起以上流程又更加複雜,因此自訂資料庫的說明暫時先不考慮,等到以下兩種狀況之一發生時才會考慮撰寫:

1. 有大量的自訂資料庫需求。
2. 私密留言資料量大到 Google 試算表無法負荷時(40萬筆),那麼我也會要求使用者開始學習自訂資料庫的方法。


五、簡易使用說明

其實這一版的操作已經寫得很直覺,該做什麼動作系統都會提示,因此簡單寫幾項:

1. 使用上有任何問題可按輸入框右上角的圖案,可連結到 FAQ 網頁找看看有沒有需要的答案。

2. 留言者由於沒有判斷身份的依據,為了網頁安全,留言內容封鎖任何語法;但站長回覆的內容可以使用語法。

3. 留言者無法自刪留言,站長才能刪除留言。

4. 系統會自動把身份資料寫入 cookie(無論是留言者或站長),期限 1 年,只要 1 年內再度拜訪網站,會自動延展期限 1 年。

所有私密留言相關網頁都可測試效果,有任何問題、建議歡迎提出,都可成為正式版的修改依據。

Blogger 私密留言系統」系列標題:
一、系統發佈網頁
二、簡易安裝及使用說明
三、FAQ 彙整

➢➢ 快速選單:   

沒有留言:

張貼留言