ChatGPT: TikTok URL (itself!) Converter App BLUEPRINT [App not yet done] v2

TikTok URL Converter: Glitch + Blogger Full Guide

1️⃣ Overview / Architecture

Goal: Convert short TikTok URLs (vt.tiktok.com/...) to canonical full TikTok URLs (www.tiktok.com/@user/video/...) for Blogger.

Components:

1. Server: Glitch + Node.js + Puppeteer → Handles TikTok URL resolution
2. Client: Blogger widget → Sends user URL to server API and displays the result

Flow Diagram (Mermaid.js)

flowchart TD A[User visits Blogger page] --> B[User pastes TikTok URL] B --> C[Client-side JS sends URL to Glitch API] C --> D[Glitch server receives URL] D --> E[Puppeteer opens TikTok short URL] E --> F[Browser executes TikTok JS / redirects] F --> G[Server returns canonical TikTok URL as JSON] G --> H[Client JS displays clickable final URL] H --> I[User can copy or click the URL]

2️⃣ Server-Side: Glitch Setup

Step 1: Sign Up / Create Node App

1. Go to https://glitch.com → Sign Up
2. Click New Project → Create Node App
3. Name your project, e.g., tiktok-resolver

Step 2: Add Dependencies

Open package.json and add:

"dependencies": {

  "express": "^4.18.2",

  "puppeteer": "^24.1.1"

}

Then open Tools → Terminal and run:

npm install

Step 3: Server Code (server.js)

const express = require("express");

const puppeteer = require("puppeteer");

const app = express();

app.use(express.json());

app.get("/resolve", async (req, res) => {

  const shortUrl = req.query.url;

  if (!shortUrl) return res.status(400).json({ error: "Missing URL" });

  try {

    const browser = await puppeteer.launch({ headless:true, args:["--no-sandbox"] });

    const page = await browser.newPage();

    await page.setUserAgent(

      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 " +

      "(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"

    );

    await page.goto(shortUrl, { waitUntil: "networkidle2" });

    const finalUrl = page.url();

    await browser.close();

    res.json({ finalUrl });

  } catch (err) {

    res.status(500).json({ error: err.message });

  }

});

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Step 4: Run and Test

1. Click Show → In New Window → get your public URL (e.g., https://tiktok-resolver.glitch.me)
2. Test in browser:
   https://tiktok-resolver.glitch.me/resolve?url=https://vt.tiktok.com/ZSabcXYZ/
3. Expected response:

   {
   
     "finalUrl": "https://www.tiktok.com/@user/video/1234567890"
   
   }

3️⃣ Client-Side: Blogger Widget

Paste this HTML + JS code into a Blogger HTML/JavaScript gadget:

<div style="max-width:500px; margin:20px auto; padding:20px; border:1px solid #ccc; border-radius:12px; background:#f9f9f9;">

  <h2 style="text-align:center; color:#ff0050;">TikTok URL Converter</h2>

  <label>Enter TikTok URL:</label>

  <input type="text" id="shortUrl" placeholder="https://vt.tiktok.com/... or https://www.tiktok.com/@user/video/...">

  <button onclick="resolveTikTok()">Convert URL</button>

  <div id="outputContainer">

    <a id="result" href="#" target="_blank"></a>

    <button onclick="copyURL()">Copy</button>

  </div>

</div>

<script>

const API_ENDPOINT = "https://tiktok-resolver.glitch.me/resolve";

async function resolveTikTok() {

  const shortUrl = document.getElementById("shortUrl").value.trim();

  if (!shortUrl) return alert("Please enter a TikTok URL!");

  const output = document.getElementById("outputContainer");

  output.style.display = "none";

  try {

    const response = await fetch(`${API_ENDPOINT}?url=${encodeURIComponent(shortUrl)}`);

    const data = await response.json();

    if (data.finalUrl) {

      const cleanUrl = data.finalUrl.split("?")[0];

      const link = document.getElementById("result");

      link.href = cleanUrl;

      link.textContent = cleanUrl;

      output.style.display = "block";

    } else if (data.error) alert("Error: "+data.error);

    else alert("Failed to resolve URL.");

  } catch(err) { alert("Error: "+err.message); }

}

function copyURL() {

  const link = document.getElementById("result").textContent;

  navigator.clipboard.writeText(link).then(()=>alert("Copied to clipboard!"));

}

</script>

4️⃣ How It Works (Flow Summary)

1. User pastes TikTok URL in Blogger widget
2. Client JS sends URL to Glitch server /resolve endpoint
3. Puppeteer opens the short URL → browser executes TikTok JS → resolves redirect
4. Server returns canonical full TikTok URL
5. Client JS displays clickable URL and copy button

5️⃣ Notes / Tips

• Free Glitch apps sleep after 5 minutes of inactivity → first request may take 5–10 sec
• Puppeteer requires --no-sandbox on Glitch → already included in code
• Works for both short and full TikTok URLs
• You can style the widget further to match Blogger theme

✅ Result

You now have a fully working TikTok URL converter:

• Server runs on Glitch with Puppeteer
• Client runs in Blogger widget
• Users can paste any TikTok URL and get a clickable canonical URL

TikTok URL Converter Demo