- Get link
- X
- Other Apps
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 & 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]) --> Check{Logic Check}
subgraph Current_Limitation [Current Limitation]
Check -- "tiktok.com/video/ID" --> Success[✅ Extract ID]
Check -- "vt.tiktok.com/..." --> Fail[❌ Error: No ID found]
end
subgraph Missing_Logic [The Missing Loader]
Fail -.-> Loader(HTTP Redirect Resolver)
Loader -.-> 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] -->|Paste into Browser| B[Redirecting...]
B --> C[Full Browser URL]
C -->|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>
Comments