# TikTok Share Card

> Biến link TikTok affiliate thành card sản phẩm có ảnh lớn, giá VND, nút chốt đơn và mã QR — tải PNG nét căng hoặc share thẳng vào Zalo.

Bạn dán một link TikTok (dài hoặc rút gọn vt.tiktok.com), engine gọi oEmbed lấy tên sản phẩm, ảnh và @handle, bạn bổ sung giá và chọn một trong ba finish — card 420×620 dựng live ngay trên trang, tải PNG 3× hoặc share thẳng vào Zalo bằng Web Share API.

## Vấn đề giải quyết

Anh em KOC chia sẻ link TikTok affiliate vào group Zalo/Facebook toàn bằng link trần: không ảnh, không giá, người xem không scan QR nổi trên màn hình điện thoại — một cú dán của card là đủ cả.

## Cách tính

- Parser giá (src/lib/format.ts parsePriceInput): bỏ hết ký tự không phải số, đuôi 'k' nở thành '000' — '199k' → 199000; cap 12 chữ số (capPriceDigits) để giá không bao giờ tràn khung card.
- Định dạng VND: Intl.NumberFormat('vi-VN', maximumFractionDigits 0) + 'đ' — 199000 → '199.000đ'.
- Tem giảm giá (discountPercent): chỉ hiện khi giá gốc > giá bán, round(((gốc − bán) / gốc) × 100) — 129.000đ trên 259.000đ → tem '-50%'.
- Prefill link (Worker API riêng, endpoint /metadata): gọi TikTok oEmbed timeout 6.5s, cắt đuôi '| TikTok' khỏi title (tối đa 90 ký tự), trả {ok:false, reason} thay vì 500 khi chặn/thất bại — client mở form điền tay giữ nguyên link đã dán, không bao giờ dead-end.
- Ảnh card phải same-origin: ảnh ngoài đi qua Worker API endpoint /image (chặn SSRF — https-only, chặn localhost/127.*/10.*/192.168.*/169.254.*/dải 172.16–31, redirect thủ công re-validate từng hop) để canvas export không bị taint.
- Xuất PNG: khung DOM 420×620 chụp bằng share-card-kit renderCardPng ở pixelRatio 3, 2 pass để nhúng font, animation đóng băng ở pose nghỉ — file ra đúng kích thước với tên slug từ tên sản phẩm.

## Ví dụ

- **Set son lì lụa Hàn (mẫu demo có sẵn)**: Giá 129000 · giá gốc 259000 · CTA 'Chốt đơn' · finish Son đỏ → Card hiện '129.000đ' cạnh giá gốc gạch '259.000đ' và tem xoay '-50%'; QR encode link affiliate; tải PNG 1260×1860 đặt tên theo slug sản phẩm.
- **Nhập giá kiểu KOC**: Ô giá bán gõ '199k' → Parser nở '199k' → 199000, card hiển thị '199.000đ' — không phải '199k' hay '199.000k'.
- **Dán link rút gọn**: https://vt.tiktok.com/ZS6carddemo/ → Server gọi oEmbed: prefill tên sản phẩm (đã cắt đuôi '| TikTok'), ảnh thumbnail và @handle; link bị chặn/timeout thì mở form điền tay giữ nguyên link — luôn ra được card.

## Nguồn tham khảo

- [TikTok Affiliate — cổng tiếp thị liên kết chính thức](https://affiliate.tiktok.com)

## Tool liên quan

- [Hoa Hồng TikTok Thực Nhận](https://xongngay.vn/hoa-hong-tiktok-thuc-nhan)
- [Hoà Vốn Affiliate](https://xongngay.vn/tiktok-break-even-calculator)
- [Chấm Deal Affiliate](https://xongngay.vn/affiliate-offer-calculator)

Source: https://xongngay.vn/tiktok-share-card