分享功能|多內容好友分享 Flex 功能製作

關於分享給好友的訊息功能需要設定兩個地方:

👉 LINE Developers 後台

👉 GOSU BAR

另外 LINE Developers 需要先完成 LINE LOGIN API 與 GOSU BAR 的串接。


STEP 1 LINE LOGIN 設定

於 LINE LOGIN 的 LIFF 頁面按下 Add 新增


STEP 2 新增 LIFF app


STEP 3 拉流程

先拖拉出節點,如果找不到執行程式碼節點&回應請求節點,請勾選進階功能


點擊起始點|自訂事件的節點


事件類型選擇自訂事件(開放對外API),設定 API 路徑,並將檢查登入狀態打勾

*需注意 API 路徑須為英文,不可為中文


STEP 4 設定 LINE app Endpoint URL

依序複製機器人編號LIFF ID ,並依照下面範例修改

https://機器人編號.api.gosu.bar/liff?id=XXXXXXXX

例如:機器人編號為3333,LIFF ID 為 1657292654-aaaaaaaa

則修改為 https://3333.api.gosu.bar/liff?id=1657292654-aaaaaaaa


點擊剛剛新增的 LIFF app,編輯 LIFF detail


點擊 Endpoint URL 的 Edit

貼上剛剛複製好的 https://機器人編號.api.gosu.bar/liff?id=XXXXXXXX


STEP 5 設定決策點(下方)

將條件類型改為程式碼,並貼上以下內容

[使用的程式碼]

request.get.fromId=="X"

紅色部分先分別設定 12

後續在設定執行程式碼節點時會使用到,以便對應到不同的 Flex 內容


STEP 6 設定執行程式碼節點(上方)

[使用的程式碼]

tmp.liffId = "XXXXXXXX";

tmp.sharecode = `https://liff.line.me/${tmp.liffId}?redirectUrl=/customize/XXX%3FfromId=X`;

紅字請依照前面設定的 LINE LIFF IDAPI 路徑進行變更

例如:LIFF ID 為 1657292654-aaaaaaaa,API 路徑為 wurl

則修改為

tmp.liffId = "1657292654-aaaaaaaa";

tmp.sharecode = `https://liff.line.me/${tmp.liffId}?redirectUrl=/customize/wurl%3FfromId=1`;

* 補充說明 *

網址內的 wurl 是對應前面 STEP 3 自訂 API 路徑,需跟前面一樣

數字的部分是對應前面 STEP 5 會給哪一個版本的內容

在決策點1後面的執行程式碼節點設定完成後

決策點2後面的執行程式碼也要修改,tmp.sharecode 後面的數字部分須調整為 2


STEP 7 設定執行程式碼節點(下方)

[使用的程式碼]

tmp.liffId = "XXXXXXXX";

tmp.shareHref = `https://liff.line.me/${tmp.liffId}?redirectUrl=/customize/XXX%3FfromId=${request.get.fromId}`;

紅字請依照前面設定的 LINE LIFF IDAPI 路徑進行變更

例如:LIFF ID 為 1657292654-aaaaaaaa,API 路徑為 wurl

則修改為

tmp.liffId = "1657292654-aaaaaaaa";

tmp.shareHref = `https://liff.line.me/${tmp.liffId}?redirectUrl=/customize/wurl%3FfromId=${request.get.fromId}`;

* 補充說明 *

網址內的 wurl 是對應前面 STEP 3 自訂 API 路徑,需跟前面一樣


STEP 8 編輯 Flex 訊息

Flex 編輯完成後,需要調整分享給別人的按鈕網址

[使用的網址]

https://liff.line.me/XXXXXXXX?redirectUrl=%2Fcustomize%2FXXX%3FfromId%3DX

例如:https://liff.line.me/1657292654-aaaaaaaa?redirectUrl=%2Fcustomize%2Fwurl%3FfromId%3D1

紅色對應 LIFF ID

綠色對應 自訂 API 路徑

黃色對應 決策點的數字

需要自行依照設定變更後貼入網址部分


STEP 9 複製 JSON

點擊檢視 JSON


複製 JSON


STEP 10 編輯程式碼節點(下方)

點擊程式碼節點,並先將以下程式碼鍵入

[使用的程式碼]

tmp.data = [

(STEP 9 的複製內容)

]


貼入完成後需將分享好友的網址修改為 tmp.shareHref

[使用的程式碼]

tmp.shareHref


STEP 11 設定回應請求節點

將回應狀態選擇為 200 - 請求成功 OK,並貼上以下程式碼

[使用的程式碼]

<!DOCTYPE html>

<html lang="en">

<head> <meta charset=UTF-8> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=viewport content="width=device-width, initial-scale=1.0"> <title>分享訊息</title></head>

<body></body>

</html>

<script src=https://static.line-scdn.net/liff/edge/2/sdk.js></script>

<script> const url = new URL(location.href); const liffId = "${tmp.liffId}"; localStorage.setItem("GOSU_STORE:" + liffId + ":redirectUrl", url);

async function run() { window.liff = liff;

if (!liff.isInClient()) { location.href = "https://liff.line.me/" + liffId; setTimeout(() => { liff.closeWindow(); }, 100); }

if (!liff.isLoggedIn()) { await liff.login(); } if (liff.isApiAvailable('shareTargetPicker')) { await liff.shareTargetPicker(${JSON.stringify(tmp.data)}); liff.closeWindow() } else { console.log("不支援 shareTargetPicker"); } }

async function main() { await loadDebugTools(); await liff.init({ liffId }); const isLoggedIn = liff.isLoggedIn(); await run(); }

async function loadDebugTools() { if (url.searchParams.get('debug') != null) { const vConsoleScript = document.createElement('script'); vConsoleScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.4.1/vconsole.min.js'; await new Promise((resolve, reject) => { vConsoleScript.onload = resolve; vConsoleScript.onerror = reject; document.head.appendChild(vConsoleScript); }); const vConsole = new VConsole(); window.debug = true; } }

document.body.onload = function() { main().catch(error => console.error(error)); };</script>


STEP 12 群發訊息(如有需要將內容推播給使用者)

複製 STEP 9 編輯完成的 JSON 後

在群發訊息的編輯中點選與原本設定一樣的 Flex 版型,

點擊檢視 JSON 後將複製 STEP 9 編輯完成的 JSON 取代原有內容,就可以進行推播。


* 補充說明 *

上方流程的決策點為觸發哪一個 Flex,可以依據活動調整觸發關鍵字