讓 Line 按鈕只在手機+行動裝置顯示

如果網站有安裝過 Line 按鈕的話，應該會發現只有行動裝置(手機+平板)有作用，而網頁版的 Line 按鈕按下後，只會連結到官網。

前陣子有讀者反應，"能否讓 Line 按鈕只在手機及平板出現，網頁版不要出現？"。的確，如果能這麼做的話是最好，以下就來看看這件事如何進行。

一、Line 按鈕的難題

先說結論，這件事沒有 100% 的完美解決方法，但是有應付 95% 的語法，在新技術尚未出來之前，相信這是可以接受的處理方式。

1. 判斷行動裝置

事情的癥結在於目前不存在一個完整的機制，能夠有效偵測所有的行動裝置。雖然兩大陣營 Android、iOS 可以用語法偵測出來，但由於行動裝置推陳出新，新型號、山寨機不斷產生，終究兩大系統之外的機型，JS 語法不一定能偵測得到。


2. 目前完美解法

唯一能偵測所有行動裝置的方法，就是建立一個資料庫，記錄所有型號，例如這個「mobile-detect.js」。

先說結論，WFU 不認為這是好的解決方案，一方面這個外掛檔案太大(35k)，沒什麼必要為了 Line 按鈕這件事而多裝個大外掛；另一方面不斷有新的行動裝置機型，代表你得每個一段時間就到官網檢查 mobile-detect.js 是否有更新，不但麻煩，而且作者也不見得願意這麼勤奮，肯無償花時間來隨時更新資料庫。


3. 最佳解

WFU 認為的最佳解，就是不要追求完美解，捨棄支援少部分行動裝置，讓主流行動裝置能支援就好。如此不但省事，也不必安裝多餘外掛。

二、安裝 Line 按鈕

雖然「Line官網」提供了分享按鈕的安裝語法，不過執行效果不是很好。

請參考這篇「Line 分享按鈕各種行動裝置都相容的語法」，改用調校過的語法，可以在各種行動裝置的執行效果最佳化。

三、判斷行動裝置

1. 判斷行動裝置的語法

根據這篇「What is the best way to detect a mobile device in jQuery?」，以下的語法可以判斷出九成以上的行動裝置，涵蓋了 Andoird/蘋果/黑莓機...等等：

<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// 這裡放入 Line 安裝語法
}
</script>

2. 判斷手機的語法

如果要排除平板，單單判斷出手機裝置的話，Blogger 有個「行動版判斷式」滿好用的。

偷偷看了一下 Blogger 原始碼，研究一下 Google 工程師是怎麼判斷行動裝置的：

var a="indexOf",b="&m=1",e="(^|&)m=",f="?",g="?m=1";function h(){var c=window.location.href,d=c.split(f);switch(d.length){case 1:return c+g;case 2:return 0<=d[1].search(e)?null:c+b;default:return null}}var k=navigator.userAgent;if(-1!=k[a]("Mobile")&&-1!=k[a]("WebKit")&&-1==k[a]("iPad")||-1!=k[a]("Opera Mini")||-1!=k[a]("IEMobile")){var l=h();l&&window.location.replace(l)};
這一段看起來像是天書的內容，跟前面判斷行動裝置的語法沒有差太遠，試著改成以下：

<script>
if( /iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && /(?=.*Mobile)(?=.*WebKit)/i.test(navigator.userAgent)) {
// 這裡放入 Line 安裝語法
}
</script>

四、程式碼安裝方式

1. 通用安裝方式

最簡單、所有網站通用的 Line 按鈕安裝方式，請按以下流程：

使用「三、判斷行動裝置」→「1. 判斷行動裝置的語法」的程式碼
將 "// 這裡放入 Line 安裝語法" 這些字串，改成「Line 分享按鈕各種行動裝置都相容的語法」裡的程式碼 D~I 行即可。


2. Blogger 安裝方式

Blogger 由於網頁版跟行動版範本不同，也許讀者對於 Line 按鈕，在網頁版與行動版想要擺放的位置並不一樣，那麼就得利用判斷式分別設定了。

例如手機 Line 按鈕可用以下的程式碼：

<b:if cond='data:blog.isMobile'>
這裡填入通用安裝方式的程式碼
</b:if>

平板 Line 按鈕可用以下的程式碼：

<b:if cond='!data:blog.isMobile'>
這裡填入通用安裝方式的程式碼
</b:if>

附個圖記錄一下調整後的效果，這是網頁版的擺設：




這是行動版(手機)上的模擬效果：

Line 相關文章：