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

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

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

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

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

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



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

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

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

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



LINE 分享按鈕樣式

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

「用 LINE 傳送」使用「圖片 JavaScript 連結」按鈕
分享給LINE好友 !

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



相關連結

設置方法|用 LINE 傳送:「https://media.line.me/howto/zh-hant/

LINE 按鈕圖片檔下載:「https://media.line.me/img/linebutton_zh-hant.zip



設置流程

  1. LINE 按鈕使用圖片 JavaScript 連結
  2. 官方 LINE 函式庫分享按鈕
  3. WordPress 安裝 LINE 分享按鈕
  4. 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 電腦版行動版文章中安裝社群分享按鈕」。以下是安裝完成的範例圖片:

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


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 行動版安裝社群分享按鈕」。以下是安裝完成的範例圖片:

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



相關文章

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

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

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

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


留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰