雖然 Line 很久以前就釋出可以安裝在部落格網站的分享按鈕，不過之前幫忙朋友安裝時，實地測試各種不同裝置後，發現效果都不太一樣：1. 網頁版：沒有作用
2. 行動裝置(平板)：字串有網址的話會失效
3. 手機版：執行正常
因此研究了一下問題出在哪，以下先描述大致的情況，想要直接安裝語法請跳至「二、所有網站通用的語法」。
<< 請注意！本篇文章含會員限定內容 >>
一、行動裝置異常狀況
1. 官網語法
根據「官方網站」，Line 分享按鈕的安裝語法如下：
<a href="http://line.naver.jp/R/msg/text/?訊息文字"><img src="圖片網址"/></a>2. 美化分享內容
根據這篇「Line分享按鈕及連結」，作者將 "訊息文字" 拆解並進行版面美化，讓訪客分享的文字訊息第一行顯示文章標題，接著利用特殊符號 "%0D%0A" 產生自動斷行效果，於第二行再顯示文章網址。這樣分享出去的訊息，就能直接點擊超連結，連回我們的文章網址。利用其語法原理產生的語法大致如下：
<a href="http://line.naver.jp/R/msg/text/?文章標題%0D%0A文章網址"><img src="圖片網址"/></a>3. 平板異常狀況
將以上語法裝到網站上，經實測結果，手機裝置按下 Line 分享按鈕後，執行效果沒問題，Line 的分享訊息第一行會出現文章標題，接著斷行、第二行產生文章網址。
但在平板裝置，出現的畫面如下：
- 紅框可看到換行符號 "%0D%0A" 無法被解譯
- 紅圈可看到網址最後面會自動產生 "=" 這個字元
- 錯誤的網址導致訪客無法連結到我們文章頁面
為了解決以上問題，Line 的分享按鈕語法必須重新設計。
二、所有網站通用的語法
Blogger 平台的語法稍後說明，以下先提供所有平台都適用的語法，需要用 js 處理：
以上語法請擺在網頁想顯示的位置即可，若需要修改參數請對照程式碼行號：
G：為了與平板裝置相容，去除了換行符號，Line 的分享訊息格式為「標題 + 空格 + 網址」，若想更改格式，可變更「title + " " + url」這部分的內容。
H：綠色字串可改為自訂的按鈕圖片網址
此程式碼的效果大致如下面這個 Line 分享按鈕，可在自己的手機或行動裝置測試執行狀況：
如果用平板測試，將可看到如同下圖的效果，原本會黏在網址後面的 "=" 字串，現在跟網址分離了，訪客點擊超連結時可正常連到我們文章的網頁：
三、Blogger 平台語法
Blogger 平台比起其他網站，在安裝 Line 分享按鈕時，算是有先天的優勢。根據「Blogger 行動版範本修改技巧」，可以利用判斷式：
- 在手機版網頁，採用「一、行動裝置異常狀況」→「美化分享內容」，使用換行的語法讓版面美觀。
- 在非手機版網頁(平板)，採用「二、所有網站通用的語法」這部分的語法。
如果對語法熟悉的讀者，根據本文的程式碼、以及上述的說明，可以將判斷式寫出來，不需像本文一樣用到 js 來執行。而為何需要減少 js 的使用，可參考「優化網站效能該注意哪些事?」系列文章，如果 js 語法有替代方案，自然應該以替代方案為主。
如果對語法不熟悉也沒關係，可暫時先用本篇的程式碼，下一篇 WFU 會整理一些常用的、熱門社交分享按鈕語法，也會包含這個 Line 分享按鈕的判斷式，屆時再改用適合 Blogger 版本的語法即可。
更多網站工具：