在這篇「分享到 Line 會遇到的問題整理」有讀者留言詢問:
這個現象來自於 Line 某次改版後,只要用手機點擊連結,一律會在 Line 內部開啟,不會另外呼叫手機瀏覽器,例如 Chrome、Safari 等。
這會帶來很大的困擾,因為 Line 內建瀏覽器的效果可能很差,例如:
本篇會說明 Line 為何要這麼做,以及各種應對方法。
(圖片出處: pexels.com)
手機內建瀏覽器的專有名詞叫做 In-App browser,或是 webview。Line 並沒有提供設定選項,讓使用者選擇用外部瀏覽器開啟連結,所以要根治此事除非 Line 哪天開竅。
先簡單說一下 Line 為何非用內建瀏覽器不可:
基本上 Line 不太可能站在使用者立場來改變此事,因此內建瀏覽器開啟網站後就會造成許多悲劇,詳細的分析請參考這篇文章:
必須慶幸的是,Line 為這件事留了一個後門,只要分享到 Line 的連結網址加上下面的紅字參數,就能強制用外部瀏覽器開啟:
例如本篇文章網址,如果要分享在 line 的話,需要使用以下網址:
讀者可測試看看,這個連結用 Line 開啟時,將不會呼叫內建瀏覽器。
我們可以控制自己分享到 Line 的連結,加上前面提到的參數。但麻煩的是,無法控制別人分享我們文章時使用的連結。
舉例來說,分享一篇文章到 PTT 時,我們貼的連結不會加上參數,那麼別人若分享這篇文章到 Line,自然不會知道要加上參數,仍然會以內建瀏覽器開啟。
所以如果希望網站流落在外的連結,被分享到 Line 時以外部瀏覽器開啟,記得要分享有使用參數的連結。
例如本篇文章分享到 FB 時,使用有參數的連結,那麼他人從 FB 轉分享到 Line 時,網址參數可能會變這樣:
我們很難預估使用者會從何處複製連結,說不定會直接從我們網站的連結來複製,那麼分享到 Line 時一樣不會有參數。
想做得徹底一點的話,連自己網站的連結都得加上參數,以下提供簡單的 javascript 語法,可一次幫網站所有連結加上參數。
以 Blogger 的操作環境為例,到後台「主題」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋</body> 這個字串,找到後在此字串的前一行,插入以下程式碼:
第 1 行綠字可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。
儲存後可看到效果,網站的連結都已加上參數。
雖然本篇說明了如何為網站連結加上參數,但不代表分享時一定要加上參數。同時本篇提供了修改全站連結的語法,但也不代表一定要這麼做。
做這些事的前提是這樣子的:
請問貼到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 用外部瀏覽器開啟連結的方法
必須慶幸的是,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 搜尋
<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 相關文章: