歡迎加入 FB 新社團，「貼文主題」功能讓 Blogger 討論區更完善
2019.4.5 補充： 若 FB 社團需要「貼文主題」功能，請參考這篇心得「 讓 FB 社團文章能依 "貼文主題" 分類﹍實作記錄 」。 本站經營主題為 Blogger，長久以來一直想提供 Blogger 站長們有個可交流的討論區，以下是我經手的幾個版...
繼續閱讀全文10 個不建議使用 Blogspot 建立網站的錯誤觀念釐清
雖然在我心目中，無論是寫部落格、形象網站、創業架站，Google Blogger 都是一開始入門的首選，原因可參考： Blogger 是否搬家到 Wordpress 的比較 商業形象網站使用 Blogger 一頁式版型，有助於提升專業度及 SEO Blogger 架設電商...
繼續閱讀全文讓 Gmail 能插入 HTML 語法，方便行銷推廣﹍Chrome 套件
最近想在 Gmail 中放 FB 提供的官方小工具語法，才發現翻遍 Gmail 設定也找不到能切換成 HTML 編輯模式的方法。 我相信這算是 Google 的安全機制，減少郵件中被植入惡意程式碼的機會，例如插入 script。 但如果只是單純的 HTML 語法其實沒有危...
繼續閱讀全文讓 FB 粉絲團評論星等在網頁顯示﹍製作流程研究
上一篇研究完「 讓 Google 商家評論星等在網頁顯示 」後，本篇繼續研究如何取得 Facebook 粉絲團評論星等的資料。 這次 FB 的處理流程沒有 Google 商家那麼繁瑣，但為了安全性因素，FB API 必須由後端呼叫，代表前後端都要處理，所以本篇仍舊無法提供安裝...
繼續閱讀全文快速取得 FB 粉絲專頁永久存取權杖(Access Token)
Facebook 提供的 API 中，有些跟粉絲團有關，而且在行銷上是非常實用的工具，例如： FB 粉絲團評論星等 FB Messenger(即時通) 而想用 FB API 操作粉絲團的話，需先取得粉絲團管理員權限，也就是拿到粉絲專頁永久存取權杖(Access Toke...
繼續閱讀全文手機分享到 Line 的連結，如何強制用預設(外部)瀏覽器開啟？
在這篇「 分享到 Line 會遇到的問題整理 」有讀者留言詢問： 請問貼到LINE裡的超連結，能設定呼叫預設瀏覽器APP來開啟嗎? 這個現象來自於 Line 某次改版後，只要用手機點擊連結，一律會在 Line 內部開啟，不會另外呼叫手機瀏覽器，例如 Chrome、Safar...
繼續閱讀全文使用 FB API 處理登入登出功能(含自製按鈕)，取得使用者基本資料﹍實作範例
網站建置會員系統時，以往要自己處理會員登入登出、帳號密碼這些事，其實是非常麻煩的： 需自行管理所有帳號密碼，控管安全性風險，若密碼被駭客竊取就慘了 使用者常多個網站設定同一密碼，對於不熟悉的網站可能因不放心交出密碼而不願意註冊 每次要輸入帳號密碼也麻煩，而且會員多半自己也...
繼續閱讀全文取得 Google API Key(金鑰) 流程，啟用服務 + 瞭解配額限制
Google 提供許多免費的佛心服務，而且還有各式 API 讓開發者串接。但若 API 總是被無限制使用的話，除了對 Google 伺服器是很大的負擔，同時「免費」也代表沒有實質收益，無法跟股東交代。 為了控管串接 API 時所使用的流量，為「免費使用」、「開發測試」設定額度...
繼續閱讀全文Blogger 自製「精選文章」小工具﹍文字版
其實這個工具很久以前就很想做了，原因是側邊欄放了「 熱門文章 」小工具，但本站性質比較奇特一點： 網站主題以 Blogger、部落格經營設計為主 而網站流量主要從 Google 搜尋引擎而來 可是流量較大的文章多半與網站主題無關 導致這個熱門文章排行榜，對主力客群吸引力...
繼續閱讀全文一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理
處理 RWD 網站時遇過許許多多案例，對 RWD 圖片或版面效果覺得跟心目中的 RWD 定義(或是想像)不太一樣。其實以 Blogger 一頁式範本來看，我還沒看過不是 RWD 的版型，那麼一頁式也可以當作 RWD 網站來看待。 會產生落差的原因，有可能是這個版型設計上的問題...
繼續閱讀全文讓 Google 商家評論星等在網頁顯示﹍製作流程研究
前陣子接到需求，希望在網頁上顯示「 Google 我的商家 」使用者評論內容、及評價星等。這個概念引起我的興趣，因為會是有力的行銷工具。 現在商家經營 SEO 需要的手法比過去複雜很多，除了基本的網站要顧，Facebook 粉絲團也不能荒廢，如上圖，Google 搜尋結...
繼續閱讀全文使用跨域代理伺服器(CORS PROXY)，解決讀取第三方網站資料問題﹍實作範例
前端開發人員寫 JS 遇到需要串接第三方 API，或是想存取第三方網站的資料時，遲早會遇到跨域限制的問題。 跨域(Cross-Origin Resource Sharing)的原理可參考這篇「 跨來源資源共用 」，因為安全性考量，網站主幾可設定收到 HTTP 請求時，是否允許...
繼續閱讀全文商業形象網站使用 Blogger 一頁式版型，有助於提升專業度及 SEO
前陣子一個架站案例滿有參考價值的，案主一開始這麼說： 我知道 seo 的王道是內容行銷，所以我花蠻多心力在寫一些我專業領域內的文章，但前幾個月，我發現競爭對手的網站，本來排名很後面，也沒什麼在做內容行銷，但他自從請人重整網站後，seo 排名馬上就超前... 通常架站遇到提 ...
繼續閱讀全文解決浮動導覽列遮住錨點位置的問題﹍CSS 技巧
網站使用「 浮動導覽列 」可提供友善的閱讀體驗，讓導覽列隨時保持在網頁最上方，訪客失焦時能重新找到方向。 不過這個設計後來發現有個隱藏的缺點，當網站使用了錨點後，訪客點擊錨點時，螢幕捲到的位置看起來怪怪的。 本站為了解決此現象，過去曾調高錨點的位置(放置隱藏的錨點)，或是...
繼續閱讀全文如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解
最近接到需求要在網頁呈現「五顆星評等」的效果，就像搜尋結果常會看到的星級評等： 或 Google 商家的評分星等： 從上面的示意圖可發現，以 5 分為滿分的情況下，4.5 分(也就是 90%)所呈現的星等並非 4 星(無條件捨去法)，也不是 5 星(四捨五入法)，...
繼續閱讀全文Blogger 架設電商購物車網站前，需要先考量這些問題
接到的 Blogger 商業架站需求中，有一小部分希望能購物後進行結帳，也就是需要購物車系統。由於 Blogger 是純前端的平台，就算能實現購物車功能，整個購物流程、機制、商品銷售及售後管理，一定比不上自架站的購物車系統。 那麼想要在 Blogger 架設購物車功能的站長...
繼續閱讀全文解決 Chrome 下 Javascript 中文排序問題
最近客戶反應，網頁上的中文排列順序，變得跟以前不太一樣，例如： 原本會按 "上午"、"下午"、"晚上" 排序，現在變成 "上午"、"晚上"、"下午" 原本...
繼續閱讀全文偵測網頁 DOM 新增節點(元素)最方便的方法﹍利用 CSS 動畫技巧
最近這個案例比較特殊，幫客戶改付費範本次數一多，某些比較貴的範本，作者為了不想讓別人看懂程式碼，雖然 JS 沒有使用混淆 (obfuscate)，但是壓縮、重組得不成人形，導致完全無法去閱讀解析這些 JS 程式碼。很多動態生成的區塊，最終只能等 DOM 完整成形後，再來寫 JS ...
繼續閱讀全文網頁插入表格不再麻煩﹍線上產生器 + 可匯入 CSV 檔(Tables Generator)
前陣子剛好多位讀者、客戶都詢問這件事： 如何在文章中插入表格，且能正常顯示，版面不異常？ 如果對 HTML 語法不熟悉的話，網頁要插入表格的確沒那麼容易。過去曾寫過「 Blogger 插入表格的最佳流程 + 自適應寬度 」，文章內容不短，但是瞭解原理、操作熟悉後，經由 Go...
繼續閱讀全文如何查詢自己網站的 SEO 熱門關鍵字 + 應用技巧﹍Google 網站管理員 Search Console
最近在臉友 許哲維 的貼文得知，使用 Google 搜尋自己網站的熱門關鍵字，有可能會出現一個新的區塊，顯示 SEO 相關資訊，例如點擊數、平均搜尋排名等數據，就像下圖這樣： 這個功能還滿有趣的，不禁研究了一下，只是似乎不是所有人都看得到。 本篇整理一下心得，並提供...
繼續閱讀全文如何為 FB 粉絲團新增「服務內容」，讓顧客一眼就知道賣哪些產品
前幾年 Facebook 粉絲頁的選單頁籤中，推出一個「服務內容」的項目，可以讓公司、店家列出產品項目、或提供的服務。但不方便的地方是，只有粉絲團設定了「公司」、「店家」等特定類別，頁籤才有「服務內容」這個選項。以本站為例，類別為「個人部落格」就無法使用。 不過最近測試時發現...
繼續閱讀全文Blogger 側邊欄分頁工具﹍相容官方小工具
以前曾寫過多個「 Blogger 側邊欄自製分頁(Tab)小工具 」，而共通點是某些官方小工具無法使用，例如 "熱門文章"、"網誌存檔"、"網誌統計資料" 等等。 因為這些官方工具的原理，是使用 Ajax 技術延遲取...
繼續閱讀全文SEO 資訊與假新聞的危害﹍如何辨別 SEO 文章真偽
最近「假新聞」事件導致外交官殞落，台灣當局總算開始正視假新聞造成的國安危害。比起先進國家早立專法反制，台灣步調雖慢但總比沒有好。 電視媒體帶頭散佈未經查證的消息、甚至製造假新聞早已司空見慣，不過對於能辨別真偽、有心查證的民眾而言，要瞭解真相不乏驗證的管道。例如各路人馬匯集的 ...
繼續閱讀全文Blogger 側邊欄隱藏開關工具
喜歡版面簡潔的部落格站長，有不少會想使用單欄式版面，也就是沒有側邊欄的設計。然而側邊欄捨棄其實也是有點可惜，這個區塊的空間若好好運用，除了可以帶給讀者不少便利性，還可撥一部份空間擺放廣告獲得收益。 如果網站花一些心思設計的話，我想最佳解會是讓有需求的使用者各取所需，不想看到側...
繼續閱讀全文專業程式設計師的生存之道﹍讀後心得摘要
這陣子借了一本給工程師看的書，但是內容跟程式碼無關，所以讀起來不傷腦、很輕鬆。其實這本書比較像在談心法，更多的是作者提醒工程師要如何在職場上存活下去、如何工作地更有效率。 我認為在實用性上，這本書反而比寫程式的工具書重要，因為程式寫得再厲害，許多工程師的通病是爆肝、把自己搞得...
繼續閱讀全文部落格是否需要為了中國大陸市場而搬到自架站？
過去在協助 Blogger 架站時，有時談得差不多了，案主忽然想到什麼，最後來個回馬槍：「那 Blogger 在大陸看得到嗎？」 這個問題實在太難回答了，說 Yes / 說 No 都不是正解，總之無法用簡單的二分法判別。你需要瞭解案主到底在想什麼，究竟是隨口問問，還是真的有在...
繼續閱讀全文使用北都兩年後解約感想﹍第四台各種替代方案整理
2019.9.14 公告： 不看第四台之後，我做了一個可以線上合法收看多數台灣節目的選台器工具，無論是新聞、財經、政論、綜藝...各種節目一應俱全，推薦讀者使用： 前往「線上看電視」 原始文章：去年「 首次跟北都續約 」時，使出渾身解數才讓他們按照當初的約定「一年...
繼續閱讀全文Google 試算表製作可執行 Apps Script 指令碼的(圖片)按鈕
最近接到一個需求，想要每次都指定不同的 Blogger 文章，做出指定格式的內容，並存成 XML 檔。比較簡單的製作方式，是利用 Google 試算表，將指定的條件輸入儲存格後，寫 Google Apps Script 來撈資料執行。 而每次執行 Google Apps Sc...
繼續閱讀全文為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人
我們常常會在某些網站的右下角，看到 FB 即時通的圖示，點開後就能直接留言。這個功能很熱門，英文名稱為 Customer Chat Plugin(客戶聊天機器人)，很多人都提問過要如何安裝，本篇就來整理非常簡單的安裝流程。 點此看範例網頁
繼續閱讀全文部落格是否要加入內容付費平台 (Medium) 的考量
「內容付費平台」是指像 Medium 、 SOSreader (現已改名為 Vocus 方格子)這類的部落格平台，提供讀者付費、打賞的機制，讓站長可以藉寫文獲得收益，網站不用另外放廣告，版面比較清爽。 幾個月前在 FB 收到某平台傳來的訊息，算是想自我推薦，這是部分訊息： ...
繼續閱讀全文讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開
去年 Blogger 官方推出的 RWD 範本，側邊欄工具的設計我覺得有一點比較沒彈性，全部預設都是關閉的狀態，所以使用「 樹狀標籤 V2 」的讀者曾反應，希望小工具的內容預設為開啟的狀態。 當時解決的方法是在程式碼單獨處理，但這個作法無法套用到每個小工具，因此本篇提供比較好...
繼續閱讀全文Blogger 自製「精選文章」小工具﹍圖片版
Blogger 官方幾年前推出「精選文章」小工具，我認為這個功能非常有必要性，因為跟側邊欄的「熱門文章」、「最新文章」工具一樣，都具有維持訪客注意力、減少跳出率的用途。 不過本質上，「精選文章」還是有所不同： 「熱門文章」顯示的文章無法由自己決定，熱門程度是由訪客決定。 ...
繼續閱讀全文釐清 Blogger「網站架設 / 客製功能 / 諮詢服務」的費用行情﹍無預算專區
看到 FB 網友貼的「 沒預算方案 」，雖然是嘲諷的意味居多，但不可否認的，「無預算」族群的比例很高，本站也遇過非常多案例。 網站架設或相關事務是高度客製化的產品，就像房屋裝潢、手工家具一樣，無法經工廠機器大量生產，費用只能看客戶要做到什麼程度而定，與客戶的預算有高度相關。 ...
繼續閱讀全文讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens
最近接到的需求是，希望滑鼠經過圖片時，能像使用放大鏡一樣，掃過的區域有放大的效果。 類似的功能還滿常見的，例如購物網站，需要展示產品的頁面，由於網頁的空間、寬度有限，圖片很難呈現局部細節。為了降低消費者的疑慮，有必要用放大鏡功能，讓小圖來呈現大圖的細部效果。 另外客戶也希...
繼續閱讀全文防止網頁圖片被下載的密技
最近接到一個需求，由於案主網站的圖文常被中國網站、或農場網站盜取，所以希望能夠讓網頁上的圖片，不要那麼容易被下載。 當然我也跟案主說了，任何方法都不可能阻止圖片被取得，最簡單的按一下 Print Screen 鍵就拿走了，所以不如做好浮水印比較實在。 不過案主的出發點是，...
繼續閱讀全文Blogger 恢復網址後綴(.com)，可能導致 Google 網站管理員索引大幅下降(search console)
前陣子客戶使用網站管理員(search console)時遇上問題，他表示： 把Blogger與Search console串聯，目的是為了看到瀏覽者是搜尋什麼關鍵字而找到我。但串聯成功後，我在Search console的搜尋分析裡面，卻遲遲看不到任何關鍵字的數據 一開始...
繼續閱讀全文用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webView)的方法
前陣子的一個專案，客戶反應很多使用者用手機操作時，網頁會有錯誤導致無法註冊。但我手機實測的結果又沒有發生任何問題，於是請客戶提供使用者的操作環境，例如 Android 或 iOS 系統，瀏覽器版本等等。 結果都不是這些原因，最後才發現是因為使用者在 Line 上面開啟網站連結...
繼續閱讀全文Blogger 諮詢聯繫填寫表單 SOP
本站常會接到許多 Blogger 相關的提問、合作案件、或是詢價，無論是簡單的問題，或是大型的專案，只要提供的資訊不足，就不容易進行回覆，需要花費多次往來溝通的時間。 因此若有需要向本站洽詢之前，麻煩按照本文流程提供必要資訊。 (圖片出處: picjumbo.com ) ...
繼續閱讀全文經營何種類型的網站，可以靠 Adsense 廣告點擊收入維持生計？
前陣子接到一個架站需求，雖然客製功能很多，但客戶開出的預算比起一般水平高出不少。其實跟客戶也不算不認識，所以跟他聊聊架站的目的，其中幾點他提到： 希望以興趣養活自己，因此我有設定Adsense 同時不希望廣告造成訪客困擾，這其中的平衡需要你幫忙調整 因為我自己也不太喜歡廣...
繼續閱讀全文三國志 11 高難度開局 (1)﹍攻略 SOP
之前 Steam 特價買了 San11，原本只是放著當紀念品，後來手癢拿個 5 星劇本試試，打算玩玩開局就收起來，結果覺得 5 星劇本用堵路的方式雖然可以開局，但幾乎沒辦法有進展。旁邊的大魔王曹操雖然攻不進來，但本身也不容易打出去，就這麼一直耗著很浪費時間。 以往大多只玩開局...
繼續閱讀全文
