最近正在學習 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>

我是這樣放，結果如下

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

分享貼文的部分我就是照著官方文件走～ 因為使用自己的 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>

分享後會帶這樣的文字

呈現如下