Home
Documentation

Safelink and Shortlink - v3.2+

Deø Kumar

Shortlink & Safelink Generator tools are designed to help you easily create shortened URLs and secure them with safelink redirection. These features were introduced in Plus UI v3.2+.

Looking for Demo? You can view the live demo of both generators here: Safelink Generator | Shortlink Generator | Safelink + Shortlink Generator

Shortlink Generator

The Shortlink Generator uses Firebase Dynamic Links to create short, shareable links. These links can redirect users to your desired URLs while allowing tracking, branding, and optional analytics.

To enable this feature, you must configure your Firebase API credentials first.

  1. Open your Firebase Console and navigate to Dynamic Links.
  2. Create a new domain, for example: https://example.page.link.
  3. Copy your API Key from Project Settings → General → Web API Key.
  4. Replace the placeholder values in the script: 
    const SHORTLINK_DOMAIN = "https://YOUR_DOMAIN.page.link";
const SHORTLINK_KEY = "YOUR_FIREBASE_API_KEY";

How to Get Firebase Web API Key

  1. Go to Firebase Console.
  2. Select an existing project or create a new one.
  3. Navigate to Project Settings → General to find your Web API Key.

If the key isn’t visible, go to Authentication and enable any Auth provider. This will generate the key automatically.

How to Create a page.link Domain for Dynamic Links

  1. In Firebase Console, open Engage → Dynamic Links.
  2. Click Get Started and enter your desired domain (e.g., fineshop.page.link).

    Your domain must end with page.link and can contain only alphabets and numbers.

  3. Once completed, you’ll see a success notification. Note down your page.link domain for use in your script.

Adding the Script to Blogger

After setting up your Firebase credentials, paste the following JavaScript code into your Blogger page’s HTML view: 

<!-- [Begin: Shortlink Generator area] -->

<style>
.inF.cB button,.sgOw{align-items:center;background:var(--contentB)}.inF.cB button,.sgOw button{display:flex;cursor:pointer}.inF.cB button{--svgW:16px;--svgH:16px;position:absolute;inset-block-start:10px;inset-inline-end:10px;width:30px;height:30px;justify-content:center;border-radius:8px;border:1px solid var(--contentLa);opacity:.5}.inF.cB input{padding-inline-end:50px}.inF.cB input:not(:placeholder-shown)~button{opacity:1}.sgMw{max-width:600px;margin:40px auto}.sgOw{display:flex;gap:12px 8px;flex-wrap:wrap;border:1px solid var(--contentL);border-radius:5px;padding:12px}.sgOw span{width:100%;line-height:1.4em;font-size:14px}.sgOw button{--svgW:20px;--svgH:20px;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--linkB);color:#fffdfc;border-radius:8px}.sgOs{flex:1 1 35%;width:100%;max-width:120px;margin:12px 0;padding:16px}
</style>

<script>
// Firebase shortlink config
  const SHORTLINK_DOMAIN = "https://XXXXXX.page.link"; // Replace
  const SHORTLINK_KEY = "XXXXXXXX-NNN-7VVVVV-UUUUUUU-P"; // Replace
  
/*! Plus UI Javascript (shortlink/generator.js) | Authors: Deo Kumar, Armaan Kumar | Refactored 2025 */
 
"use strict";((t,e,n)=>{let{cEl:_,iAE:i,aEL:s,qSel:r,gId:o,eHTML:a,tNtf:l}=n,c=_("div",{className:"sgMw",innerHTML:`<div class="inF cB" style="position:relative"><input type="text" name="link" id="sg_f_link" placeholder=" " autocomplete="off"><label for="sg_f_link">Destination URL</label><button type="button" id="sg_f_clear_link" title="Clear"><svg class="line" viewBox="0 0 24 24" width="14" height="14"><path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999"></path></svg></button></div><div class="sgOw"><span class="sgOl">Enter a URL to shorten</span><button type="button" class="sgOs" id="sg_f_shorten">Shorten</button><button type="button" class="sgOv" title="Open Link"><svg class="line" viewBox="0 0 24 24" width="16" height="16"><path d="M15.58 12C15.58 13.98 13.98 15.58 12 15.58C10.02 15.58 8.42004 13.98 8.42004 12C8.42004 10.02 10.02 8.42004 12 8.42004C13.98 8.42004 15.58 10.02 15.58 12Z"></path><path d="M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.46997 3.71997 5.17997 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.17997 18.19 8.46997 20.27 12 20.27Z"></path></svg></button><button type="button" class="sgOc" title="Copy Link"><svg class="line" viewBox="0 0 24 24" width="16" height="16"><path d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z"></path><path d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z"></path></svg></button></div>`});e.currentScript.before(c);let $=o("sg_f_link"),d=o("sg_f_clear_link"),h=c.querySelector(".sgOl"),p=c.querySelector(".sgOv"),g=c.querySelector(".sgOc"),k=o("sg_f_shorten"),u=t=>(t=(t||"").trim(),/^https?:\/\//i.test(t)?t:t?`https://${t}`:null),v=t=>{h.textContent=t||"Enter a URL to shorten"};d.addEventListener("click",()=>{$.value="",v()});let y=async()=>{let t=u($.value);if(!t)return l("Please enter a valid URL!");v("Shortening...");let e=`https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=${encodeURIComponent(SHORTLINK_KEY)}`,n={dynamicLinkInfo:{domainUriPrefix:SHORTLINK_DOMAIN,link:t},suffix:{option:"SHORT"}};try{let _=await fetch(e,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)});if(!_.ok){let i=await _.text();return console.error("Shortlink API response:",_.status,i),l("API error occurred!")}let s=await _.json();s&&s.shortLink?v(s.shortLink):(console.error("Unexpected API response:",s),l("Failed to generate short link!"))}catch(r){console.error(r),l("Network or CORS error!")}};$.addEventListener("keydown",t=>"Enter"===t.key&&y()),k.addEventListener("click",y),p.addEventListener("click",()=>{let e=h.textContent;!e||e.startsWith("Enter")||e.startsWith("Shortening")||e.startsWith("Error")?l("No valid link to open!"):t.open(e,"_blank")}),g.addEventListener("click",async()=>{let t=h.textContent;if(!t||t.startsWith("Enter")||t.startsWith("Shortening")||t.startsWith("Error"))l("No link to copy!");else try{await navigator.clipboard.writeText(t),l("Link copied to clipboard!")}catch(e){console.error(e),l("Copy failed — select and copy manually.")}}),$.addEventListener("input",()=>{v("Enter a URL to shorten")}),v()})(window,document,PU);
</script>
<!-- [End: Shortlink Generator area] -->

Safelink + Shortlink Generator

This combined generator provides both link-shortening and safelink encryption. It encodes outgoing links for extra security and monetization flexibility while also providing Firebase-based shortlinks.

  1. Ensure Safelink Plugin is enabled from Theme Designer.
  2. Configure at least one safelink page in your Theme HTML editor (see Safelink Setup Guide).
  3. Replace Firebase credentials in the script below.
  4. Paste the code inside a new Blogger page (HTML view).
<!--[ Begin: Safelink + Shortlink Generator area ]-->
<style>.inF.cB button,.sgOw{align-items:center;background:var(--contentB)}.inF.cB button,.sgOw button{display:flex;cursor:pointer}.inF.cB button{--svgW:16px;--svgH:16px;position:absolute;inset-block-start:10px;inset-inline-end:10px;width:30px;height:30px;justify-content:center;border-radius:8px;border:1px solid var(--contentLa);opacity:.5}.inF.cB input{padding-inline-end:50px}.inF.cB input:not(:placeholder-shown)~button{opacity:1}.sgMw{max-width:600px;margin:40px auto}.sgOw{display:flex;gap:12px 8px;flex-wrap:wrap;border:1px solid var(--contentL);border-radius:5px;padding:12px}.sgOw span{width:100%;line-height:1.4em;font-size:14px}.sgOw button{--svgW:20px;--svgH:20px;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--linkB);color:#fffdfc;border-radius:8px}.sgOs{flex:1 1 35%;width:100%;max-width:120px;margin:12px 0;padding:16px}</style>




<script>
    // Firebase shortlink config
    const SHORTLINK_DOMAIN = "https://XXXXXX.page.link"; // Replace
    const SHORTLINK_KEY = "XXXXXXXX-NNN-7VVVVV-UUUUUUU-P"; // Replace
  
 /*! Plus UI Javascript (safelink+Shortlink/generator.js) | Authors: Deo Kumar, Armaan Kumar | Refactored 2025 */
"use strict";((t,e,n)=>{let{cEl:_,iAE:i,aEL:a,qSel:l,gId:s,eHTML:r,tNtf:o,df:p,pl:$,bg:g}=n,u=t=>{var n,_;return _=t.replace(/(^\w+:|^)/,""),new URL(_,e.baseURI)},c=$.sl,h=c.pg.map(t=>new URL(t,g.cnHmU).href),d=e.currentScript,f=[];c.ok||f.push("The Safelink plugin is not enabled."),0===h.length&&f.push("No Safelink page has been configured!");let v=_("div",{className:"sgMw",innerHTML:`${0!==f.length?`<div class='alert warning'><b>Warning!</b>${f.map((t,e)=>`${e+1}. ${t}`).join("<br>")}</div>`:""}<div class='inF cB' data-message='URL must begin with http:// or https://'><input type='text' name='link' id='sg_f_link' placeholder=' '><label for='sg_f_link'>Destination URL</label><button type='button' id='sg_f_clear_link'><svg class='line' viewBox='0 0 24 24'><path d='M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999'></path></svg></button></div><div class='inF' data-message='Select a page for safelink'><select id='sg_f_page'>${c.ok?`<optgroup label='Static pages'><option value='${r(g.cnHmU)}' selected>Homepage</option></optgroup>`:""}${c.ver||0===h.length?"":`<optgroup label='Safelink Pages'>${h.reduce((t,e,n)=>`${t}<option value='${r(e)}'${0===n?" selected":""}>Safelink Page (${r(c.pg[n])})</option>`,"")}</optgroup>`}</select><label for='sg_f_page'>Safelink Page</label></div><div class='sgOw'><span class='sgOl'></span><button type='button' class='sgOs' id='sg_f_shorten'><svg class='line' viewBox='0 0 24 24'><path d='M13.0601 10.9399C15.3101 13.1899 15.3101 16.8299 13.0601 19.0699C10.8101 21.3099 7.17009 21.3199 4.93009 19.0699C2.69009 16.8199 2.68009 13.1799 4.93009 10.9399'></path><path d='M10.59 13.4099C8.24996 11.0699 8.24996 7.26988 10.59 4.91988C12.93 2.56988 16.73 2.57988 19.08 4.91988C21.43 7.25988 21.42 11.0599 19.08 13.4099'></path></svg>Short it</button><button type='button' class='sgOv'><svg class='line' viewBox='0 0 24 24'><path d='M15.58 12C15.58 13.98 13.98 15.58 12 15.58C10.02 15.58 8.42 13.98 8.42 12C8.42 10.02 10.02 8.42 12 8.42C13.98 8.42 15.58 10.02 15.58 12Z'></path><path d='M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.47 3.71997 5.18 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.18 18.19 8.47 20.27 12 20.27Z'></path></svg></button><button type='button' class='sgOc'><svg class='line' viewBox='0 0 24 24'><path d='M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z'></path><path d='M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z'></path></svg></button></div> `});i(d,"beforebegin",v);let b=s("sg_f_link"),k=s("sg_f_clear_link"),C=s("sg_f_page"),m=l(".sgOl",v),w=l(".sgOv",v),y=l(".sgOc",v),L=l("#sg_f_shorten",v),T=()=>{if(!n.B64)return null;let t=b.value.trim();return t?(/^https?:\/\//.test(t)||(t=`https://${t}`),`${C.value}#s=${encodeURIComponent(n.B64.O3.e(JSON.stringify({v:1,u:t})))}`):null},H=()=>{m.innerText=T()||"Input a valid Destination URL first!"};async function x(t){if(!t)return null;try{let e=await fetch(`https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=${SHORTLINK_KEY}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({dynamicLinkInfo:{domainUriPrefix:SHORTLINK_DOMAIN,link:t},suffix:{option:"SHORT"}})});if(!e.ok)return o("Error generating shortlink"),null;return(await e.json()).shortLink||null}catch(n){return console.error(n),o("Network error"),null}}H(),a(b,"change",H),a(b,"input",H),a(b,"keyup",H),a(C,"change",H),a(C,"input",H),a(b,"blur",()=>{let t=b.value.trim();""!==t&&(/^https?:\/\//.test(t)?b.value!==t&&(b.value=t):b.value=`https://${t}`)}),a(k,"click",()=>{b.value="",H()}),a(L,"click",async()=>{let t=T();if(!t)return o("Enter a valid URL first!");m.innerText="Generating short safe link...";let e=await x(t);m.innerText=e||t}),a(w,"click",()=>{let e=m.innerText.trim(),n=T(),_=/^https?:\/\//.test(e)?e:n;if(!_)return o("Enter a valid URL first!");t.open(_,"_blank")}),a(y,"click",async()=>{let t=m.innerText.trim(),e=T(),_=/^https?:\/\//.test(t)?t:e;if(!_)return o("Enter a valid URL first!");await n.cpT(_),o("Link copied to clipboard!"),m.innerText=_}),p.then(()=>{H(),c.ver||n.iBF().then(async t=>{let e=new t(u(g.cnHmU)),[n,i]=await Promise.all([e.posts.list(),e.pages.list()]),a=_("optgroup",{attributes:{label:"Recent Posts"},innerHTML:n.reduce((t,e)=>`${t}<option value='${r(e.url)}'>${r(e.title)}</option>`,"")});C.appendChild(a);let l=_("optgroup",{attributes:{label:"Recent Pages"},innerHTML:i.reduce((t,e)=>`${t}<option value='${r(e.url)}'>${r(e.title)}</option>`,"")});C.appendChild(l)})})})(window,document,PU);
</script>

<!--[ End: Safelink + Shortlink Generator area ]-->

Tips

  • Always replace your Firebase keys with real credentials before testing.
  • If the shortened or safelinked URL doesn’t open, ensure your API permissions are set to public.
  • Enable “Safelink Plugin” under Theme Designer → Advanced → Plugin: Safelink (Experimental).
  • Use class='safeL' on anchor links to auto-wrap them in safelink.

conclusion

Once you add the above code, your page will include a modern interface like this:

  • A text box to enter destination URLs
  • Buttons to shorten, copy, and open links
  • Dropdown to select safelink pages
  • Built-in warnings if safelink is not enabled or configured
Done! You’ve successfully set up the Shortlink and Safelink Generator in your Blogger theme.

About the author

Deø Kumar
Lost in the echoes of another realm.

Post a Comment