12/20/2018

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

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

A+
在這篇「分享到 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 用外部瀏覽器開啟連結的方法


必須慶幸的是,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 相關文章:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

4 則留言:

  1. 讚!謝謝。
    悲劇是我網頁的問題在IOS上還是會發生
    已登入的身份在轉頁回來時會遺失,Set-Cookie少了

    回覆刪除
    回覆
    1. 加油~
      需要 iOS 除錯工具的話,可參考 https://www.wfublog.com/2017/12/chrome-ios-remote-debug-webkit-adapter.html

      刪除
    2. 有喔!正是參考這一篇,謝謝

      刪除
  2. 感謝清楚描述分享~

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP