嘿！加我好友八：）

最近正在學習 Line Bot
也正在修改以前做的專題
想說把以前開發不完全的地方重新調整
也想加入一些新元素
例如分享連結、用賴登入等等

今天剛好想放上加入好友的功能
Line 的官方文件都寫好寫滿ㄌ還滿完整的 - 分享到LINE或加入好友
一顆按鍵，一指瞬間
然，因為我有另外放 icon
所以文件的部分內容不適合我使用
所以我就找到這篇文章
LINE Developers
因為我想讓手機點擊 line icon 時，可以直接導向 Line 的加入好友畫面
所以我們只要加上這句即可

https://line.me/R/ti/p/{LINE_id}

但首先，要先去查看 Line ID
在帳號一覽，點擊你要放置的帳號

Line ID 就在上方紅框裡

最後，在 code 上加上 https://line.me/R/ti/p/@zxs7414e

  <a href="https://line.me/R/ti/p/@zxs7414e">
      <i class="fab fa-line"></i>
  </a>

我是這樣放，結果如下

484 很簡單～ya!
但這只有 for 手機，電腦版使用的話會顯示 qrcode :(

分享貼文的部分我就是照著官方文件走～
因為使用自己的 icon ＋ 動態路由
所以我是使用官方給的網址去做
不過網址需以 encodeURIComponent() 去編譯 URL
不然無法讓 LINE 成功的運行～
這邊有文件可以查看 - HTML URL編碼參考

https://social-plugins.line.me/lineit/share?url={encodeURIComponent(URL)}

實際運用如下

<a :href="`https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fyuicheng1006.github.io%2Ftake-or-leave%2F%23${itemId}`">
    <img src="../../assets/img/line.png" alt="share-line-icon">
</a>

這個是電腦版也能使用的方法～
電腦版本會長這樣

手機版本

但以上呈現，只能以 URL 帶自身 meta 定義的方式
我有找到可以搭配賴推出的 flex message 呈現漂亮的 ui 方法
嘗試成功後再與大家分享 ：）

更新：
我後來在分享網址的 url 後面加上 &text="你要的文字說明"
實際寫法：

<a :href="`https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fyuicheng1006.github.io%2Ftake-or-leave%2F%23${itemId}&text=嘿！我找到一個好東西，想跟你分享 ：）`">
    <img src="../../assets/img/line.png"
         alt="share-line-icon">
</a>

分享後會帶這樣的文字

呈現如下