2015年6月30日

Facebook 停止發佈粉絲頁 RSS﹍目前只剩這個替代方案能訂閱

fb-fan-page-rss之前製作了「FB 粉絲頁 RSS 網址線上產生器」,很可惜撐不到一年,日前該篇文章留言 #5 有讀者通知:「6/23 Rss for FB service has been closed down」,意思就是 FB 不支援粉絲頁的 RSS 了。

既然 FB 不玩了,那麼這件事只能靠熱心的網友來提供第三方服務,否則要提供 RSS 不是很簡單的事。運氣不錯的是,還真的有國外網友提供 RSS 服務,而且好像也找不到第二個了。

另外由於新版 FB API 的限制,就算 FB 粉絲頁能訂閱 RSS,使用上也無法再像以前一樣便利了,請見本文詳細的說明。

2015年6月26日

取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號

unicode-food-icon你的網站是否也用了很多小圖示,例如 "首頁"、"留言對話泡泡"、"Email" 等等?這些圖檔雖然體積小,但每個檔案的載入都需要耗費一個 http 請求,是影響網頁載入速度的一個小原因。

最早為了解決這個問題,出現「CSS SPRITE」技術,將多個小圖合併為一張圖,減少了大量 http 請求。但由於手續繁雜、加上管理不便,沒什麼人有耐心採用這項技術。

後來發展出「ICON FONT」,把小圖示製作成字形,不但可減少 http 請求,每個圖示還能向量無限縮放尺寸,簡直是劃時代的技術。其中最有名的是「FONT AWESOME」這套字型,包含了不少網頁常用圖示,是許多網頁範本的愛用字型。

不過最近發現的驚奇是,其實從遠古時代就一直存在的 UNICODE 特殊符號,會是網頁小圖示更方便的選擇,本篇將詳細介紹他的優點。

(示意圖出處: foodiesfeed.com)

2015年6月19日

如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示?

unicode-special-character-display-on-webpage上一篇「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」,展示了許多可以取代網站小圖示的 UNICODE,其優點非常顯而易見:

1. 字元的傳輸量遠低於圖片的傳輸量
2. 可以減少許多小圖示的 http 請求量

相信對於在意網站效能的站長而言,以上兩點是非常重要的。不過 UNICODE 並非每個瀏覽器版本、每個作業系統都能完全支援,這一點上一篇有詳細說明。那麼接下來的問題會是,要怎麼讓自己網站所使用的 UNICODE 表情圖案、特殊字元,都能讓所有訪客看到呢?

2015年6月16日

Unicode 表情圖案(emoji ) + 特殊符號字元一覽表

網頁常常會用到一些小圖示,例如搜尋框、郵件圖示、留言對話泡泡等。最簡單的方法可以直接 Google 這些圖示、或是到素材網站尋找合適的圖案,不過最近發現「Unicode 組織」越做越強大,很多常用的圖示都已經可以在 Unicode 編碼中找到。

而且 Unicode 非常跟的上潮流,FB、Line 等社交工具的風行,讓表情圖案需求大增,因此 Unicode 早已創造了許多表情圖案,且每年不斷地持續新增,今年~明年將有數百個表情符號可用。

本篇整理了所有 Unicode 特殊字元、符號的一覽表,方便查詢及複製。不過 Blogger 平台請詳讀下一篇的使用說明書「如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示?」→「五、將 UNICODE 再編碼」,因為 Blogger 編輯器對 Unicode 的相容性有點問題,需要特殊技巧才能正常顯示,貿然使用可能會引起災難

2015年6月14日

Blogger 插入表格的最佳流程 + 自適應寬度表格

copy-table-to-blogger過去就曾耳聞 Blogger 文章中插入表格(table)時,會遇到一些狀況,不過直到最近需要在網站整理一些表格,才有這個機會來研究這個主題。

Blogger 文章編輯器其實問題不少,過去曾整理過一篇「Blogger 文章編輯模式只要切換, 就可能產生異常現象?」。而插入表格時,一定會切換到 "撰寫" 模式,那麼自然得小心副作用。

本篇整理了我的使用心得,並整理出一套比較安全的操作心得,有需要的讀者可以參考。

(圖片出處: morguefile.com)
2015年6月12日

Blogger 相關文章 V3

這個工具使用了「相關文章」的版本號,但其實跟「相關文章 V2」的市場、用途並不相同。V2 版的文章會顯示縮圖,而 V3 版完全只有文字,難不成這個工具退化了嗎?

其實他比較偏向「系列文功能」的風格,只列出建議閱讀清單的文章標題。但篩選方式又不同,系列文是利用 "關鍵字" 來篩選,而這個 V3 版則是用 "標籤" 來篩選,與相關文章的篩選方式雷同,因此歸類於「相關文章」。

雖說只顯示文字,但功能與效果十分強大,請見後續的說明。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>


(圖片出處: lifeofpix.com)
2015年6月9日

標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率

banner-random-popular-post相信在逛網站的時候,越上方的位置、越吸睛的圖片比較能吸引到目光,因此我們很常看到輪播圖片的小工具,被擺放在網頁最上方的位置。

這不是沒有道理的,根據「F 形眼球運動軌跡」,多數訪客的行為模式就是如此。

如果想推銷網站的熱門文章,那麼在網頁上方擺放輪播圖片,會是一個增加點閱率,以及讓訪客停留時間更長的好主意。於是寫了本篇的小工具,請見後續的說明及安裝方法。

2015年6月7日

協助架設 Blogger 網站, 優化非官方範本

架設網站時使用的平台考量,用最簡單的二分法判斷,就是你需不需要使用主機。若不需要主機的話,使用雲端服務即可,沒有流量限制,這方面最好的選擇就是 Google 旗下的 Blogger 平台,沒有之一!

那什麼情況需要使用主機呢?無論是使用自己的主機、或是租用主機,都是一筆昂貴的開銷,一年至少要有數千元的預算、甚至上萬,還要有資安維護的本事(防駭客)。不過有主機的話,另外再投資 10 萬以上,網站就能從事更高階的商業活動,例如:

  • 建立大型資料庫,進行檢索查詢。
  • 串接金流,提供顧客線上刷卡結帳、自動處理訂單流程。

如果沒有以上兩者需求,或是只需要簡單的會員系統、購物車、PAYPAL 刷卡功能,那麼 Blogger 將是最划算的架站選擇。

(圖片出處: pixabay.com)
2015年6月6日

客製 Blogger 行動版範本, 改善網頁載入效能

blogger-mobile-customize-template-improve-speed-客製 Blogger 行動版範本, 改善網頁載入效能想要改善 Blogger 行動版的網頁載入效能,最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章,那麼的確採取這個方案即可。

如果你準備經營個人品牌、形象網站,那麼「官方行動版範本」顯然是不夠的,因為無法打造自己的版面效果,營造更好的視覺形象。

使用 RWD 範本也可以自訂行動裝置呈現的版面效果,然而缺點就是範本內容過於龐大,圖片尺寸跟網頁版一樣,導致行動裝置載入網頁的使用者體驗很差。

如果你是想加強行動版體驗、準備經營個人品牌的站長,那麼接下來的內容,可以知道客製行動版範本能做到哪些改善。

(圖片出處: pixabay.com)
2015年6月4日

取消 Blogger 行動版「向左/向右滑」切換文章的功能

blogger-mobile-disable-swipe-left-right有多位讀者反應 Blogger 行動版一個非常擾民的問題,也就是操作手機時,滑動螢幕只要稍微不小心往左或往右,就會切換到「上一篇/下一篇」文章。

這個功能的設計想必是出於貼心的考量、方便訪客操作頁面的切換,但往往我們是在操作「往上/往下」時,不小心手勢的角度偏左或偏右,便會立即觸發「往左/往右」的手勢,讓網頁切換到我們不想前往的頁面,也就是跳離了這篇文章。

如果你也不喜歡官方的這個設計,那麼可以安裝本文的小工具,將此功能取消,給訪客友善的操作體驗。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>