在 Weebly上製作 Line 分享按鈕

本文參考自 <Weebly in 3 Mins>

前言:本文假設你有一些基本的 HTML CSS and JavaScript 概念,以及如何在 Weebly 上進行程式更改的動作。你可以閱讀這篇 <如何在 Weebly 上修改程式>。

用 Facebook 和 Line 來分享是台灣目前的主流。相較 Facebook 提供了很多的分享套件,和許多網站提供的分享按鈕,Line 的分享按鈕反而相當少見。本文章將要教你如何善用 Line 官網所提供的按鈕,方便你的用戶直接將你的網頁分享到 Line 的群組,如下圖。

Weebly in 3 Min 的 Footer



首先,到 Line 的 social plugin 開發網頁。他有三個分享的按鈕給你選擇:"Line it", "Add friend", "Like"。你依照你的需求選擇相應的 social plugin。這邊將用 "Like" 來當作範例教你如何嵌入到你的 Weebly 網頁,如下圖 1 和 下圖 2。

圖 1
  1. 在 Set URL 上加入你想要用 Line 分享的網頁網址。

  2. 在 Select a share option 的兩個選項中選一個你想要的按鈕。這邊是選擇左邊的按鈕。

    圖 2

  3. 再往下滑,如圖 2,它會問你要不要加上 "Add friend"。如果沒有 Line 的官方粉絲帳號,就選擇左邊的 off。

  4. 經過這一系列的設定後,Line 就會幫你產生出 code。它通常長得像下面這一段 code。
<div class="line-it-button" data-lang="en" data-type="like"
 data-url="http://yourwebsite.com/" data-share="true"
 style="display: none;"></div>  /* HTML */
 <script src="https://d.line-scdn.net/r/web/social-plugin/js/
thirdparty/loader.min.js" async="async" defer="defer"></script>
   /* JavaScript */


5. 你可以將第一段的 HTML code 嵌入在你的 Weebly 網頁上任何一個地方,透過 embed code 這個套件。你也可以透過 Theme > Edit HTML 直接嵌入這段 HTML code 到原始碼中。

6. 將第二段的 JavaScript 嵌入在 Settings > SEO > Footer Code。這樣你的 Line sharing button 就大功告成了。



Line 是 Facebook 之外台灣人目前最喜歡用的聊天 app,尤其是中老年人特別喜歡用 Line 群組來分享一些圖文並茂的文章。如果你網頁針對是這樣年齡層的使用族群,那麼在你的網頁上加上 Line 分享功能就非常重要了。







comments powered by Disqus