Safelink - Dịch vụ rút gọn và ẩn liên kết

Enter Link here

Protected Link

Enter Link here

Shorten Link

To add Safelink or Shortlink form to a page, follow these steps:

1. In page editor view, click icon at the bottom left of the title.
2. Two options will appear: HTML view and Compose view.
3. Select 'HTML View'.
4. Copy and paste one of the following code.
   <div class="inF" data-message="A valid URL is required.">
     <input type='text' name='originalSafeLink' id='originalSafeLink' placeholder=' '/>
     <label for='originalSafeLink'>Enter Link here</label>
   </div>
   <div class="inF">
     <input type='text' name='saferLink' id='saferLink' readonly="" placeholder=' '/>
     <label for='saferLink'>Protected Link</label>
   </div>
   <button class="ciB" id="safeLinkButton">Protect Link</button>
   <button class="ciB hidden" id="safeLinkCopy">Copy</button>
   <button class="ciB hidden" id="safeLinkView">View</button>
   <button class="ciB hidden" id="safeLinkClear">Clear</button>
   <script defer>
     /*<![CDATA[*/
     var safeSettings={safeParameter:"#?url",successShortLinkNotif:"<i class='icon check'></i>Link Protected, Click on Copy",blankShortLinkNotif:"<i class='icon warn'></i>Enter link to protect!",invalidLinkNotif:"<i class='icon warn'></i>Please enter a valid URL!",copyNotification:"<i class='icon clipboard'></i>Copied to clipboard!"};const originalSafeLink=document.getElementById("originalSafeLink"),saferLink=document.getElementById("saferLink"),safeLinkButton=document.getElementById("safeLinkButton"),safeLinkCopy=document.getElementById("safeLinkCopy"),safeLinkView=document.getElementById("safeLinkView"),safeLinkClear=document.getElementById("safeLinkClear");async function generateShortLink(e){return`${getBaseUrl()}${safeSettings.safeParameter}=${btoa(e)}`}safeLinkButton.addEventListener("click",async()=>{let e=originalSafeLink.value.trim();if(!e){PU.tNtf(safeSettings.blankShortLinkNotif);return}if(!isValidURL(e)){PU.tNtf(safeSettings.invalidLinkNotif);return}try{safeLinkButton.disabled=!0,safeLinkButton.textContent="Processing...";let i=await generateShortLink(e);saferLink.value=i,safeLinkCopy.classList.remove("hidden"),safeLinkView.classList.remove("hidden"),safeLinkClear.classList.remove("hidden"),safeLinkView.onclick=function(){window.open(i,"_blank")},PU.tNtf(safeSettings.successShortLinkNotif)}catch(n){PU.tNtf(n.message)}finally{safeLinkButton.disabled=!1,safeLinkButton.textContent="Shorten Link"}}),safeLinkCopy.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(saferLink.value)}catch(e){let i=getSelection();i.removeAllRanges(),saferLink.select(),document.execCommand("copy"),i.removeAllRanges()}PU.tNtf(safeSettings.copyNotification)}),safeLinkClear.addEventListener("click",async()=>{originalSafeLink.value="",saferLink.value="",safeLinkCopy.classList.add("hidden"),safeLinkView.classList.add("hidden"),safeLinkClear.classList.add("hidden")});
     /*]]>*/
   </script>

   <div class="inF" data-message="A valid URL is required.">
     <input type='text' name='originalShortLink' id='originalShortLink' placeholder=' '/>
     <label for='originalShortLink'>Enter Link here</label>
   </div>
   <div class="inF">
     <input type='text' name='shortenLink' id='shortenLink' readonly="" placeholder=' '/>
     <label for='shortenLink'>Shorten Link</label>
   </div>
   <button class="ciB" id="shortLinkButton">Shorten Link</button>
   <button class="ciB hidden" id="shortLinkCopy">Copy</button>
   <button class="ciB hidden" id="shortLinkView">View</button>
   <button class="ciB hidden" id="shortLinkClear">Clear</button>
   <script defer>
     /*<![CDATA[*/
     const settings={shortLinkApiEndpoint:"/api/shorten",successShortLinkNotif:"<i class='icon check'></i>Link is shortened, Click on Copy",blankShortLinkNotif:"<i class='icon warn'></i>Enter link to short!",invalidLinkNotif:"<i class='icon warn'></i>Please enter a valid URL!",copyNotification:"<i class='icon clipboard'></i>Copied to clipboard!"},originalShortLink=document.getElementById("originalShortLink"),shortenLink=document.getElementById("shortenLink"),shortLinkButton=document.getElementById("shortLinkButton"),shortLinkCopy=document.getElementById("shortLinkCopy"),shortLinkView=document.getElementById("shortLinkView"),shortLinkClear=document.getElementById("shortLinkClear");function makeAbsoluteUrl(t){return`${getBaseUrl()}${t}`}async function shortenURL(t){try{let i=await fetch(makeAbsoluteUrl(settings.shortLinkApiEndpoint),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({url:t})});if(!i.ok){let n=await i.text();throw Error(n)}return(await i.json()).shortUrl}catch(e){throw e}}shortLinkButton.addEventListener("click",async()=>{let t=originalShortLink.value.trim();if(!t){PU.tNtf(settings.blankShortLinkNotif);return}if(!isValidURL(t)){PU.tNtf(settings.invalidLinkNotif);return}try{shortLinkButton.disabled=!0,shortLinkButton.textContent="Processing...";let i=await shortenURL(t);shortenLink.value=i,shortLinkCopy.classList.remove("hidden"),shortLinkView.classList.remove("hidden"),shortLinkClear.classList.remove("hidden"),shortLinkView.onclick=function(){window.open(i,"_blank")},PU.tNtf(settings.successShortLinkNotif)}catch(n){PU.tNtf(n.message)}finally{shortLinkButton.disabled=!1,shortLinkButton.textContent="Shorten Link"}}),shortLinkCopy.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(shortenLink.value)}catch(t){let i=getSelection();i.removeAllRanges(),shortenLink.select(),document.execCommand("copy"),i.removeAllRanges()}PU.tNtf(settings.copyNotification)}),shortLinkClear.addEventListener("click",async()=>{originalShortLink.value="",shortenLink.value="",shortLinkCopy.classList.add("hidden"),shortLinkView.classList.add("hidden"),shortLinkClear.classList.add("hidden")});
     /*]]>*/
   </script>

5. It is recommended to add a page description paragraph above the form.

---

Safelink là gì? Safelink hoạt động như thế nào trong Plus UI?

Safelink là công cụ chuyển đổi liên kết, thường được dùng để bảo vệ link gốc hoặc kiếm tiền từ quảng cáo. Khi người dùng nhấp vào link, họ sẽ được chuyển qua trang trung gian trước khi đến đích, giúp quản lý truy cập, tăng bảo mật và theo dõi lượt click. Trong bài viết dưới đây, tớ sẽ nói chi tiết cách hoạt động của Safelink trong Plus UI nhé.

• Hướng dẫn cách tạo Safelink trong Plus UI 3.0

Shortlink là gì? Và tớ đã tạo ra shortlink như thế nào?

Ban đầu, shortlink được tạo ra miễn phí dựa trên nền tảng Firebase Dynamic Links. Tuy nhiên, rất tiếc rằng dịch vụ này sẽ ngừng hoạt động vào tháng 5 năm 2025. Vì vậy nên tớ phải tìm cách khác thay thế. Và boom, chúng ta có bài viết sau :))

• Hướng dẫn cách tạo Dynamic Link với CloudFlare Worker
• Hướng dẫn cách tạo Short Link bằng CloudFlare Worker cho Plus UI 3.0