輕鬆打造網站置頂公告,抓住訪客注意力!

大部分情況下網站公告通常放在首頁,或是有經營 FB 粉絲團、社群媒體的話,重大事情在社群發佈的效果會比較好。然而這樣的處理方式,只能將公告內容擴散給粉絲。至於非粉絲的話,例如從搜尋引擎而來、或從別的網站連結過來的訪客,基本上只會到達文章頁面,不會看到首頁或社群媒體。 所以網站最...
繼續閱讀全文利用 Instagram 基本顯示 API 取得圖片

IG 原本很方便就能存取圖片,做成各種小工具在網站展示,例如「 在部落格側邊欄安裝 Instagram 小工具,顯示九宮格圖片 」。 不過 IG 被 FB 收購後,於日前宣布舊的 IG API 於 2020 年 6 月 30 日失效,請參考「 IG 官網公告 」。此公告並說明...
繼續閱讀全文舊版 Instagram API 於2020年3月底失效,請更新 IG 九宮格圖片外掛

去年寫過「 部落格側邊欄 Instagram 九宮格圖片 」外掛,不過最近協助安裝 IG 圖片外掛時,發現原本提供免費取得 access token(存取權杖)的線上服務「 Pixel Union 發佈了一則聲明 」,中文意思大概是這樣: 2020 年 3 月 31 日之後...
繼續閱讀全文忘了備份要如何救回部落格網站文章內容、圖片

最近接到一個比較罕見的需求,案主表示 Blogger 每篇文章設定的「搜尋說明」(可參考「 Blogger 文章設定 」→「六、搜尋說明」),在今年 5~6 月間的文章都不見了,詢問有沒有辦法可以救回。 以前曾寫過「 Blogger 網站消失 」、「 Blogger 文章誤刪...
繼續閱讀全文在網頁擺放 FB 即時通按鈕(免裝外掛),讓訪客線上即時聯絡

前陣子在「 CC0 免費圖庫搜尋引擎 」右下角,放了一個「錯誤回報」的按鈕,讓訪客可以即時留言回報站方。 這類的浮動按鈕很醒目,效果會比導覽列或頁尾的「聯絡站長」這類連結好一些。如果是熟悉網站動線的訪客,一般會知道去哪找留言板,但可惜很多使用者不一定熟悉網路或網站的通用設計。...
繼續閱讀全文在部落格側邊欄安裝 Instagram 小工具,顯示九宮格圖片

2020.7.14 公告: Instagram 官方宣布在 2020 六月底舊的 API 失效,所以本篇的工具已無效用,需要新的工具請參考「 利用 Instagram 基本顯示 API 取得圖片 」。 前陣子接到一個需求,希望在網站側邊欄擺放 IG 小工具,能顯示 9 張圖...
繼續閱讀全文各種「網頁失效連結」檢測工具評價分析及使用心得

以往都是使用「 Google 網站管理員 」定期檢查有無索引錯誤,也就是內部有沒有 404 無效連結。由於以前覺得文章數跟大站相比不算多,不怎麼注意外部連結會失效的問題,不過最近「 Google+ 關閉 」、「樂多」停業後,網站會產生大量的無效連結,覺得也該是時候來檢查一下網站的...
繼續閱讀全文Blogger 或部落格使用 Markdown 加快寫作速度的各種方案優劣分析

前陣子有讀者在「 Blogger 文章相關工具 」留言,詢問 Blogger 使用 Markdown 撰寫所發生的問題。雖然以前大致瞭解過 Markdown 的用法,但沒發表過相關文章,那麼現在就藉機會整理一下相關資料。 許多 Markdown 愛用者會希望 Blogger ...
繼續閱讀全文讓 FB 粉絲團評論星等在網頁顯示﹍製作流程研究

上一篇研究完「 讓 Google 商家評論星等在網頁顯示 」後,本篇繼續研究如何取得 Facebook 粉絲團評論星等的資料。 這次 FB 的處理流程沒有 Google 商家那麼繁瑣,但為了安全性因素,FB API 必須由後端呼叫,代表前後端都要處理,所以本篇仍舊無法提供安裝...
繼續閱讀全文讓 Google 商家評論星等在網頁顯示﹍製作流程研究

前陣子接到需求,希望在網頁上顯示「 Google 我的商家 」使用者評論內容、及評價星等。這個概念引起我的興趣,因為會是有力的行銷工具。 現在商家經營 SEO 需要的手法比過去複雜很多,除了基本的網站要顧,Facebook 粉絲團也不能荒廢,如上圖,Google 搜尋結...
繼續閱讀全文台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得

填寫會員資料的表單,大多需要輸入地址,不過自己製作「縣市」、「鄉鎮地區」的下拉選單其實很麻煩,而且最好也要提供郵遞區號,因為填表者自己不一定記得住。 本篇介紹的這個 jQuery 外掛 TWzipcode,可以完美地解決這些麻煩事,同時也會分享實作的心得。
繼續閱讀全文讓 Blogger 網站可以向訂閱者發佈通知﹍OneSignal 網頁推播訊息外掛

也許你曾逛過某些網站,瀏覽器會自動彈出這樣的訊息: 如果按「允許」的話,那麼日後這個網站有新文章,或是有公告訊息,瀏覽器就會傳送訊息給你。 這是 HTML5 的網頁推播技術,在 RSS、Email 訂閱式微的今天,對於站長們是很便利的一項福音,讀者只要打開瀏覽器,就能...
繼續閱讀全文讓訪客能自行放大網頁文字,提升友善閱讀體驗

閱讀網路文章時,不免會遇到某些網頁的預設文字過小,不但看起來不舒服,也加重了眼睛的負擔。過去曾介紹過 Chrome 的外掛「 讓 Chrome 只放大縮小文字(Zoom Text Only 套件) 」,可以單獨調整文字的大小,讓我們閱讀文章時更舒服。 但並非每個訪客都會安裝這...
繼續閱讀全文專業又有質感的網頁文章註解外掛 BigFoot﹍CDN 安裝懶人包

前陣子有案主需要將文章中的註腳功能,結合資料庫進行管理,也就是讓多處重複的註解,可以直接從試算表讀取,而不必一筆筆註釋。 因為這個案子而接觸到這個文章註腳外掛「 BigFoot 」,測試之後覺得效果跟質感都很好,比之前在「 jQuery 展開收合效果安裝懶人包 」介紹的另一個...
繼續閱讀全文安裝 PAYPAL 贊助+分期付款(訂閱)按鈕﹍以及使用心得

前陣子幫讀者處理 PAYPAL 贊助按鈕的設置,加上還有分期付款的需求,藉這機會整理一下心得,讓有需要的讀者參考。 雖然網站很久以前就放了 PAYPAL 贊助按鈕,不過到後來發現贊助的使用率較少,反而是支付的使用較多。因為轉帳對於某些族群比較麻煩,而 PAYPAL 的「 信用...
繼續閱讀全文標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率

相信在逛網站的時候,越上方的位置、越吸睛的圖片比較能吸引到目光,因此我們很常看到輪播圖片的小工具,被擺放在網頁最上方的位置。 這不是沒有道理的,根據「 F 形眼球運動軌跡 」,多數訪客的行為模式就是如此。 如果想推銷網站的熱門文章,那麼在網頁上方擺放輪播圖片,會是一個增加...
繼續閱讀全文[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)
![[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP61JneX54-Gh_wqY6PI5iiJK7dNDVtUBFDBOS3Ix6jIwqy1yA9HK_CrM_Bw9dCvO4KAKtFgL_WZtgAXSCeZbCJBXFtCxcesQKP0MDqfAOY_fYRwm2-3IuysGYusKiPEiJFRT0R7HixEPZ/s1600/go-top-button-animation.jpg)
(Pic from: keytothecity.co.uk ) 之前做過兩個「回到頂端」按鈕的版本,分別是「 Go Top 按鈕符合使用者體驗的友善設計 」、「 Go Top 按鈕放在浮動導覽列 」。最近處理的 case 需要炫一點的特效,因此將之前的版本增加一些動畫效果。 ...
繼續閱讀全文讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版)

上一個版本「 相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版 」FB 留言 Herman Tsao 詢問「 能做成依瀏覽器語言做自動轉換嗎? 」,其實偵測訪客的瀏覽器語言設定是做得到的,我們應該有這樣的經驗,某些安裝 Google 翻譯的網站,能得知我們的預設語言,在畫面上自動...
繼續閱讀全文雖然 PageRank 停止更新,沒關係還有 MozRank

這個「 Blogger 中文社群討論串 」提到了 Google 不再更新 PageRank 的消息,而這件事 Google 很久以前便開始預告,PageRank 的數字也有很長的一段時間沒有變動,越來越少看到網站掛上 PageRank 貼紙。 為何 Google 這麼做,想瞭...
繼續閱讀全文想知道自己網站的台灣或全球排名嗎?安裝 Alexa 貼紙秀給訪客看

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