[HTML5]運用網頁上的電話超連結語法(tel:),讓大家點一下就直接撥打電話

如何將電話號碼變成可直接撥號的超連結
如何將電話號碼變成可直接撥號的超連結

每間公司的網頁上,或者是絕大多數營業單位的網站,多半都會顯示她們的聯絡電話這種資訊。
在以前,這種類型的資訊,原則上跟翻紙本的電話簿沒有太大的區別,因為這個號碼就跟其他網頁上的文字一樣,沒有特別的互動性,要打這個電話,使用者還是要先把他背下來,然後一直默唸默唸默唸,直到平順無誤的撥出這個號碼為止(3278918...3278918...3278...嗯~32789多少?) XD


可現在就不一樣了。


在行動裝置時代,幾乎人手一支智慧型手機,且絕大部分網站的流量,都來自於這些行動裝置,若是在手機的網頁瀏覽器上,看到一組電話號碼,還要先背下來再去撥號,那麼就太浪費手機的功能了吧?


比較合理的作法,不是應該輕輕點擊一下這些電話號碼,然後就直接透過手機撥號嗎?
想想看,這樣既快捷,互動性也很高,商家很開心,使用者也便利。
那要怎麼寫,才能讓網頁上的電話號碼,變成可以點擊撥打的功能呢?


HTML 電話號碼超連結語法:TEL


寫法很簡單,完全不用什麼特別的技巧或是外掛,就用 HTML 本身的超連結語法就可以了。
就像在網頁上添加任何的連結一樣,唯一的不同,只是把連結前面原本的 HTTP/HTTPS這個通訊協定換成 TEL: 這樣的結構語法。


我們看一下電話號碼超連結標準寫法:


<a href="tel:+886-2-3278918">327-8918</a>

上面的範例是以台北的市話為主,如果是手機的號碼,那麼就是下面這樣:


<a href="tel:+886-918******">0918-***-***</a>

就這樣,很簡單吧?


在網頁上顯示的結果,就會跟下面這個範例是一樣的(請不要點擊,因為號碼是瞎打用於示範的)


聯絡電話:3278918
行動電話:091888888

在上面的範例裡,
這個電話連結在文字的部分,我們是直接顯示同樣一組號碼(就是3278918這組),但是變成超連結之後,其實這個文字的部份(錨定文字/Anchor Text)是可以用任何文字來更換的,像是你可以直接寫著:立即撥打我們的電話!!這樣的行動呼籲型的文字來取代單純數字號碼。


<a href="tel:+886-2-3278918">立即撥打我們的電話!!</a>

電話號碼連結語法的規則


從上面的範例中,大家可以看到在超連結裡面的數字都有放上了加號和減號,這是什麼意思呢?


是這樣的,使用電話號碼的超連結語法時,用在連結裡的號碼,最好是用國際撥號格式,就是像下面這樣的例子(以台北的市話為例):
+國碼(886)-區碼(2)-電話號碼(3278918)


國碼前面的加號是一定要擺上去的。


為什麼最好是以這樣的國際撥號格式呢?
這是為了可能避免有些手機系統不會自動將號碼解讀為本地的電話。
也有可能是你的使用者如果在海外,或是外縣市,那麼這個連結就有可能會撥給另一個位置了。
像是大家知道嗎?
泰國曼谷的區碼,跟台北一樣都是 02,如果不加上國碼,若是正好使用者在曼谷瀏覽到你的網頁,撥打電話,那麼就會撥到曼谷當地的市話了。


另外,國碼、區碼與號碼之間,可以用減號(-)來做分隔,不能用空白鍵喔。


咦?手機不是會自動偵測電話號碼嗎?


對,有些手機或是行動瀏覽器會自動偵測電話號碼,不過大家有發現嗎?錯誤率還蠻高的。


經常在網頁上明明就不是電話號碼的一些數字字串,都會被系統自動轉譯為『按一下撥號』,又或是如果網頁上原本顯示的電話號碼沒有標示完整的國碼、區碼等,或是用空白區隔的號碼字串,自動偵測時錯誤率都蠻多的,這樣直接會導致使用者體驗很糟糕,因為浪費了她們的電話費,到頭來還打錯電話 XD


所以最好就是不要依賴自動偵測,主動把網頁上所有的電話號碼都更新為撥號的超連結格式。


也有很多網頁開發專家會建議大家,直接把手機的自動偵測給關掉。
如果要關掉自動偵測電話號碼的話,可以在網頁的檔頭部分,加上下面這樣的中繼標籤(Meta Tag):


<meta name="format-detection" content="telephone=no">

用 CSS 來格式這個電話號碼的超連結


最後,我們來跟大家聊一聊,如何用 CSS的語法,來格式化這個針對電話號碼的超連結。


要特別講這個,主要是因為,一般我們在用CSS來設計樣式的時候,多半都是一次把所有的超連結一起處理,像是:


a {
color: red;
text-decoration: none;
border-bottom:1px solid red;
}

如果要讓電話號碼的超連結,跟其他的文字連結長的不一樣,那麼在CSS的語法上,可以這樣寫:


a[href^="tel:"] {
/*這裡放入針對電話號碼的樣式語法*/
}

上面這個語法:a[href^="tel:"]
就是告訴CSS說,這裡的樣式語法只針對連結字串以 tel: 開頭的才有效,其他的就不勞你費心了。


結語:不僅僅是手機而已


事實上,
把所有的電話號碼以標準格式加上超連結,不僅僅是針對手機而已喔,現在很多的電腦/筆電,在桌面上就可以直接跟你的智慧型手機串連,也就是說,直接在桌面版的瀏覽器上,也一樣是可以按一下就撥號的,非常方便。


所以雖然感覺有點麻煩,但還是建議最好一個一個的把全部的電話號碼都改為超連結吧!


最後,我們再來重點摘要一下替電話號碼加上超連結的幾個注意事項:

  • 不要仰賴手機系統的自動偵測功能,建議手動替每一個電話號碼添加超連結。
     
  • 超連結裡的號碼要符合國際撥號格式:+國碼-區碼-電話號碼。
     
  • 撥號連結裡的數字,國碼用加號,分隔標記用減號,不能有空白字元。
     
  • 依情況可以考慮關掉手機版網站的自動偵測功能。