[BETA VERSION] FRUSTASI buat Program Embed TikTok = Quoting aja ah!

on
Preview

CODE
<style>
.generator-box{
width:100%;
max-width:780px;
margin:auto;
font-family:Arial,sans-serif;
}

.generator-box textarea{
width:100%;
height:120px;
padding:10px;
margin:6px 0;
border:1px solid #999;
}

.generator-box button{
padding:10px 16px;
margin:6px 4px;
border:2px solid #000;
background:#000;
color:#fff;
cursor:pointer;
}

.generator-box button:hover{
background:#fff;
color:#000;
}

.output{
width:100%;
height:200px;
margin-top:10px;
}

.preview-box{
margin-top:15px;
padding:15px;
border:1px dashed #999;
}

.preview-username{
font-size:32px;
font-weight:bold;
margin-bottom:8px;
}

.tiktok-row{
display:flex;
align-items:center;
}

.thumb{
width:35%;
max-width:220px;
border:1px solid #ddd;
}

.space{
width:10%;
}

.title-area{
width:55%;
}

.title-text{
font-size:18px;
margin-bottom:8px;
}

.tiktok-button{
display:inline-block;
padding:12px 20px;
background:#000;
color:#fff !important;
text-decoration:none;
font-family:Arial,sans-serif;
font-size:16px;
border:2px solid #000;
border-radius:0;
transition:0.2s;
}

.tiktok-button:hover{
background:#fff;
color:#000 !important;
}
</style>

<div class="generator-box">

<textarea id="linksInput" placeholder="Paste TikTok links (one per line)"></textarea>

<button onclick="processLinks()">EXTRACT & GENERATE</button>
<button onclick="copyCode()">COPY ALL</button>
<button onclick="resetTool()">RESET</button>

<textarea id="resultCode" class="output"></textarea>

<div class="preview-box">
<b>Preview</b>
<div id="previewArea"></div>
</div>

</div>

<script>

async function resolveLink(link){
try{
let r=await fetch(link,{method:"HEAD",redirect:"follow"});
return r.url || link;
}catch{
return link;
}
}

async function processLinks(){

let lines=document.getElementById("linksInput").value.split("\n");

let resultHTML="";
let previewHTML="";

for(let link of lines){

link=link.trim();
if(!link) continue;

let finalLink=await resolveLink(link);

let title="TikTok Video";
let username="";
let thumb="";

try{

let res=await fetch("https://www.tiktok.com/oembed?url="+encodeURIComponent(finalLink));
let data=await res.json();

title=data.title || title;

if(data.author_unique_id){
username="@"+data.author_unique_id;
}else if(data.author_name){
username="@"+data.author_name.replace(/\s+/g,"");
}

thumb=data.thumbnail_url || "";

}catch{

let match=finalLink.match(/@([^\/]+)/);
if(match) username="@"+match[1];

}

let text=title;

if(username){
text+=" — "+username;
}

let blockHTML=`

<div style="margin-bottom:32px">

<div class="preview-username">${username}</div>

<div class="tiktok-row">

<img class="thumb" src="${thumb}">

<div class="space"></div>

<div class="title-area">

<div class="title-text">${text}</div>

<a class="tiktok-button" href="${link}" target="_blank">${text}</a>

</div>

</div>

</div>

`;

resultHTML+=blockHTML+"\n";
previewHTML+=blockHTML;

}

document.getElementById("resultCode").value=resultHTML;
document.getElementById("previewArea").innerHTML=previewHTML;

}

function copyCode(){
let textarea=document.getElementById("resultCode");
textarea.select();
document.execCommand("copy");
}

function resetTool(){
document.getElementById("linksInput").value="";
document.getElementById("resultCode").value="";
document.getElementById("previewArea").innerHTML="";
}

</script>

Comments

Post a Comment