2014年10月28日

訂閱 Facebook 社團貼文心得__IFTTT 應用

訂閱 RSS 是獲得資訊的重要來源,尤其部落格站長更是需要。而如何收集各種國內外資訊來源,除了需要敏銳度,也得配合各種不同工具、或網路服務的應用能力。如果能擁有越多的資訊素材,除了寫文章不怕沒題材寫,也能增加內容的深度與廣度。

過去曾介紹過「如何取得 mobile01、PTT 的 RSS」、「如何取得 FB 粉絲頁 RSS」,除此之外,還有一個大宗資訊來源──FB 社團的貼文。FB 社團的角色可以看成是論壇、BBS 的一個討論區,如果你需要訂閱 mobile01、PTT 的某些討論區的話,那麼在 FB 一定也可以找到一些討論比較有深度的社團。

由於 FB 社團並沒有提供 RSS 的功能,不像 FB 粉絲頁可以找到 RSS 網址直接訂閱。不過 WFU 利用各種網路服務搭配組合,就能全自動取得貼文,並交由 Feedly 來訂閱,以下就來看看怎麼實現。

2014年10月26日

會員中心新增「小遊戲區」


(Pic from: wallpaperstock.net)
2016.4.9 公告:因 Google Drive 外連失效,停止「小遊戲區」的功能。


首先,會員中心公開試營運三個禮拜以來,雖然曾遇上 Google Drive 升級的意外,使得有段期間新會員無法註冊加入,不過日前會員的人數已經突破了三位數。

加入會員很簡單,只要有 FB 帳號即可、不必填寫個資,就能閱覽不公開的「會員限定文章」。而現在會員又多了一項福利,可進入新增的「小遊戲區」,且遊戲的數量會持續增加,遊戲列表也會再本篇自動更新。

2014年10月24日

如何讓 Javascript/CSS 執行有效率﹍修改 Blogger 範本的觀念 (2)


(Pic from: css-javascript-toolbox.com)
網頁載入速度是影響訪客對網站印象的重要一環(參考「網頁載入速度 黃金三秒」),而 Javascript(以下簡稱 js) 與 CSS 在範本中如何配置,關係著網頁執行的效率。不過對於初心者而言,這些知識未免太過複雜,為了讓不懂語法的新手站長們都能享受架站的樂趣、順利地安裝各種網頁小工具, WFU 製作了各種懶人包,以期讓安裝過程無腦化。

然而懶人包的缺點就是──執行效率可能稍差。因此本篇的內容主要提供給進階使用者,瞭解 JS/CSS 的執行原理,並據以調整適當的擺放位置,讓網頁載入及執行速度加分。

2014年10月18日

想知道自己網站的台灣或全球排名嗎?安裝 Alexa 貼紙秀給訪客看


(Pic from: seomastering.com)
經營部落格一段時間後,如果小有人氣的話,站長們可能都會好奇,自己的網站在台灣能排上第幾名呢?其實對於這件事,能提供具有公信力的來源並不多,在亞洲地區可以申請加入「博勢力」的部落格排行榜。不過由於分類很多,且參加排行的網站比例不高,由部落格貼紙顯示的排名,很難看出網站的實力落在哪裡。

世界龍頭等級的 Amazon,旗下的「Alexa」提供了全世界網站的排名與統計數據。雖然為人詬病的是──「Alexa 可以買榜」,不過能花錢的網站畢竟佔少數,目前而言 Alexa 的排名算是最具有公信力的。

Alexa 官方提供的網站貼紙能在部落格顯示「世界排名」,而 WFU 提供的工具則能顯示「台灣排名」(或是地區排名),如果讀者有買網域的話,那麼就可試試本文的工具。
2014年10月16日

利用 Google 試算表當小型資料庫 (3)簡易查詢與排序 (及新版試算表讀取流程)


(Pic from: veryicon.com)
免費的部落格平台,結合 Google 試算表後,使用簡單的 javascript 操作,就可對試算表資料庫進行存取,在網站上實現各種應用,例如初期發表的「部落格即時留言板」,一直到近期的「會員系統」。

不過資料庫若只做到儲存與寫入,則無法發揮其長處。如能對大量資料進行排序及查詢,那麼網頁就能滿足訪客的各種特定需求,例如從龐大的手機商品資料庫中,篩選出「iPhone」這個型號的列表,接著使用排序功能,依照價格由高至低排列,諸如此類的情境。以下將舉實例來說明,如何使用試算表資料庫,來做出簡易的查詢及排序。

2014年10月9日

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (2)縮圖+滾輪特效安裝懶人包

2016.4.13 公告:為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「Fancybox 燈箱外掛 CDN 安裝懶人包」。


上一篇的「fancybox 安裝教學」說明了如何從官網下載檔案、上傳到自己的空間、最後利用本站提供的簡便前導程式來顯示效果,其過程十分繁複。

喜歡懶人包的讀者可以不用折騰了,這篇除了提供打包好的檔案,也提供簡便安裝的方式。然而 fancybox 功能非常多,這個懶人包的缺點就是,只能遷就 WFU 打包好的功能與效果。不過本文提供的懶人包,包含了「縮圖+滾輪特效」,也就是完全模擬 Blogger 官方的燈箱效果,相信對多數使用者而言,已經非常美觀及實用了。

一、「縮圖+滾輪特效」的優點


1. 原始效果

曾看過上一篇的讀者應該看過原本的 DEMO 頁面效果,請按下面按鈕前往示範網頁:



WFU 不太喜歡這個預設效果,因為用滑鼠滾輪、或手動切換圖片的時候,圖片會上下或左右劇烈晃動,看得眼睛都花了。


2. 縮圖+滾輪特效

現在可以比對一下這個懶人包的效果,請點以下按鈕前往示範頁面:



除了畫面不再晃動以外,多了縮圖提示效果,也可方便瞭解閱覽圖片的進度、或是否已經看完所有的圖片;若沒有縮圖,當圖片一多時,讀者一定不會發現已經滾完一輪了。



二、本篇特效使用的檔案


請對照「上一篇」→「二、部落格安裝 fancybox 的方法」,本篇的特效並沒有使用所有的 js 及 CSS 檔,只使用了以下原始檔的內容:

  • jquery.fancybox.pack.js → 主程式
  • jquery.fancybox-thumbs.js → 縮圖
  • jquery.mousewheel-3.0.6.pack.js → 滾輪
  • jquery.fancybox.css → 主要 css
  • jquery.fancybox-thumbs.css → 縮圖 css
  • fancybox_sprite.png
  • fancybox_overlay.png
  • fancybox_sprite@2x.png
  • fancybox_loading.gif
  • blank.gif
  • fancybox_loading@2x.gif


另外為了節省空間及方便引用,將三個 js 檔及兩個 css 檔全部壓縮,及合併為一個 js 檔及一個 css 檔。



三、安裝程式碼


1. 準備動作

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。


2. 安裝程式碼

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



3. 修改參數

請對照以上程式碼行號:

G~R:這部分的內容與作用,跟上一篇完全一樣,以下只摘錄重點──E 行的紅色字串 .post-body 是 Blogger 平台的文章區塊,如果非 Blogger 平台,建議利用「Chrome 開發人員工具」找出文章區塊的 class 或 id,然後置換此字串(class 的前面要加 ".",而 id 前面要加 "#")。這段前導程式做的事情為:
  • 只抓出文章區塊的圖片來展示燈箱效果,自動加上 fancybox 需要的參數,不需要手動設定
  • facnybox 預設有超連結的圖片,才能展示燈箱效果,但網頁有的圖片可能當初忘了設定超連結,那麼這個前導程式可以自動補上超連結

S~AD:這段程式碼為 fancybox 的參數設定

T~U:設定了前一張圖片、下一張圖片的切換效果。藍色字串 "fade" 代表為 "淡入淡出" 的效果。可以改為 "none",代表沒有切換效果。或是改為 "elastic" 就是預設的、看了頭暈的搖晃效果。

W:藍色字串 "true" 代表「滾輪切換圖片時,背景畫面不會跟著上下捲動」。

Y~Z:藍色數字 "50" 分別設定了縮圖尺寸寬、高的像素(px)值。

存檔後找一篇圖片多的文章來測試,即可看到效果,或是點以下按鈕前往示範頁面:



更多其他 fancybox 的參數使用,請參閱「官方說明書」。



四、備份及分流 js、CSS、圖檔


雖然使用這個懶人包很方便,可以無痛體驗 fancybox 的特效,然而這些連結檔案放在 WFU 的 Google Drive 空間,過去發生了「Google Drive 流量限速」的情形,為了避免將來某天這個小工具無預警罷工,請讀者有空時,務必將相關檔案分流。

除了程式碼 B、C 行的 js/css 檔,還有 6 個圖檔也必須分流。為了方便操作,我把所有 8 個檔案放在以下 Google Drive 資料夾路徑:





上圖為檔案列表,將所有檔案下載後,請參考上一篇「fancybox 安裝教學」→「二、部落格安裝 fancybox 的方法」→「3. 上傳檔案方式 2」,將所有檔案上傳到自己的 Google Drive,放在同一個資料夾,並設定共用權限。

最後將自己的 js 檔及 css 檔外連路徑,置換程式碼 B、C 行綠色字串的路徑,就完成了檔案分流,可以避免將來流量遭到限制。


2016.4.13 公告:由於「Google Drive 將於 2016 年 8 月關閉外連」功能,屆時程式碼 B、C 行的外連都將失效,請讀者將上面這個 Google Drive 資料夾路徑中的 8 個檔案下載,並存放到自己的雲端空間(必須是目錄型的空間),取得自己的 JS/CSS 檔案連結後,自行置換 B、C 行的綠色字串連結。

如不清楚何謂 "目錄型的空間",可參考「徹底解決網站外連空間問題」→「支援目錄路徑的雲端空間」。


Fancybox 系列文章:
2014年10月7日

最佳 CSS 3D 按鈕產生器__Button X 操作心得

使用 CSS 語法產生的按鈕,要做的好看不容易;然而圖片式的按鈕雖然畫面呈現較佳,卻需要花費 http 請求時間,也就是會影響網頁載入速度。如果可以的話,使用 CSS 按鈕會是最佳選擇。

網路上有許多線上 CSS 按鈕產生器,可以讓我們輕易取得不少漂亮的按鈕。而本篇要介紹的 CSS 按鈕產生器──Button X,是 WFU 認為最棒的一個,滿符合該網站對自己的期許(Best CSS Button Generator)。他們提供了許多精緻的預設按鈕,質量比其他網站的 CSS 按鈕好很多。

按理說這類的線上服務其實不必特別介紹操作方式,通常滑鼠拉一拉就能產生 CSS 語法。不過本篇的線上服務,除了英文介面外,操作過程碰到些許小小複雜,因此特別整理一下使用心得,讓讀者能順利上手。下面這顆按鈕就是利用這個線上服務所製作出來的效果──


2014年10月4日

部落格網站「會員系統」試營運

有關注 WFU BLOG 的朋友應該會發現,九月中開始,某些文章出現了「會員限定」的功能,因為 WFU 預先悄悄在部落格網站測試「會員系統」的可行性。

在免費部落格平台、或沒有租用主機的網站實現「會員系統」不是容易的事,需要解決後端資料庫、系統安全、行動版等等諸多問題。一方面感謝有讀者回報安全性問題,一方面值得欣慰的是到目前為止,主要問題都找到了解決方案,因而藉此篇公告,本站的「會員系統」即日起正式開始 "試營運"。

在網站右上角的「加入會員」按鈕、以及導覽列上的「會員中心」下拉選單,都能進入及使用會員中心的各項功能,以下就來一一介紹。

(圖片出處: lendingsolutions.com)