#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(); })();
返回頂端