2016年11月30日

利用 Google 試算表當小型資料庫 (4)使用 SQL 語法讓搜尋功能更強大

「利用 Google 試算表當小型資料庫」系列文已經寫過三篇,條列如下:


上一篇提供了篩選資料的簡易查詢語法,以及對資料排序的方法,相信這對小型的資料庫處理已經足夠。

不過幾年下來,如果你的試算表已經累積了數千筆、甚至更多的資料,或許你需要的會是正規資料庫的 SQL 搜尋語法,才能處理更複雜的需求,甚至是將整理出來的資料以圖表方式呈現,在網頁呈現即時的長條圖、分布圖等等。

這麼多複雜的功能,其實 Google 都已經幫我們把輪子造好了,不必自己研究,就看我們如何取用。那麼本篇就來說明如何呈現 HTML 效果、以及如何用 Javascript 操作。

(圖片出處: pixabay.com)
2016年11月27日

讓 Facebook 留言框與粉絲團的留言能夠即時同步

fb-comment-mirroring-讓 Facebook 留言框與粉絲團的留言能夠即時同步前陣子有案主詢問,「看到有些 FB 粉絲專頁的留言,會自動同步到部落格文章的 FB 留言板,這個可以做嗎?」

如果不瞭解以上描述是什麼狀況的話,用畫面說明比較容易懂,例如下圖是「粉絲團頁面的留言」:

fb-comment-mirroring-1-讓 Facebook 留言框與粉絲團的留言能夠即時同步


下圖是「部落格如何處理結構化資料標記」這篇文章的 FB 留言板留言:

fb-comment-mirroring-2-讓 Facebook 留言框與粉絲團的留言能夠即時同步


看到了嗎?兩邊的留言一模一樣,是互相同步的。這樣的功能有什麼好處呢?

其實優點很明顯,粉絲團跟網站的讀者可能分屬不同族群,一邊是社群粉絲、另一邊的讀者可能主要由搜尋引擎而來;若是兩邊都能看到同樣的留言,就能讓兩處的讀者同時加入討論,參與度、激盪的火花可能更高。如果站長要加入討論的話,也不必兩頭跑,可節省一些管理時間。

以下就來看看這個功能在安裝前,需要先瞭解的注意事項,以及介紹官方提供的安裝流程。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>
2016年11月23日

Line 處理待辦事項的技巧:讓已讀訊息保持未讀狀態

line-message-remain-unread-todo-task-Line 處理待辦事項的技巧:讓已讀訊息保持未讀狀態Line 已經越來越像傳統 Email 扮演的角色,以往收件匣未讀的信件就是我們的待辦事項,但現在越來越多待辦事項,會來自於 Line 的訊息,無論是上司、客戶、家人朋友,或是一大堆的群組。

但很可惜 Line 的訊息系統,無法像郵件軟體 (或 APP) 般好整理,除了不同性質、不同優先度的郵件可以分類或上標籤,已經打開的郵件也能標示回未開啟的狀態,來提醒我們需要如何處理這封郵件。也許即時通的功能或介面,將來會有大革新,用來解決上述需求。

在那之前,Line 有沒有什麼好的待辦事項處理技巧呢?

2016年11月20日

申請 Facebook 應用程式 APP ID 流程

apply-fb-app-id-申請 Facebook 應用程式 APP ID 流程FB 有些網頁 (部落格) 小工具在安裝或使用時,需要申請 APP ID 才能生效,這個流程不但有些麻煩,而且 FB 的網頁介面常常更改,不熟悉電腦操作的使用者可能會感到很頭痛。

有時我需要協助處理 FB 應用程式的相關事務,但會卡在 APP ID 的申請,因為這部分需要使用者自己的 FB 帳號才能跑完流程,不能由他人代勞。

雖然網路的教學很多,不過 FB 改版的頻率實在太高,為了自己及案主的作業流程方便,還是整理一篇教學,以後若是 FB 改版了也可自行更新內容。

以下先簡單介紹申請 APP ID 能做到的事,想直接進行流程請跳到「二、申請流程」。

2016年11月16日

部落格如何處理「結構化資料」標記 + 修復錯誤訊息

structured-data-testing-tool-error-部落格如何處理「結構化資料」標記 + 修復錯誤訊息關心 SEO 的站長,可能會研究「結構化資料標記」這個主題,而且使用「結構化資料測試工具」時,會發現不少錯誤訊息。由於不少讀者都曾問過這件事,因此本篇來做個整理。

不過為了節省讀者時間,先說結論:「部落格網站基本上忽略這件事也沒有大礙」。

「結構化資料標記」最主要是幫助特定類型的網站、資料,能被搜尋引擎理解分析,進而展示更容易被關注的資訊。這樣的話,部落格網站有設置「結構化資料標記」是很好,但這件事沒做、或沒修正錯誤,也不至於會讓 SEO 扣分。

以下會說明原因、大致介紹「結構化資料標記」、以及修正錯誤的準則。

2016年11月13日

Blogger 自製真正的站內搜尋小工具﹍以日期排列

前陣子接到一個需求,希望 Blogger 搜尋結果能以日期排列。這個要求乍聽之下不太瞭解用意,一般來說,搜尋結果會依照 "關聯性" 來排列,對訪客而言,應該會希望越相關的文章,排越前面才對啊?

不過由於案主是人氣很高的美食旅遊部落格,文章數量很多,她表示希望例如在搜尋 "台北" 時,日期最新的文章能排列在前。後來仔細想想也有道理,對於特定類型的網站,臆測訪客搜尋模式的確必須從不同的考量點切入,有時最新的資訊才是最重要的,例如日期較久遠的文章,該文介紹的店家可能早已關閉,或是介紹的景點已經過時、不熱門了。

因此,針對特殊需求的部落格,本篇會示範如何製作「依照日期排列」的搜尋框工具。

(圖片出處: pixabay.com)
2016年11月9日

Blogger 相關文章 V4﹍行動版專用

不少讀者都詢問過「相關文章 V2 (含縮圖功能)」能否裝在手機版,實際上如果真的這麼做的話,一定馬上就破版,因為行動裝置有著各種不一樣的螢幕寬度,加上直立、橫躺的操作,各種專為行動版而設計的工具一定要符合 RWD 才行。

除此之外,V2 的版面也不適合做成 RWD,如果要將「相關文章 + 縮圖」放在行動裝置,也許擺設上需要 "左半部縮圖、右半部文章標題" 這樣的配置。

因此這個為行動版設計的「相關文章 V4」,就是採取這樣的版面。如果你的行動版網站,不想只放純文字的相關文章,那麼可以考慮 V4 這個版本。



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

(圖片出處: pexels.com)
2016年11月6日

讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧

livia-multiliine-ellipsis-讓標題過長的多行文字自動省略﹍跨瀏覽器 CSS 技巧之前寫過「讓標題過長的文字自動省略﹍單行 CSS 技巧」,用來處理單行標題過長的問題。不過最近處理多個網站時,剛好都是旅遊美食類型,文章標題比起一般部落格會長上許多。

在特殊版型下(例如區塊寬度不夠),文章標題使用單行省略文字的方式,不容易辨識主題意涵,會導致點擊率下降。如果能夠使用 2~3 行的高度來顯示標題,超過的部分能自動出現省略符號(ellipsis) "..." 的話,會是比較恰當的作法。

只是多行省略號的 CSS 語法,有跨瀏覽器的問題,要如何處理比較恰當,請見本篇的整理。

(圖片出處: liviatravel.com)