嘿!加我好友八:)


Posted by yuicheng1006 on 2021-04-03

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

分享後會帶這樣的文字

呈現如下


#LINEBot







Related Posts

從 Flux 與 MVC 的差異來簡介 Flux

從 Flux 與 MVC 的差異來簡介 Flux

[PHP] 上傳大頭照的功能

[PHP] 上傳大頭照的功能

CSS-製作圓角邊框表格

CSS-製作圓角邊框表格


Comments