2015年2月28日

[教學] 網站安裝 Line 分享按鈕﹍各種行動裝置都相容的語法

A+
雖然 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 版本的語法即可。


更多社交分享按鈕工具:

2 則留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。