Free social locker countdown for more Facebook shares

Free social locker countdown for more Facebook shares...

1605 views

A long time ago, when I heard about a social locker idea that enables you to hide a part of your content from users, in exchange for a share on social media, I liked it so much. I wanted a free social locker plugin that will fulfill my dream, but there wasn’t. So I decided to create my own, hope it’s useful for you.

Above is the image. You can see this free social locker with a countdown in action at the end of this Blog. You can just wait for it to open, or just click on it to share, then the hidden content will show.

How I made it? The idea is simple. First, you wrap your valuable content in a “chest”. And then you put a “locker” on that.

How I made this free social locker with countdown – Step 1 – HTML Parts

This free social locker has two HTML parts. The first one will act as “chest”, simply wrap your valuable content inside an element with a specific ID like below.


<div id="chest" data-seri="chest_001">
    <h2 class="content-hint">Show some hint about your secret content here</h2>
    Your precious content here....
</div>

Note: The data-seri attribute is to make the chest unique, to detect that chest is unlocked or not in the future. You can name it like chest_001, chest_002, must be different in each post, v.v… or you can ignore it if you want the chest appear again after they refreshed the page ^^!

The second one will act as a “locker”. It’s another div that will float above the original content. You should put it in the footer.php of your theme to call it out anytime we need it. Below it’s my “locker”.


<div id="lock">
    <div class="lock_content">
        <p class="locker-title"><i class="fa fa-lock"></i> TREASURE CHEST <i class="fa fa-lock"></i></p>
        <p class="content-hint" style="">Show some hint about your precious content here</p>
        <!-- this part will show the social sharing button. I use Facebook, you can change it to whatever you like -->
        <div class="fb-like" data-href="" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div><br /><br />
        <!-- this part will show the countdown -->
        <p>You can wait for <strong id="countbox"></strong> to get the hidden content, or just <strong><i class="fa fa-facebook-square"></i> share</strong> to see it now. Sharing is the key to succeed!</p>

        <p class="unlock-now"><i class="fa fa-key"></i> UNLOCK NOW! <i class="fa fa-key"></i></p>
    </div>
</div>

How I made this free social locker with countdown – Step 2 – CSS Parts

Now it’s a little CSS for the locker.



/* styling the locker */
<style>

/* styling the locker */
#lock .locker-title {
    font-size: 1.1em;
    color: red !important;
    font-weight: bold;
}

#lock .content-hint {
    font-size: 1.1em !important;
    color: darkblue !important;
}

#lock .unlock-now {
    font-size: 1em !important;
    font-weight: bold;
    color: white !important;
    background-color: red;
    padding: 10px;
    border-radius: 5px;
}

#lock {
    min-height: 400px;
    width: 100%;
    opacity: 0.99;
    /* if you like to use blur effect, just replace to this */
    /* background: white; opacity: 0.90; */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    margin-bottom: 1em;

}

#lock .lock_content {
    border: 1px solid black;
    border-radius: 10px;
    width: 80%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
}

#lock .lock-title {
    color: red !important;
    font-weight: bold;
}

</style>

How I made this free social locker with countdown – Step 3 – Javascript Parts

That’s the bone. Now it’s the meat of this free social locker with countdown. I’ll explain details by commenting in the code for you to understand what’s happening.


<script>
    /* check if there is a div with chest id in the post */
    var check_chest = document.getElementById("chest");
    if (check_chest) {
          /* get the chest content */
        var chest_content = check_chest.innerHTML; 
         /* get the content title and show it on the locker to intrigue user to share */
        var content_hint = jQuery('#chest .content-hint')[0].innerHTML;
         /* get the lock content */
        var lock_content = '<div id="lock"><div class="lock_content"><p class="locker-title"><i class="fa fa-lock"></i> TREASURE CHEST <i class="fa fa-lock"></i></p><p class="content-hint" style="">'+content_hint+'</p><div class="fb-like" data-href="'+location.href+'" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div><br /><br /><p>You can wait for <strong id="countbox"></strong> to get the hidden content, or just <strong><i class="fa fa-facebook-square"></i> share</strong> to see it now. Sharing is the key to succeed!</p><p class="unlock-now"><i class="fa fa-key"></i> UNLOCK NOW! <i class="fa fa-key"></i></p></div></div>';
      
        /* countdown function */
        function countchest(wait) {
            var timeleft = wait;
            var downloadTimer = setInterval(function() {
                document.getElementById("countbox").innerHTML = timeleft + " seconds";
                timeleft -= 1;
                if (timeleft <= 0) {
                    clearInterval(downloadTimer);
                    document.getElementById("countbox").innerHTML = "";
                    jQuery('#chest').html(chest_content);
                }
            }, 1000);
        }

        /* start the countdown - you can replace 1800 with any amount of seconds you like */
        
        /* get the chest unique series */
        var chest_seri = jQuery('#chest')[0].getAttribute('data-seri');
        /* update: show the content if shared */
        if (localStorage.getItem(chest_seri) != null) {
               jQuery('#chest').html(chest_content);
        } else {
               /* replace chest content */
               jQuery('#chest').html(lock_content);
               countchest(1800);
               /* when I user click on locker, open the dialog for sharing */
              jQuery('#chest').on('click', function(event) {
                  FB.ui({
                      method: 'share',
                      href: location.href
                  }, function(response) {
                      if (response && !response.error_code) {

                          /* hide the lock when sharing is done and show the chest */
                          jQuery('#chest').html(chest_content);

                          /* save the result in local storage so next time they don't need to share again */
                          localStorage.setItem(chest_seri, "unlocked"); 

                      } else {
                          /* show an alert when user cancel and don't share yoru post */
                          alert('Something wrong! You can wait, or try to share again!');
                      }
                  });
              });
        }  
    }
</script>

And there is a very important js code. It’s related to Facebook SDK, enable us to get a response from Facebook to see if the sharing is a success or not. Note: Remember to replace your appId.


<script>
/* loading facebook sdk */
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.1&appId=xxxxxxxxxxxxxxx&autoLogAppEvents=1';
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

That’s it. Just copy all those HTML & js part and paste it into your theme file footer.php, before the body tag. The CSS part should be somewhere in the header.php, then you will have a free social locker and countdown with professional looking.


Thank you for sharing this post. You’re the best person I’ve met online, in this world!

Thank you, this free social locker code is my very first version, so if you have any questions, just comment below!!

Update: Someone has asked me to test this on Blogger. And it worked as you can see here. To make it work, you should follow these four steps:

1. Go to Dashboard > Layout > Create a gadget, then choose JS/HTML
2. Insert this code at the beginning to enable jQuery


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

3. Paste CSS, JS, and HTML (the Lock) into the gadget.
4. Wrap your content with HTML (the Chest), and Enjoy!

TREASURE CHEST

!!!



You can wait for to get the hidden content, or just share to see it now. Sharing is the key to succeed!

UNLOCK NOW!

Have a good day!
Fususu wrote 29/09/2019. Updated 31/07/2020.


P.s. To motivate me, you can google this keyword free social locker, find my blog there then comment the position. Thank you so much!

Wow, there are (5) Awesome Comments!
Don't hesitate to leave a comment, I'll reply in... 86400s!



Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Max

    How to make this to work on blogger?

    • Mr. Susu

      The code has 3 parts:

      1. Css and 2. Html, you can put them anywhere in your theme, even in the content of the blog (open the code mode and paste them at the bottom).

      3. The Js part, you can try add it via a gadget (in Dashboard, Layout, add Gadget).

      I hope this helps.

  2. Jasut Degorit

    Can’t copy the code… failed!