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

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 分享按鈕 -->
<a expr:href='data:blog.isMobile ? "http://line.naver.jp/R/msg/text/?" + data:blog.pageName + "%0D%0A" + data:blog.canonicalUrl : "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>
<!-- Designed by WFU BLOG -->

更多社交分享按鈕工具：