手機分享到 Line 的連結，如何強制用預設(外部)瀏覽器開啟？

在這篇「分享到 Line 會遇到的問題整理」有讀者留言詢問：

請問貼到LINE裡的超連結，能設定呼叫預設瀏覽器APP來開啟嗎?

這個現象來自於 Line 某次改版後，只要用手機點擊連結，一律會在 Line 內部開啟，不會另外呼叫手機瀏覽器，例如 Chrome、Safari 等。

這會帶來很大的困擾，因為 Line 內建瀏覽器的效果可能很差，例如：

• 網站版面可能大亂
• 用 JS 執行的重要功能可能無法運作
• 某些按鈕可能沒反應

本篇會說明 Line 為何要這麼做，以及各種應對方法。

(圖片出處: pexels.com)

一、為何 Line 要使用手機內建瀏覽器

手機內建瀏覽器的專有名詞叫做 In-App browser，或是 webview。Line 並沒有提供設定選項，讓使用者選擇用外部瀏覽器開啟連結，所以要根治此事除非 Line 哪天開竅。

先簡單說一下 Line 為何非用內建瀏覽器不可：

• 使用外部瀏覽器後，使用者注意力一分散，就會忘了回到 Line
• 所以 Line 死命也要將使用者注意力留住，而內建瀏覽器按右上角關閉後，會立即回到 Line
• 使用外部瀏覽器開啟時間長，而內建瀏覽器輕薄短小，開啟速度快，回到 Line 也快

基本上 Line 不太可能站在使用者立場來改變此事，因此內建瀏覽器開啟網站後就會造成許多悲劇，詳細的分析請參考這篇文章：

• 用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾

二、強制 Line 用外部瀏覽器開啟連結的方法

必須慶幸的是，Line 為這件事留了一個後門，只要分享到 Line 的連結網址加上下面的紅字參數，就能強制用外部瀏覽器開啟：

http://網址?openExternalBrowser=1


例如本篇文章網址，如果要分享在 line 的話，需要使用以下網址：

https://www.wfublog.com/2018/12/line-link-open-external-browser.html?openExternalBrowser=1
讀者可測試看看，這個連結用 Line 開啟時，將不會呼叫內建瀏覽器。

三、社群分享連結也要調整

我們可以控制自己分享到 Line 的連結，加上前面提到的參數。但麻煩的是，無法控制別人分享我們文章時使用的連結。

舉例來說，分享一篇文章到 PTT 時，我們貼的連結不會加上參數，那麼別人若分享這篇文章到 Line，自然不會知道要加上參數，仍然會以內建瀏覽器開啟。

所以如果希望網站流落在外的連結，被分享到 Line 時以外部瀏覽器開啟，記得要分享有使用參數的連結。

例如本篇文章分享到 FB 時，使用有參數的連結，那麼他人從 FB 轉分享到 Line 時，網址參數可能會變這樣：

https://www.wfublog.com/2018/12/line-link-open-external-browser.html?openExternalBrowser=1&fbclid=IwAR2CS1FJMTT8cY9BJY4XCa3r2TEOtRuUaMrd_sfA8zgN02JBY8G0ZSt2O5A

• FB 分享的網址都會有 fbclid 這樣的參數字串
• 但只要保有 openExternalBrowser 這個參數就能在 Line 中開啟外部瀏覽器

四、一次修改自己網站所有連結的參數

我們很難預估使用者會從何處複製連結，說不定會直接從我們網站的連結來複製，那麼分享到 Line 時一樣不會有參數。

想做得徹底一點的話，連自己網站的連結都得加上參數，以下提供簡單的 javascript 語法，可一次幫網站所有連結加上參數。

以 Blogger 的操作環境為例，到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script>
//<![CDATA[
/*處理分享到 Line 的連結*/
$("a").each(function () {
var href = this.href;

// http 網址才處理
if (href.indexOf("http") != 0 || href.indexOf("//") < 0){
return;
}

// 網址沒有參數 ? 時, 直接加參數
if (href.indexOf("?") < 0) {
href += "?openExternalBrowser=1";
} else {
// 網址有參數 ? 時, 用 & 加參數
href += "&openExternalBrowser=1";
}

this.href = href;
});
//]]>
</script>

第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

儲存後可看到效果，網站的連結都已加上參數。

五、總結

雖然本篇說明了如何為網站連結加上參數，但不代表分享時一定要加上參數。同時本篇提供了修改全站連結的語法，但也不代表一定要這麼做(為了單一事件導致全站的連結都太過冗長)。

做這些事的前提是這樣子的：

• 先測試一下自己的網站，使用 Line 內建瀏覽器開啟時，是否會有任何的異常，包括版面、功能、所有頁面 → 如果是的話，而且是無法忍受的狀態，再進行本篇的動作
• 瞭解一下自己網站的讀者，從 Line 連過來的比例高不高 → 如果覺得不想損失這些讀者，再考慮處理分享在外的連結

更多 Line 相關文章：