TiktokEmbedCodeApp: Client Side/Blogger

Client Side/Blogger

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<script>mermaid.initialize({startOnLoad:true, theme: 'neutral'});</script>

<div style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); font-family: sans-serif; line-height: 1.6; padding: 20px;">

  

  <h3 style="color: #d93025; margin-top: 0px;">⚠️ DISCLAIMER: INPUT URL LIMITATION</h3>

  

  <p>This program is currently restricted to processing <b>Full Browser URLs</b> only. It does not support TikTok’s mobile "short-link" format (e.g., <code>vt.tiktok.com</code>).</p>

  <p><strong>Required Action:</strong><br />

  Users must open the video in a web browser and copy the expanded URL from the address bar before pasting it into this program.</p>

  <hr style="border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 0px; border-top: 1px solid rgb(238, 238, 238); border: 0px;" />

  <h4>URL Conversion Example</h4>

  <ul style="list-style: none; padding-left: 0px;">

    <li>❌ <b>UNSUPPORTED:</b> <code>https://vt.tiktok.com/ZSaXoFyov/</code></li>

    <li>✅ <b>REQUIRED:</b> <code>https://www.tiktok.com/@user/video/7595073062102486288</code></li>

  </ul>

  <hr style="border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 0px; border-top: 1px solid rgb(238, 238, 238); border: 0px;" />

  <h4>Technical Logic &amp; The "Loader" Gap</h4>

  <p>The program fails because it cannot "look inside" a short link to find the Video ID. It requires a <b>Redirect Resolver</b> (Loader) to fetch the final destination.</p>

  <div class="mermaid" style="background: rgb(249, 249, 249); border-radius: 5px; padding: 10px;">

    graph TD

        User([User Input URL]) --&gt; Check{Logic Check}

        

        subgraph Current_Limitation [Current Limitation]

        Check -- "tiktok.com/video/ID" --&gt; Success[✅ Extract ID]

        Check -- "vt.tiktok.com/..." --&gt; Fail[❌ Error: No ID found]

        end

        subgraph Missing_Logic [The Missing Loader]

        Fail -.-&gt; Loader(HTTP Redirect Resolver)

        Loader -.-&gt; Success

        end

        style Fail fill:#ffcccc,stroke:#d93025

        style Loader stroke-dasharray: 5 5, fill:#e1f5fe

  </div>

</div>

<hr />

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<script>mermaid.initialize({startOnLoad:true, theme: 'neutral'});</script>

<div style="border-radius: 8px; border: 1px solid rgb(221, 221, 221); font-family: sans-serif; line-height: 1.6; margin: auto; max-width: 800px; padding: 20px;">

  

  <h3 style="color: #d93025; margin-top: 0px;">⚠️ MANUAL CONVERSION REQUIRED</h3>

  

  <p>Because this program cannot process TikTok mobile "short-links" (<code>vt.tiktok.com</code>) directly. You must manually expand the link before inputting it.</p>

  <div style="background-color: #f0f7ff; border-left: 5px solid rgb(0, 123, 255); margin: 20px 0px; padding: 15px;">

    <strong>Step-by-Step Instructions:</strong>

    <ol style="margin-top: 10px;">

      <li><b>Copy</b> the link from your TikTok app (Example: <code>https://vt.tiktok.com/ZSaXoFyov/</code>).</li>

      <li><b>Paste</b> that link into your web browser's address bar.</li>

      <li><b>Press Enter</b> and wait for the video page to load.</li>

      <li><b>Copy the new, long URL</b> from the address bar (It should now contain <code>/video/</code> followed by a long ID).</li>

      <li><b>Paste</b> this long URL into the program.</li>

    </ol>

  </div>

  <hr style="border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 0px; border-top: 1px solid rgb(238, 238, 238); border: 0;" />

  <div class="mermaid" style="background: rgb(249, 249, 249); border-radius: 5px; padding: 10px;">

    graph LR

        A[Mobile Short Link] --&gt;|Paste into Browser| B[Redirecting...]

        B --&gt; C[Full Browser URL]

        C --&gt;|Paste into Program| D{SUCCESS ✅}

        style A fill:#f9f9f9,stroke:#333

        style C fill:#e1f5fe,stroke:#01579b

        style D fill:#d4edda,stroke:#28a745

  </div>

</div>

<hr />

<!--==================================

  TIKTOK → BLOGGER EMBED CONVERTER

  SINGLE PAGE · BLOGGER SAFE

==================================-->

<h1 style="margin: 16px 0px; text-align: center;"><span style="color: #2b00fe;">

  TikTok </span><span style="color: #ffa400;">(Blogger Embed) </span><span style="color: #2b00fe;">Converter

</span></h1>

<p style="color: #555555; font-size: 14px; text-align: center;">

  Blogger-safe TikTok embed generator with live preview</p>

<hr />

<!--INPUT-->

<input id="tiktokUrl" style="box-sizing: border-box; font-size: 14px; padding: 10px; width: 100%;" type="text" />

<button onclick="convertTikTok()" style="font-size: 14px; margin-top: 10px; padding: 10px; width: 100%;">

  Convert TikTok URL

</button>

<!--STATUS-->

<div id="notice" style="border-radius: 6px; display: none; font-size: 14px; margin-top: 14px; padding: 14px;"></div>

<hr />

<!--OUTPUT-->

<h3>Generated Embed Code (Paste into Blogger)</h3>

<textarea id="output" readonly="" style="box-sizing: border-box; font-size: 12px; height: 300px; width: 100%;"></textarea>

<button onclick="copyCode()" style="margin-top: 8px; padding: 8px; width: 100%;">

  Copy Embed Code

</button>

<hr />

<!--PREVIEW-->

<h3 style="text-align: center;">Live Preview</h3>

<div id="preview" style="border-radius: 10px; border: 2px dashed rgb(187, 187, 187); box-sizing: border-box; min-height: 140px; padding: 16px; width: 100%;"></div>

<p style="color: #999999; font-size: 12px; margin-top: 8px; text-align: center;">

  Preview uses TikTok JS embed. Final result works after publish.

</p>

<!--SCRIPT-->

<script>

const API_ENDPOINT =

  "https://falling-cherry-d9af.amanurung1985.workers.dev/";

function setNotice(type, msg) {

  const n = document.getElementById("notice");

  n.style.display = "block";

  const map = {

    success: ["#e8f5e9", "#4caf50", "🟢 SUCCESS"],

    warning: ["#fff8e1", "#ff9800", "🟡 WARNING"],

    error: ["#fdecea", "#f44336", "🔴 ERROR"]

  };

  n.style.background = map[type][0];

  n.style.borderLeft = "6px solid " + map[type][1];

  n.innerHTML = "<b>" + map[type][2] + "</b><br>" + msg;

}

function clearPreview(node) {

  while (node.firstChild) {

    node.removeChild(node.firstChild);

  }

}

async function convertTikTok() {

  const url = document.getElementById("tiktokUrl").value.trim();

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

  const preview = document.getElementById("preview");

  output.value = "";

  clearPreview(preview);

  if (!url) {

    setNotice("error", "Please paste a TikTok URL.");

    return;

  }

  setNotice("warning", "Processing TikTok URL…");

  try {

    const res = await fetch(API_ENDPOINT, {

      method: "POST",

      headers: { "Content-Type": "application/json" },

      body: JSON.stringify({ url })

    });

    const data = await res.json();

    if (data.status !== "success") {

      setNotice("error", data.message || "Conversion failed.");

      return;

    }

    // OUTPUT CODE FOR BLOGGER

    output.value = data.embedCode;

    setNotice(

      "success",

      "TikTok link converted successfully.<br>" +

      "User: <b>@" + data.username + "</b><br>" +

      "Video ID: <b>" + data.videoId + "</b>"

    );

    // ===== PURE DOM LIVE PREVIEW =====

    const blockquote = document.createElement("blockquote");

    blockquote.className = "tiktok-embed";

    blockquote.setAttribute(

      "cite",

      "https://www.tiktok.com/@" + data.username + "/video/" + data.videoId

    );

    blockquote.setAttribute("data-video-id", data.videoId);

    blockquote.style.width = "100%";

    blockquote.appendChild(document.createElement("section"));

    preview.appendChild(blockquote);

    // Reload TikTok embed script safely

    const old = document.getElementById("tiktok-embed-script");

    if (old) old.remove();

    const script = document.createElement("script");

    script.id = "tiktok-embed-script";

    script.src = "https://www.tiktok.com/embed.js";

    script.async = true;

    document.body.appendChild(script);

  } catch (err) {

    setNotice("error", "Failed to reach server.");

  }

}

function copyCode() {

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

  o.select();

  document.execCommand("copy");

  alert("Embed code copied!");

}

</script>