為 LINE 官方帳號開設完 LINE Login後,這次要接續和大家分享 LINE Login 中一個重要的功能:LIFF App,我們會介紹新增一個 LIFF App 的方式,以及使用情境,在設定教學之前,好像有很多人還不知道什麼是 LIFF App,那麼就先簡單介紹一下 LIFF App 吧!
什麼是 LIFF App?
我們先來看看 LINE Developers 對於 LIFF App 的定義:LINE Front-end Framework (LIFF) is a platform for web apps provided by LINE. The web apps running on this platform are called LIFF apps.
直接翻譯成中文然後濃縮的意思就是:
LIFF App 為在平台上運作的 web apps,而這個平台叫做 LINE Front-end Framework (LIFF)。
再濃縮一次的話,可以把 LIFF App 想像成即時通訊軟體 LINE 的內建瀏覽器,當好友透過這個內建瀏覽器進行操作,LIFF App 可以幫助商家獲得用戶的 LINE 資訊,例如好友的 user ID(當然是在獲得好友允許搜集其資料的前提下)。
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/6142e75281f1ed6f4acfb4f2_liff-app-on-line.png)
如何開設 LIFF App?
了解完什麼是 LIFF App 之後,我們該如何新增一個 LIFF App 呢?你可以透過 LINE Developers 進行 LIFF App 開設。要特別注意不是透過 LINE 官方帳號管理後台開設哦!很多人常常分不清這兩個管理平台(這裡提供個簡單的二分法:所有的技術設定找 LINE Developers;與好友互動、經營官方帳號找 LINE 官方帳號管理後台)。
由於 LIFF App 是隸屬在 LINE Login 下面,所以我們必須要先擁有一個 LINE Login,還沒有 LINE Login 的話可以先閱讀以下教學文章:
那麼我們就來新增一個 LIFF App 吧!
步驟一:登入 LINE Login
- 首先,在 LINE Developers 頁面畫面右上角點選「Log in」,利用「LINE Business ID」登入 LINE Developers 後台。
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/6142f7eaccf40d3e28731ed0_login-line-developers.png)
- 進入 LINE Developers 後,在對應的 Provider 中找到並點選想要新增 LIFF App 的 LINE Login Channel
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/614c22289b8f30ecc7475497_03_choose-line-login.png)
- 進入對應的 LINE Login Channel 後,在上排找到「LIFF 分頁」並點選。
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/614c22413eff5d3a2d4a9c5d_04_click-liff-app-page.png)
- 進入 LIFF 分頁後,接續下滑頁面,點選 「Add」開始新增一個 LIFF App。
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/614c226a4c75d43f11b14ead_05_liff-app-page.png)
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/614c227bcae0d53d8107812a_06_add-a-liff-app.png)
步驟二:輸入資訊
- 新增一個 LIFF App 需要輸入一些基本資訊(Basic information),依照畫面指示依序填入:
- LIFF app name:僅會顯示在 LINE Developers 後台,LINE 好友點選 LIFF App 時並不會看到,填入品牌名稱。
- Size:LIFF App 在 LINE 被打開時版面呈現的大小,勾選「Fall」讓 LIFF App 全螢幕完整顯示(Tall 為 70% 顯示,Compact 為 50% 顯示)。
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/614c2356d48f452822b5c2bc_07_basic-information-1.png)
- 接續填寫基本資訊(Basic information):
- Endpoint URL:好友打開 LIFF App 時會前往的網址,填入品牌的官方網站,或是任何你想要設定的網址。
- Scopes:希望在 LIFF App 內搜集的資訊,將「profile」和「openid」都勾選起來。
- Bot link feature:當好友打開 LIFF App 時是否要將好友資料綁定到 LINE 官方帳號,勾選「On(Normal)」。
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/614c237743e8af03a97904ae_08_basic-information-2.png)
- 接續填寫 Options:
- Scan QR:不勾選。
- Module Mode:勾選開啟(只會在 Size 選項選擇「Tall」,或是「Compact」時出現)。
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/614c2394d8983777f4d452c2_09_basic-information-3.png)
- 填寫完成後,點選「Add」我們就可以得到第一個 LIFF App 了!
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/614c23b30c13f67322da76a4_10_finish-settings.png)
- 將 LIFF URL 複製起來貼到 LINE 訊息框裡面,接著拿起手機點開連結看看 LIFF APP 的設定成果吧!
![](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/614c23c59a9535482e67ff69_11_created-liff-app.png)
關於 LIFF App 的一些常見問題
我們整理了第一次開設完 LIFF App 可能會遇到的幾個常見問題:
問題一:完成 LIFF App 設定後,真的有在瀏覽器內成功搜集用戶資訊嗎?
這個部分與 LINE Login 一樣,會需要工程師協助進行網頁設計的更動,才有辦法將藉由 LIFF App 蒐集到的資訊整理到自家的伺服器哦!我們之後會有一篇詳細的教學文章,提供給工程師們參考,請持續鎖定「OakMega LINE 經營大補帖」!
問題二:為什麼其他 LINE 官方帳號 LIFF App 可以搜集 Email?
那是因為他們有針對 LINE Login 進行額外設定,所以在 LIFF App 的 Scopes 選項可以勾選 email,讓好友的電子郵件資料一併被搜集。
問題三:還是不太懂 Bot link feature 的功用?
針對 Bot link feature,我們之後會有一篇詳細的介紹文章,請持續鎖定「OakMega LINE 經營大補帖」!
想知道更多關於 LINE 經營的方法嗎?要怎麼讓 LIFF App 出現的版型縮小呢?快前往 OakMega LINE 官方帳號了解更多 LINE 經營內容,或是關注我們的「OakMega LINE 經營大補帖」,提供從零到ㄧ、完整建置品牌 LINE 官方帳號的教學。
![立即加入 OakMega LINE 官方帳號,了解更多 LINE 經營內容!](https://cdn.prod.website-files.com/605852e084fb2346c3ea1559/6156ad000f488fa16c43b421_call-to-action-oakmega-line-oa.png)
H1 H1 H1 大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題
H2 H2 H2 大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題
H3 H3 H3 大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題大標題
改掉的字喔!
![](https://cdn.prod.website-files.com/603dd8d0abad32707fafbb84/609cf7aa507960290b4e5d48_1_FIzRTS5G9GGHPv3BcaQLvA.png)
quote 引言的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份的部份
- 點點點點
- 第二個 item
- 23r2r
- 點點點
- 二案二二兒