Clik here to view.
使用跨域代理伺服器(CORS PROXY)，解決讀取第三方網站資料問題﹍實作範例
前端開發人員寫 JS 遇到需要串接第三方 API，或是想存取第三方網站的資料時，遲早會遇到跨域限制的問題。跨域(Cross-Origin Resource Sharing)的原理可參考這篇「跨來源資源共用」，因為安全性考量，網站主幾可設定收到 HTTP 請求時，是否允許非主機網域的來源進行存取。例如自架站的圖片若不想被盜連，可以設定不允許其他網域存取。使用 JS 存取第三方 API...
View ArticleClik here to view.
讓 Google 商家評論星等在網頁顯示﹍製作流程研究
前陣子接到需求，希望在網頁上顯示「Google 我的商家」使用者評論內容、及評價星等。這個概念引起我的興趣，因為會是有力的行銷工具。現在商家經營 SEO 需要的手法比過去複雜很多，除了基本的網站要顧，Facebook 粉絲團也不能荒廢，如上圖，Google 搜尋結果也會顯示 FB 評比星等、投票數。另一個經營重點就是「Google...
View ArticleClik here to view.
一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理
處理 RWD 網站時遇過許許多多案例，對 RWD 圖片或版面效果覺得跟心目中的 RWD 定義(或是想像)不太一樣。其實以 Blogger 一頁式範本來看，我還沒看過不是 RWD 的版型，那麼一頁式也可以當作 RWD 網站來看待。會產生落差的原因，有可能是這個版型設計上的問題，也可能對 RWD 的認知有誤，或者其實是瀏覽器的效果。本篇會整理一些常發生的案例，說明如何處理各種狀況。(圖片出處:...
View ArticleClik here to view.
Blogger 自製「精選文章」小工具﹍文字版
其實這個工具很久以前就很想做了，原因是側邊欄放了「熱門文章」小工具，但本站性質比較奇特一點：網站主題以 Blogger、部落格經營設計為主而網站流量主要從 Google...
View ArticleClik here to view.
取得 Google API Key(金鑰) 流程，啟用服務 + 瞭解配額限制
Google 提供許多免費的佛心服務，而且還有各式 API 讓開發者串接。但若 API 總是被無限制使用的話，除了對 Google 伺服器是很大的負擔，同時「免費」也代表沒有實質收益，無法跟股東交代。為了控管串接 API 時所使用的流量，為「免費使用」、「開發測試」設定額度限制是必須的，當超過額度時代表已經超出「一般個人使用」、「API...
View ArticleClik here to view.
使用 FB API 處理登入登出功能(含自製按鈕)，取得使用者基本資料﹍實作範例
網站建置會員系統時，以往要自己處理會員登入登出、帳號密碼這些事，其實是非常麻煩的：需自行管理所有帳號密碼，控管安全性風險，若密碼被駭客竊取就慘了使用者常多個網站設定同一密碼，對於不熟悉的網站可能因不放心交出密碼而不願意註冊每次要輸入帳號密碼也麻煩，而且會員多半自己也記不住每個網站註冊的帳號密碼為了讓會員忘記密碼時能取回，還得做個取回密碼的系統。不過以上這些麻煩事都可外包給第三方服務來解決，例如網路龍...
View ArticleClik here to view.
手機分享到 Line 的連結，如何強制用預設(外部)瀏覽器開啟？
在這篇「分享到 Line 會遇到的問題整理」有讀者留言詢問：請問貼到LINE裡的超連結，能設定呼叫預設瀏覽器APP來開啟嗎?這個現象來自於 Line 某次改版後，只要用手機點擊連結，一律會在 Line 內部開啟，不會另外呼叫手機瀏覽器，例如 Chrome、Safari 等。這會帶來很大的困擾，因為 Line 內建瀏覽器的效果可能很差，例如：網站版面可能大亂用 JS...
View ArticleClik here to view.
快速取得 FB 粉絲專頁永久存取權杖(Access Token)
Facebook 提供的 API 中，有些跟粉絲團有關，而且在行銷上是非常實用的工具，例如：FB 粉絲團評論星等FB Messenger(即時通)而想用 FB API 操作粉絲團的話，需先取得粉絲團管理員權限，也就是拿到粉絲專頁永久存取權杖(Access Token)。且權杖絕對不能外洩，否則粉絲團等於拱手送人了。一般來說 Access Token...
View ArticleClik here to view.
讓 FB 粉絲團評論星等在網頁顯示﹍製作流程研究
上一篇研究完「讓 Google 商家評論星等在網頁顯示」後，本篇繼續研究如何取得 Facebook 粉絲團評論星等的資料。這次 FB 的處理流程沒有 Google 商家那麼繁瑣，但為了安全性因素，FB API 必須由後端呼叫，代表前後端都要處理，所以本篇仍舊無法提供安裝懶人包，只能提供研究後的心得整理。點此看範例網頁(圖片出處: 一蘭拉麵粉絲團)一、製作原理FB API...
View ArticleClik here to view.
讓 Gmail 能插入 HTML 語法，方便行銷推廣﹍Chrome 套件
最近想在 Gmail 中放 FB 提供的官方小工具語法，才發現翻遍 Gmail 設定也找不到能切換成 HTML 編輯模式的方法。我相信這算是 Google 的安全機制，減少郵件中被植入惡意程式碼的機會，例如插入 script。但如果只是單純的 HTML 語法其實沒有危險性，那麼就整理一下這件事 Gmail 可以怎麼做，並提供範例。一、Chrome 外掛 HTML Inserter for...
View ArticleClik here to view.
10 個不建議使用 Blogspot 建立網站的錯誤觀念釐清
雖然在我心目中，無論是寫部落格、形象網站、創業架站，Google Blogger 都是一開始入門的首選，原因可參考：Blogger 是否搬家到 Wordpress 的比較商業形象網站使用 Blogger 一頁式版型，有助於提升專業度及 SEOBlogger 架設電商購物車網站前，需要先考量這些問題不過我不太會把這類文章貼到各個討論區、社團去傳播，最多放在個人 FB、粉絲團，讓自己 Blogger...
View ArticleClik here to view.
歡迎加入 FB 新社團，「貼文主題」功能讓 Blogger 討論區更完善
本站經營主題為 Blogger，長久以來一直想提供 Blogger 站長們有個可交流的討論區，以下是我經手的幾個版本：「G+ 社群」：2012 年成立──討論區可分類討論串回覆無法置頂G+ 明年 2019 將要關閉「Blogger 論壇」：2015 年成立──功能較完整，比較像傳統討論區查資料、SEO 索引佳缺乏社交功能「FB 舊社團」：2016 年擔任管理員──討論串無法分類討論串回覆可置頂因為...
View ArticleClik here to view.
如何運用 FB 社團外掛進行推廣﹍網頁版 + 電子郵件
FB 粉絲團到達一定規模後，成立 FB 社團有很多好處，可讓(相同興趣的)粉絲交流共同關注的主題，話語權不再是單一來源。萬事起頭難，無論是粉絲團或社團，初期如何增加粉絲數、或成員，都是會傷透腦筋的一件事。本篇會說明如何利用 FB 官方提供的社團外掛工具，在自己網站增加曝光，以及使用 Email 進行推廣的方法。(圖片出處: pixabay.com)一、建立 FB...
View ArticleClik here to view.
網頁是否安裝思源黑體、中文字型的考量﹍影響載入速度的因素及作法分析
過去在「網頁中文字型除了微軟正黑體, 還有這些好選擇！」曾提過，網頁若使用「作業系統」以外的字體，由於中文字型檔案太大，會影響網頁載入速度。後來 Google Fonts 免費讓「讓思源黑體可直接外連」，使用 Google 的 CDN...
View ArticleClik here to view.
網頁安裝思源黑體﹍CSS 最佳化實作 + 展示頁面
前陣子與朋友討論網頁安裝「思源黑體」的效果，有強者大大告知現在載入字型檔時，會拆成上百個小檔案。研究後發現這真是 Google Font...
View ArticleClik here to view.
直接修改 Picasa 圖片網址參數，就能改變尺寸、進行裁切、加強 SEO
從 Blogger 上傳的圖片、甚至 Google 相簿其實都是放在 Picasa 圖床， 詳細原理可參考「其實 Google 相簿依然是 Picasa」。而 Picasa 圖床有著全世界其他圖床都沒有的技術，只要修改網址參數就能改變圖片尺寸，以及其他各種功能。在這個「Blogger...
View ArticleClik here to view.
為何 Flickr 會刪除免費圖片額度？原來 Google 關閉了這個服務
Flickr 去年底發佈了這項震撼彈「不給錢就刪圖！Flickr宣布終止1TB免費空間服務，免費用戶將只能保存1000張照片、其餘照片全數刪除」，截止日期是 2019/2/5，在那之後 Flickr 會將免費版圖片刪除到剩下 1000 張。2 年前曾在「其實 Google 相簿依然是 Picasa」提醒站長們 Flickr 沒有 Picasa 圖床保險，另外「Flickr...
View ArticleClik here to view.
網頁安裝思源宋體﹍CSS 最佳化實作 + 展示頁面
上一篇「網頁安裝思源黑體﹍載入速度最佳化實作」已說明了 Google Fonts 的中文字型處理技術原理，本篇直接說明如何安裝「思源宋體」。最佳化的要點為：手動拆解官方 CSS 檔內容，逐一加入 font-display: swap 參數把所有 CSS...
View ArticleClik here to view.
FB 社團初期如何增加成員人數﹍心得整理
前陣子成立新的 FB 社團「Blogger 經營學習資源分享」，心情跟當初成立「CC0 免費圖庫」粉絲團一樣，擔心一開始人數少，會影響新成員加入意願，還找出一套「FB 粉絲團快速互助增加按讚數攻略」。但 FB...
View ArticleClik here to view.
主流 CC0 圖庫已不再宣告「CC0 條款」，原因究竟為何？
去年「CC0 免費圖庫搜尋引擎」有忠實使用者傳來訊息提醒，收錄的 CC0 圖庫之中，「攝圖網」(699pic.com) 有照片為 VRF 授權，並非 CC0 授權。詳細檢查了一下何謂 VRF，根據「官方條款」內容，以及該網站的「免費用戶使用權限」，使用圖片需要註明出處，這些都與 CC0 精神背道而馳，因此決定從「CC0 免費圖庫搜尋引擎」移除此圖庫網站。受這事件的影響，順道檢視了相關網站，才發現各大...
View Article