#liff-metro-demo{font-family:system-ui,-apple-system,sans-serif;padding:28px 20px;max-width:460px;margin:0 auto;color:#15243a;background:#fff;text-align:center;box-sizing:border-box}
#liff-metro-demo p{font-size:18px;line-height:1.6;overflow-wrap:anywhere}
#liff-metro-demo button{font:600 20px/1.4 system-ui,sans-serif;padding:15px 24px;border:0;border-radius:10px;background:#38487a;color:#fff;min-height:52px}
#liff-metro-demo button:disabled{opacity:.6}
#liff-metro-demo [hidden]{display:none!important}
正在開啟好友選擇器…
(() => {
'use strict';
// ===== 只需修改這個區塊。網址請使用公開 HTTPS 網址。 =====
const CONFIG = {
LIFF_ID: '2012289516-PbYEzWcp',
ADD_FRIEND_URL: 'https://lin.ee/szrBP5l',
IMAGE_URL: 'https://taipeiyin.com/wp-content/uploads/2026/10/圖卡03_南環捷運.png',
TOPICS: {
metro: {
title: '南環捷運',
videoIntro: '2026.10.30 星期五\n\n文山區等太久!南環捷運終於動了?曾獻瑩一路追問經費、決標與開工,盯到工程動起來',
videoUrl: 'https://youtube.com/shorts/0hNpvl_s8yg?si=KRP20NORnzIRLTLW'
}
}
};
// ===== 設定區塊結束 =====
const root = document.getElementById('liff-metro-demo');
if (!root || root.dataset.started) return;
root.dataset.started = 'true';
const status = root.querySelector('[data-status]');
const button = root.querySelector('[data-share]');
let ready = false;
let sending = false;
let topic;
function httpsUrl(value, label) {
let parsed;
try { parsed = new URL(value); } catch (_) {
throw new Error('請在 CONFIG 填寫' + label + '。');
}
if (parsed.protocol !== 'https:') {
throw new Error(label + '必須是 HTTPS 網址。');
}
return parsed.href;
}
function selectTopic() {
// 在 liff.init 完成、網址已由 SDK 正規化後讀取主題。
const key = new URL(location.href).searchParams.get('topic') || 'metro';
if (!Object.prototype.hasOwnProperty.call(CONFIG.TOPICS, key)) {
throw new Error('找不到這個分享主題,請從原本的圖卡重新開啟。');
}
return { key, data: CONFIG.TOPICS[key] };
}
function messages() {
if (!CONFIG.IMAGE_URL.trim()) {
throw new Error('請先將南環捷運圖卡上傳至 WordPress 媒體庫,再把「檔案網址」填入程式的 CONFIG.IMAGE_URL。');
}
const imageUrl = httpsUrl(CONFIG.IMAGE_URL, '南環捷運圖卡的公開圖片網址');
const friendUrl = httpsUrl(CONFIG.ADD_FRIEND_URL, '官方帳號加入好友網址');
const videoUrl = httpsUrl(topic.videoUrl, '這個主題的影片網址');
return [
{
type: 'flex',
altText: topic.title + '|點圖開啟官方帳號',
contents: {
type: 'bubble', size: 'mega',
hero: {
type: 'image', url: imageUrl, size: 'full',
aspectRatio: '1:1', aspectMode: 'fit',
action: { type: 'uri', label: '開啟官方帳號', uri: friendUrl }
}
}
},
{ type: 'text', text: topic.videoIntro + '\n' + videoUrl }
];
}
function loadSdk() {
if (window.liff) return Promise.resolve();
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://static.line-scdn.net/liff/edge/2/sdk.js';
script.onload = resolve;
script.onerror = () => reject(new Error('分享元件載入失敗,請重新開啟。'));
document.head.appendChild(script);
});
}
async function share(automatic = false) {
if (!ready || sending) return;
if (!window.liff.isApiAvailable('shareTargetPicker')) {
status.textContent = '目前無法開啟好友選擇器。請確認已登入、LINE 已更新,並由 LINE 中的分享圖卡重新開啟。管理員請確認 shareTargetPicker 已啟用。';
button.hidden = false;
return;
}
sending = true;
button.disabled = true;
button.hidden = true;
status.textContent = '請選擇要分享的好友或群組。';
try {
const result = await window.liff.shareTargetPicker(messages(), { isMultiple: true });
if (result && result.status === 'success') {
ready = false;
status.textContent = '已送出圖卡與影片連結。';
if (window.liff.isInClient()) {
try { window.liff.closeWindow(); } catch (_) { /* 保留成功提示 */ }
}
} else {
status.textContent = '已取消分享;沒有再次傳送。';
button.hidden = false;
}
} catch (_) {
status.textContent = automatic
? '請點下方按鈕,開啟好友選擇器。'
: '未能完成分享,請點按鈕重試。';
button.hidden = false;
} finally {
sending = false;
button.disabled = false;
}
}
button.addEventListener('click', () => { void share(false); });
async function init() {
try {
if (!/^[0-9]+-[A-Za-z0-9]+$/.test(CONFIG.LIFF_ID)) {
throw new Error('請先在 CONFIG 填入正確的 LIFF_ID。');
}
await loadSdk();
await window.liff.init({ liffId: CONFIG.LIFF_ID });
const selected = selectTopic();
topic = selected.data;
messages(); // 登入及分享前,先確認本主題三個網址已填妥。
if (!window.liff.isLoggedIn()) {
const redirect = new URL(location.origin + location.pathname);
redirect.searchParams.set('topic', selected.key);
status.textContent = '正在開啟 LINE 登入/授權。';
window.liff.login({ redirectUri: redirect.href });
return;
}
ready = true;
if (window.liff.isInClient()) {
// 只自動嘗試一次;環境阻擋時保留手動按鈕,不保證零過渡畫面。
await share(true);
} else {
status.textContent = '請點按鈕,選擇要分享的好友。';
button.hidden = false;
}
} catch (error) {
status.textContent = error && error.message ? error.message : '分享初始化失敗,請重新開啟。';
button.hidden = true;
}
}
void init();
})();