Free social locker countdown for more Facebook shares (JS only)...

Long time ago, when I heard about 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 fulfil my dream, but there wasn’t. So I decided to create my own, hope it’s useful for you.

First, you can see this free social locker with countdown in action right below.


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

Now 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 precious content in a “chest”. And then you put a “locker” on that.

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

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


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

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 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 1 – HTML & CSS Parts

Now it’s a little CSS for the locker.



/* hide the chest content */
#chest {
    display: none;
}

/* 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%;
    background: url(https://cdn.fususu.com/wp-content/uploads/2019/09/chest.jpg) repeat 100%;
    opacity: 0.99;
    /* if you like to use blur effect, just replace to this */
    /* background: white; opacity: 0.90; */
    flex-direction: row;
    display: none;
    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;
}

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) {

        // 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 = ""

                    // hide the lock when the time is out & show the chest content
                    jQuery('#lock').fadeOut(1000);
                    jQuery('#chest').fadeIn(1000);
                }
            }, 1000);
        }

        // start the countdown - you can replace 1800 with any amount of seconds you like
        countchest(1800);

        // get the content title and show it on the locker to intrigue user to share
        var content_hint = jQuery('#chest .content-hint')[0];
        if (content_hint) {
            jQuery('.content-hint')[0].innerHTML = 'A Gift: ' + content_hint;
        }

        // move the lock and make it float above the chest
        jQuery('#lock').insertAfter(jQuery('#lock').parent().find('#chest'));
        jQuery('#lock').css('display', 'flex');

        // show the sharing counter based on real likes & shares of current link on facebook
        jQuery('.fb-like').attr('data-href', location.href);

        // when I user click on locker, open the dialog for sharing
        jQuery('#lock').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('#lock').fadeOut(1000);
                    jQuery('#chest').fadeIn(1000);

                } 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 skd, enable us to get response from facebook to see if the sharing is 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, this free social locker code is my very first version, so if you have any question, just comment below!!





See you with good news!

FuSuSu wrote 29/09/2019. Updated 01/10/2019. In Wordpress Tips & Codes.

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

Thank for your visit, I have a gift for you…

Leave a Reply

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

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!