Line 分享按鈕：文章分享語法相容網頁版、行動裝置、APP

網站及部落格安裝 Line 分享按鈕，語法相容網頁版 ( 電腦版瀏覽器 )、行動裝置 ( 行動版 ) 或 APP，LINE 傳送分享文章到 Line 好友名單的「聊天、朋友、群組、Keep」使用。

網頁安裝「LINE 分享按鈕」的方式有兩種，一種是「圖片 JavaScript 連結」，另一種是利用官方提供的「LINE 函式庫」，當然行動版及 App 都適用。

無論是圖片連結的方式，或是使用官方函式庫將文章分享到 LINE，都能夠正常抓取文章的「網址、圖片、標題、描述」。從行動裝置上按下我們在行動版或網頁版裡設置的 LINE 分享按鈕，也能夠正常的開啟 LINE APP 做分享文章的動作，將文章分享給好友。

本文中「LINE 分享按鈕語法」除了一般安裝方式，也加入了 Blogger 及 WordPress 部落格的設置方法，如果你的網站剛好在這兩個網誌平台，也可以參考以下的設定介紹為自己的行動版及網頁版 ( 電腦版 ) 網站做「LINE 分享按鈕」的部署。

網頁版訪客點擊 LINE 分享按鈕時的使用情境

當訪客按下分享按鈕時，會在瀏覽器上開啟一個新視窗。輸入 LINE 的帳號和密碼登入之後，就能做文章分享的動作。如下圖和上圖。

(* 訪客在瀏覽器中登入過一次資料，之後分享文章時即不用再次做登入的動作。)

LINE 分享按鈕樣式

(* 可以點擊以下 LINE 分享按鈕，直接觀察訪客的使用情境。)

「用 LINE 傳送」使用「圖片 JavaScript 連結」按鈕

「用 LINE 傳送」使用「官方 LINE 函式庫」按鈕

設置流程

LINE 按鈕使用圖片 JavaScript 連結
官方 LINE 函式庫分享按鈕
WordPress 安裝 LINE 分享按鈕
Blogger 安裝 LINE 分享按鈕

開始設定

Step 1

LINE 按鈕使用圖片 JavaScript 連結

圖片連結推送網頁文章分享的方式，適合在網站內其他分享按鈕 ( FB、G+、Twitter ) 也是以圖片當作分享按鈕的情境下使用。因為調整圖片的寬高，就能讓所有分享按鈕的高度都為一致。

在網站中置入以下代碼，即可用「圖片分享按鈕」的方式推送文章分享到網頁版的 LINE 中做分享。(* 用手機分享的話，此語法會在手機中跳出選擇 LINE APP，或手機瀏覽器分享文章的選項。)


<a href='javascript: void(window.open(&apos;https://lineit.line.me/share/ui?url=&apos; .concat(encodeURIComponent(location.href)) ));' title='分享給 LINE 好友'><img alt='分享給LINE好友 !' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QWmCV_sMkMG1yVSekImF2X1XTtstWPQ7rlrJIPDhsyScT4dA9XAJ2Pjrd6sjxWN9sZJLjQ2L35b_w8G4oBfqyrFOW_FZuGPFeZA8uqd7L2v_EqJWDZ3HF26HziD4VPpOUJGnCCzFW0Y/s1600/168x40.png' width='168'/></a>


<a href="javascript: void(window.open(&apos;https://lineit.line.me/share/ui?url=&apos; .concat(encodeURIComponent(location.href)) ));" title="分享給 LINE 好友"><img alt="分享給LINE好友 !" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QWmCV_sMkMG1yVSekImF2X1XTtstWPQ7rlrJIPDhsyScT4dA9XAJ2Pjrd6sjxWN9sZJLjQ2L35b_w8G4oBfqyrFOW_FZuGPFeZA8uqd7L2v_EqJWDZ3HF26HziD4VPpOUJGnCCzFW0Y/s1600/168x40.png" width="168" /></a>

(* 以上兩種「LINE 分享按鈕語法」都一樣，差別在於『 ' 』與『 " 』，擇一選用即可，「XML」網頁可以使用第一個。如果要更改圖片的寬與高，可以調整「height='40'」與「width='168'」。)

如果要變更圖片的尺寸類型，可以下載「LINE 官方圖片檔資源」。或是使用以下「TinyPNG」壓縮過的官方圖片資源：

Step 2

官方 LINE 函式庫分享按鈕

官方「LINE 函式庫」使用的分享按鈕，與「FB、G+、Twitter」官方提供的按鈕高度比例都相近，如果你的網站中的其他分享按鈕，是使用「FB、G+、Twitter」官方提供的按鈕。安裝時使用「官方 LINE 函式庫」分享按鈕會較為適宜。

接著在網站或文章中想出現 LINE 分享按鈕的位置，放入以下「LINE 函式庫」代碼即可完成網頁版 LINE 分享按鈕的部署。(* 用手機分享的話，此語法會在手機中跳出選擇 LINE APP，或手機瀏覽器分享文章的選項。)


<div class='line-it-button' style='display: none;' data-type='share-a' data-lang='zh-Hant' ></div>
<script src='//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js' async='async' defer='defer' ></script>


<div class="line-it-button" style="display: none;" data-type="share-a" data-lang="zh-Hant" ></div>
<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer" ></script>

(* 以上兩種「LINE 分享按鈕語法」都一樣，差別在於『 ' 』與『 " 』，擇一選用即可，「XML」網頁可以使用第一個。)

變更上面代碼中的「data-type="share-a"」數值，即可改變 LINE 按鈕尺寸類型。

share-a：

share-b：

share-c：

share-d：

share-e：

Step 3

WordPress 安裝 LINE 分享按鈕

將 LINE 分享按鈕安裝在 WordPress，這邊以「STEP 1」圖片 JavaScript 連結的方式做為示例。

前往 WordPress 後台，將以下代碼安裝在「外觀〉主題編輯器〉content-single.php」的「footer」之前，即可在文章的底部出現 LINE 分享按鈕。


<a href="https://lineit.line.me/share/ui?url=<?php the_permalink(); ?>"><img alt="分享給LINE好友 !" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QWmCV_sMkMG1yVSekImF2X1XTtstWPQ7rlrJIPDhsyScT4dA9XAJ2Pjrd6sjxWN9sZJLjQ2L35b_w8G4oBfqyrFOW_FZuGPFeZA8uqd7L2v_EqJWDZ3HF26HziD4VPpOUJGnCCzFW0Y/s1600/168x40.png" width="168"/></a>

(* 如果要在文章標題的下方放入 LINE 分享按鈕，可以將代碼置於「content-single.php」的「</header>」下方。)

Step 4

Blogger 安裝 LINE 分享按鈕

在 Blogger 安裝 LINE 分享按鈕，可參考 2013 年「技研可樂」行動版與電腦版分享按鈕系列文章。(* 文章已重新編輯 )

Step 4-1. Blogger 安裝「官方 LINE 函式庫分享按鈕」

如果是以「官方 LINE 函式庫」的方式安裝「LINE 分享按鈕」，可以參考：「Blogger 電腦版行動版文章中安裝社群分享按鈕」。以下是安裝完成的範例圖片：

Step 4-2. Blogger 安裝「LINE 圖片 JavaScript 連結」分享按鈕

如果在你的 Blogger 網站中的其他「FB、G+、Twitter」分享按鈕，是以圖片的方式做部署，想要在行動版與電腦版網站中安裝「圖片 JavaScript 連結式」LINE 分享按鈕，可參考以下設定方式。

4-2-a. 開啟「自訂」Blogger 行動版範本

前往「自訂 Blogger 行動版範本與自適應設計原理」的「STEP 1 使用自訂 Blogger 行動版範本」，查看開啟「自訂」 Blogger 行動版的步驟。

4-2-b. 範本中找查需要置入分享按鈕的程式碼區段

在範本中搜尋「<data:post.body/>」。此時在程式碼區間，可以找到兩處有「<data:post.body/>」的程式碼片段。

第一處「<data:post.body/>」為「行動版」範本的文章內頁程式代碼資料，如果模板改的很亂不確定是否為行動版的區間，可以在「<data:post.body/>」上方搜尋是否有「<b:includable id='mobile-post' var='post'>」字段，整個 Blogger 模板只會有一處。

第二處「<data:post.body/>」為「電腦版」範本的文章內頁程式代碼資料，如果模板改的很亂不確定是否為電腦版的區間，可以在「<data:post.body/>」上方搜尋是否有「<b:includable id='post' var='post'>」字段，整個 Blogger 模板只會有一處。

4-2-c. 行動版電腦版文章內頁加入社群分享按鈕程式碼

將以下「圖片 JavaScript 連結式」LINE 分享按鈕程式碼，放置在「<data:post.body/>」上方，LINE 分享按鈕就會在文章上方。放置在「<data:post.body/>」下方，LINE 分享按鈕就會在文章下方。


<a href='javascript: void(window.open(&apos;https://lineit.line.me/share/ui?url=&apos; .concat(encodeURIComponent(location.href)) ));' title='分享給 LINE 好友'><img alt='分享給LINE好友 !' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QWmCV_sMkMG1yVSekImF2X1XTtstWPQ7rlrJIPDhsyScT4dA9XAJ2Pjrd6sjxWN9sZJLjQ2L35b_w8G4oBfqyrFOW_FZuGPFeZA8uqd7L2v_EqJWDZ3HF26HziD4VPpOUJGnCCzFW0Y/s1600/168x40.png' width='168'/></a>

4-2-d. 部署分享按鈕「CSS」

接著將以下 CSS 資料，放置在範本中「]]></b:skin>」的上方，即可完成以「圖片 JavaScript 連結」的方式部署 LINE 分享按鈕。


/* 刪除 Blogger 圖片陰影和邊框 */
.post-body img, .post-body .tr-caption-container, .ss, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

(* 上面的 CSS 資料，為刪除 Blogger 中所有圖片預設的邊框與陰影。)

如果要增加「LINE、Google+ 、 Facebook 及 Twitter」的分享按鈕，在「Blogger 行動版網頁」上，裝設的位置安排在文章頁腳作者區塊的下方。可參考：「Blogger 行動版安裝社群分享按鈕」。以下是安裝完成的範例圖片：

Blogger 行動範本安裝 LINE 分享按鈕

Blogger 行動版安裝社群分享按鈕

Blogger 電腦版行動版文章中安裝社群分享按鈕

 如何在 Twitter 分享按鈕加入使用者 ID 名稱連結

搜尋此網誌

技研可樂