2015年2月1日 星期日

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

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

Wayne Fu 0 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 分享按鈕 -->
<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 -->



更多社交分享按鈕工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP