Free Social Unlocker: Download Gate with Timer & Ads Monetization

Social Unlocker / Download Gate is a modern, interactive, and fully responsive system that requires users to follow social channels before unlocking a download link. It includes step-by-step actions, timers, progress tracking, and a secure download button — all in a clean, professional card layout.

This unlocker is perfect for blogs, resource websites, freebie pages, or any site offering downloadable files like templates, eBooks, tools, or codes. It encourages social growth while ensuring users complete actions before accessing content.

Built with HTML, CSS, and JavaScript, this unlocker is lightweight, fast, and works flawlessly on mobile & desktop. Uses Font Awesome 7 for icons and includes hover effects, timers, and progress updates. Easy to customize — no frameworks needed!

Table of Contents

How It Works

When someone clicks the Follow to Unlock button, the tool triggers your ad link in a new browser tab. Once the user interacts with the ad and returns to your page, the button automatically changes to a Download Now button. This smooth process ensures better monetization without annoying your visitors.

Info!This Social Unlocker requires Font Awesome 7 CDN. All steps are click-to-verify with a 5-second timer. Customize adsUrl & downloadUrl in JS to go live. Works best with Monetag or Adsterra direct links.

How to Install Social Unlocker:

Follow these steps to add the Social Unlocker to your website. Copy the full code and customize as needed.

Steps to Install and Customize:

Copy Full Unlocker Code (HTML + CSS + JS)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">  
<div class="unlocker-container">  
  <div class="header">  
    <div class="logo">Complete All Steps</div>  
    <div class="title"><p class='alert info'><b>Follow any <u>4 social channels</u> to unlock <u>Download link</u></b></p></div>  
  </div>  

  <div class="step" id="step1" onclick="startStepTimer(1, 'https://www.facebook.com/codehubly')">  
    <div class="step-icon facebook"><i class="fab fa-facebook-f"></i></div>  
    <div class="step-text">Follow on Facebook</div>  
    <div class="step-check"><i class="fas fa-check"></i></div>  
    <div class="step-timer" id="timer1"></div>  
  </div>  

  <div class="step" id="step2" onclick="startStepTimer(2, 'https://www.instagram.com/codehubly')">  
    <div class="step-icon instagram"><i class="fab fa-instagram"></i></div>  
    <div class="step-text">Follow on Instagram</div>  
    <div class="step-check"><i class="fas fa-check"></i></div>  
    <div class="step-timer" id="timer2"></div>  
  </div>  

  <div class="step" id="step3" onclick="startStepTimer(3, 'https://www.tumblr.com/codehubly')">  
    <div class="step-icon tumblr"><i class="fab fa-tumblr"></i></div>  
    <div class="step-text">Follow on Tumblr</div>  
    <div class="step-check"><i class="fas fa-check"></i></div>  
    <div class="step-timer" id="timer3"></div>  
  </div>  

  <div class="step" id="step4" onclick="startStepTimer(4, 'https://whatsapp.com/channel/0029VbBGhLm3bbV6hjtPFm3S')">  
    <div class="step-icon whatsapp"><i class="fab fa-whatsapp"></i></div>  
    <div class="step-text">Join WhatsApp Channel</div>  
    <div class="step-check"><i class="fas fa-check"></i></div>  
    <div class="step-timer" id="timer4"></div>  
  </div>  

  <div class="step" id="step5" onclick="startStepTimer(5, 'https://telegram.me/codehubly')">  
    <div class="step-icon telegram"><i class="fab fa-telegram-plane"></i></div>  
    <div class="step-text">Join Telegram</div>  
    <div class="step-check"><i class="fas fa-check"></i></div>  
    <div class="step-timer" id="timer5"></div>  
  </div>  

  <div class="step" id="step6" onclick="startStepTimer(6, 'https://pin.it/2P8llJY5V')">  
    <div class="step-icon pinterest"><i class="fab fa-pinterest-p"></i></div>  
    <div class="step-text">Follow on Pinterest</div>  
    <div class="step-check"><i class="fas fa-check"></i></div>  
    <div class="step-timer" id="timer6"></div>  
  </div>  

  <div class="step" id="step7" onclick="startStepTimer(7, 'https://youtube.com/@codehubly')">  
    <div class="step-icon youtube"><i class="fab fa-youtube"></i></div>  
    <div class="step-text">Subscribe on YouTube</div>  
    <div class="step-check"><i class="fas fa-check"></i></div>  
    <div class="step-timer" id="timer7"></div>  
  </div>  

  <div class="progress" id="progressText">0/4 steps completed</div>  

  <button class="download-btn" id="downloadBtn" disabled onclick="handleDownloadClick()">  
    Download File  
  </button>  
</div>  

<style>  
.unlocker-container{max-width:600px;margin:-20px auto 0px auto;background:white;padding:12px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.08)}  
.header{text-align:center;margin-bottom:25px}  
.logo{font-size:20px;font-weight:600;color:#2c3e50;margin-bottom:5px}  
.title{color:#000;font-size:16px;font-weight:400;margin-bottom:20px}  
.step{display:flex;align-items:center;gap:8px;background:#050008;color:#fff;border-radius:4px;padding:10px 14px;font-weight:600;font-size:15px;cursor:pointer;margin-bottom:10px;user-select:none;position:relative;transition:background-color 0.25s ease}  
.step:hover:not(.disabled):not(.completed){background:#222}  
.step.disabled{opacity:0.6;cursor:not-allowed}  
.step-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:12px;color:white;font-size:14px}  
.step-text{flex-grow:1;font-weight:500}  
.step-check{width:22px;height:22px;border-radius:50%;background:#27ae60;color:white;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:0;transition:all 0.3s;transform:scale(0.5)}  
.step.completed .step-check{opacity:1;transform:scale(1);animation:bounceIn 0.4s}  
@keyframes bounceIn{0%{transform:scale(0.5);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}  
.step-timer{position:absolute;right:15px;color:#e74c3c;font-weight:500;font-size:13px;display:none}  
.progress{text-align:center;margin:20px 0;font-weight:500;color:#2c3e50}  
.download-btn{width:100%;padding:14px;border:none;border-radius:8px;background:#3498db;color:white;font-weight:500;font-size:16px;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden}  
.download-btn:hover:not(:disabled){background:#2980b9;transform:translateY(-2px);box-shadow:0 4px 12px rgba(41,128,185,0.3)}  
.download-btn:disabled{background:#bdc3c7;cursor:not-allowed}  
.facebook{background:#3b5998}.instagram{background:#e4405f}.tumblr{background:#204155}.whatsapp{background:#25d366}.telegram{background:#0088cc}.pinterest{background:#bd081c}.youtube{background:#ff0000}  
</style>  

<script>  
  let completedCount = 0;  
  const requiredSteps = 4;  
  const totalSteps = 7;  
  let downloadClicked = false;  
  let currentTimer = null;  
  const adsUrl = "#";  
  const downloadUrl = "https://tinyurl.com/2245mrgr";  
  
  function disableAllSteps() {  
    for (let i = 1; i <= totalSteps; i++) {  
      const step = document.getElementById(`step${i}`);  
      if (!step.classList.contains('completed')) {  
        step.classList.add('disabled');  
      }  
    }  
  }  
  
  function enableAllSteps() {  
    for (let i = 1; i <= totalSteps; i++) {  
      const step = document.getElementById(`step${i}`);  
      if (!step.classList.contains('completed')) {  
        step.classList.remove('disabled');  
      }  
    }  
  }  
  
  function startStepTimer(stepNumber, url) {  
    const step = document.getElementById(`step${stepNumber}`);  
    const timer = document.getElementById(`timer${stepNumber}`);  
      
    if (!step.classList.contains('completed') && !step.classList.contains('disabled')) {  
      window.open(url, '_blank');  
      disableAllSteps();  
      let seconds = 5;  
      timer.style.display = 'block';  
      timer.textContent = `${seconds}s`;  
      clearInterval(currentTimer);  
      currentTimer = setInterval(() => {  
        seconds--;  
        timer.textContent = `${seconds}s`;  
        if (seconds <= 0) {  
          clearInterval(currentTimer);  
          timer.style.display = 'none';  
          step.classList.add('completed');  
          step.classList.remove('disabled');  
          completedCount++;  
          document.getElementById('progressText').textContent = `${completedCount}/${requiredSteps} steps completed`;  
          if (completedCount >= requiredSteps) {  
            document.getElementById('downloadBtn').disabled = false;  
          }  
          enableAllSteps();  
        }  
      }, 1000);  
    }  
  }  
  
  function handleDownloadClick() {  
    if (!downloadClicked) {  
      window.open(adsUrl, '_blank');  
      downloadClicked = true;  
      document.getElementById('downloadBtn').textContent = 'Click again to download';  
    } else {  
      const btn = document.getElementById('downloadBtn');  
      btn.textContent = 'Downloading...';  
      btn.disabled = true;  
      setTimeout(() => {  
        window.location.href = downloadUrl;  
      }, 1000);  
    }  
  }  
</script>

Paste it into your webpage where you want the unlocker to appear.
Replace all social URLs with your own links.
Change adsUrl and downloadUrl in the script.
Update the title, logo, and step texts as needed.
Save and test!

How to Add More Social Steps

Want to add more platforms? Follow this structure:


<!-- Twitter -->
<div class="step" id="step8" onclick="startStepTimer(8, 'https://twitter.com/codehubly')">
  <div class="step-icon twitter"><i class="fab fa-twitter"></i></div>
  <div class="step-text">Follow on Twitter</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer8"></div>
</div>


<!-- TikTok -->
<div class="step" id="step9" onclick="startStepTimer(9, 'https://tiktok.com/@codehubly')">
  <div class="step-icon tiktok"><i class="fab fa-tiktok"></i></div>
  <div class="step-text">Follow on TikTok</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer9"></div>
</div>


<!-- LinkedIn -->
<div class="step" id="step8" onclick="startStepTimer(8, 'https://linkedin.com/company/codehubly')">
  <div class="step-icon linkedin"><i class="fab fa-linkedin-in"></i></div>
  <div class="step-text">Follow on LinkedIn</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer8"></div>
</div>


<!-- GitHub -->
<div class="step" id="step9" onclick="startStepTimer(9, 'https://github.com/codehubly')">
  <div class="step-icon github"><i class="fab fa-github"></i></div>
  <div class="step-text">Follow on GitHub</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer9"></div>
</div>


<!-- Discord -->
<div class="step" id="step10" onclick="startStepTimer(10, 'https://discord.gg/codehubly')">
  <div class="step-icon discord"><i class="fab fa-discord"></i></div>
  <div class="step-text">Join Discord Server</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer10"></div>
</div>


<!-- Reddit -->
<div class="step" id="step11" onclick="startStepTimer(11, 'https://reddit.com/r/codehubly')">
  <div class="step-icon reddit"><i class="fab fa-reddit-alien"></i></div>
  <div class="step-text">Join on Reddit</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer11"></div>
</div>


<!-- Twitch -->
<div class="step" id="step12" onclick="startStepTimer(12, 'https://twitch.tv/codehubly')">
  <div class="step-icon twitch"><i class="fab fa-twitch"></i></div>
  <div class="step-text">Follow on Twitch</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer12"></div>
</div>


<!-- Medium -->
<div class="step" id="step13" onclick="startStepTimer(13, 'https://medium.com/@codehubly')">
  <div class="step-icon medium"><i class="fab fa-medium-m"></i></div>
  <div class="step-text">Follow on Medium</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer13"></div>
</div>


<!-- Behance -->
<div class="step" id="step14" onclick="startStepTimer(14, 'https://behance.net/codehubly')">
  <div class="step-icon behance"><i class="fab fa-behance"></i></div>
  <div class="step-text">Follow on Behance</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer14"></div>
</div>


<!-- Dribbble -->
<div class="step" id="step15" onclick="startStepTimer(15, 'https://dribbble.com/codehubly')">
  <div class="step-icon dribbble"><i class="fab fa-dribbble"></i></div>
  <div class="step-text">Follow on Dribbble</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer15"></div>
</div>


<!-- Snapchat -->
<div class="step" id="step16" onclick="startStepTimer(16, 'https://snapchat.com/add/codehubly')">
  <div class="step-icon snapchat"><i class="fab fa-snapchat-ghost"></i></div>
  <div class="step-text">Add on Snapchat</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer16"></div>
</div>


<!-- Vimeo -->
<div class="step" id="step17" onclick="startStepTimer(17, 'https://vimeo.com/codehubly')">
  <div class="step-icon vimeo"><i class="fab fa-vimeo-v"></i></div>
  <div class="step-text">Follow on Vimeo</div>
  <div class="step-check"><i class="fas fa-check"></i></div>
  <div class="step-timer" id="timer17"></div>
</div>

Copy any step block above.
Paste it before the <div class="progress">.
Update id="stepX" and id="timerX" (X = next number).
Change startStepTimer(X, 'URL').
Add matching CSS class color:

/* Add to CSS */
.twitter { background: #1DA1F2; }
.tiktok { background: #000000; color: #fff; }

Add Custom Social Icon Manually

To add a platform not in the list:

Find Font Awesome icon: <i class="fab fa-app"></i>
Create step with unique ID and timer.
Add CSS class with official brand color.

First Click Ads → Second Click Download: Monetization Explained

This feature requires two clicks on the download button: first opens your ad link in a new tab to earn revenue, second starts the actual download. It’s a clean, non-intrusive way to monetize file sharing using pure JavaScript.

Just replace adsUrl with your ad network’s direct or smart link and downloadUrl with your file. No popups, no delays — just smart monetization before delivery.

Monetag: Auto-optimized smart links with high CPM
Adsterra: Smart Direct Link with 20K+ rotating campaigns
PropellerAds: OnClick/Push ads perfect for download gates
ExoClick: High-fill direct links for global traffic
Any CPA/SmartLink Network: Works with OGAds, CPAGrip, AdWork Media, etc.

Key Features

This Social Unlocker blends engagement + monetization in pure HTML/CSS/JS. Users follow to unlock — you earn from ads.

4/7+ Actions: Fully editable requirement
5s Timer: Blocks bots, ensures real follows
Live Progress: Shows 2/4 in real time
Checkmark Animation: Bounces in on completion
Double-Click Monetization: Ad → Download
New Tab Links: Safe social redirects
100% Responsive: Mobile-first design
Ad-Ready: Monetag, Adsterra, etc. supported
No Frameworks: Lightweight & fast

Social Unlocker FAQ

How many social actions are required to unlock the download?

Users must complete any 4 social actions from the available list (e.g., follow on Facebook, Instagram, YouTube, etc.). This flexible system allows users to choose their preferred platforms while ensuring meaningful engagement. You can increase or decrease the requirement by editing const requiredSteps = 4; in the JavaScript — just make sure it’s less than or equal to the total number of steps.

Can I customize the number of required steps or add more social platforms?

Absolutely! To change the required count, modify const requiredSteps = 4; in the <script> section. To add more platforms (like Twitter, LinkedIn, GitHub, etc.), simply copy an existing <div class="step"> block, update the id, onclick URL, icon class, and text. Then increase const totalSteps = 7; accordingly. CSS colors are already defined for 20+ popular platforms — just add the class (e.g., .twitter { background: #1DA1F2; }).

How do I set up the actual download file and ad redirect?

In the JavaScript section, update two variables:
• const downloadUrl = "https://yourdomain.com/yourfile.zip"; → Direct link to your file (Google Drive, Dropbox, MediaFire, or your server).
• const adsUrl = "https://go.monetag.com/abc123"; → Your ad network’s SmartLink/Direct Link (Monetag, Adsterra, PropellerAds, etc.).
The system works like this: first click opens the ad in a new tab and changes button text to “Click again to download”. Second click triggers the actual file download after a 1-second delay. This ensures revenue without blocking access.

Can I disable the ad redirect and allow direct download on first click?

Yes! To skip monetization and allow instant download:
1. Set const adsUrl = ""; (empty string).
2. Modify the handleDownloadClick() function: replace the if (!downloadClicked) block with direct download logic, or simply set downloadClicked = true; by default.
Alternatively, remove the entire first-click condition and call the download directly. This is ideal for non-monetized giveaways, internal tools, or premium member areas.

Final Thought:

Social Unlocker / Download Gate is a smart, engaging, and effective way to grow your social audience while protecting premium content. With timers, animations, and progress tracking, it feels premium — yet it's just HTML + CSS + JS. Perfect for bloggers, creators, and developers!

CodeHubly

Free Social Unlocker: Download Gate with Timer & Ads Monetization

How It Works

How to Install Social Unlocker:

How to Add More Social Steps

Add Custom Social Icon Manually

First Click Ads → Second Click Download: Monetization Explained

Key Features

Social Unlocker FAQ

Final Thought:

Post a Comment

Designed Contact Form with FormSubmit: Simple & Secure Setup

Responsive Profile Card HTML CSS Design for About Us Pages

HTML CSS Grid Component for Responsive Cards

Custom HTML CSS Badge Styles

Image compress and Convert PNG, JPG, WebP Formats Easily