2015年2月28日

[教學] 安裝 Line 分享按鈕﹍網頁版及行動裝置都相容的語法

A+
2017.1.20 公告:由於 Line 出了網頁版的程式,本篇的程式碼已經改為網頁版及行動裝置都相容的語法。可忽略原始的文章說明內容,直接跳到「二、所有網站通用的語法」安裝程式碼即可。


雖然 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 的分享按鈕語法必須重新設計。



二、所有網站通用的語法


以下為 2017.1.20 更新過的語法,網頁版的程式碼參考自這篇「【JS】LINE分享方法」:

<!-- Line 分享按鈕 -->
<script>
//<![CDATA[
(function() {
var img = "http://2.bp.blogspot.com/-tsIDMPhBx18/VPGxHZtjsnI/AAAAAAAALIU/1b_VO721HDw/s1600/line-share-button.png", // line 按鈕圖示
title = document.title,
url = "http://" + location.hostname + location.pathname,
href, html;

// 行動裝置語法
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
href = "http://line.naver.jp/R/msg/text/?" + title + "%0D%0A" + url;
} else {
// 網頁版語法
href = "https://lineit.line.me/share/ui?url=" + encodeURIComponent(url);
}
html = "<a href='" + href + "' target='_blank'><img src='" + img + "'/></a>";
document.write(html);
})();
//]]>
</script>
<!-- Designed by WFU BLOG -->


以上語法請擺在網頁想顯示的位置即可,綠色字串可改為自訂的按鈕圖片網址。

此程式碼的效果大致如下面這個 Line 分享按鈕,可在自己的網頁版、手機或行動裝置測試執行狀況:





三、Blogger 安裝語法


以下根據「二、所有網站通用的語法」,改成適合 Blogger 安裝的語法,請放在範本之中:

<!-- Line 分享按鈕 -->
<b:if cond='data:blog.isMobile'>
<!--行動裝置-->
<a expr:href='"http://line.naver.jp/R/msg/text/?" + data:blog.pageName + "%0D%0A" + data:blog.canonicalUrl' target='_blank'><img src='http://2.bp.blogspot.com/-tsIDMPhBx18/VPGxHZtjsnI/AAAAAAAALIU/1b_VO721HDw/s1600/line-share-button.png'/></a>
<b:else/>
<!--網頁版-->
<a expr:href='"https://lineit.line.me/share/ui?url=" + data:blog.canonicalUrl' target='_blank'><img src='http://2.bp.blogspot.com/-tsIDMPhBx18/VPGxHZtjsnI/AAAAAAAALIU/1b_VO721HDw/s1600/line-share-button.png'/></a>
</b:if>
<!-- Designed by WFU BLOG -->



更多社交分享按鈕工具:

2 則留言:

張貼留言注意事項:

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