March 13, 2014 2:30 pm

How to create social content locker using jQuery plugin

I saw a website where for some work and at the main content they add a box with message to The content is locked! Please like us to to unlock content. So I found the way how he did that and found a jQuery plugin added  to do this so decided to give my reader this functionality so the can implement in there web application and give useful data with little contribution like tweet, like, plus or share on social network and get information they want.

How to create social content locker using jQuery plugin

[wpdm_file id=91]DEMO

I have used a jQuery plugin which add social media buttons for Twitter tweet, follow, Facebook like, Google plus or LinkedIn share instead of your content, actually it hide your data and show buttons once you like or tweet it will hide buttons and show you content and create a cookie on your browser so you will get content every time until cookie available on your browser.

Include jQuery and Plugin:

<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://demo.phpgang.com/social-locker-jquery/social-locker.js"></script>

jQuery to initialize social locker:

<script type="text/javascript">
    jQuery.noConflict();                    
    jQuery(document).ready(function ($) {
        $("#lock-my-div").sociallocker({
            text: {
                header: "The content is locked!", // replace content with this heading
                message: "Please support us, click like button below to unlock the content." // hidden content message
            },

            theme: "starter", // Theme

            locker: {
                close: false,
                timer: 0
            },

            buttons: {   // Buttons you want to show on box
                order: ["facebook-like", "twitter-tweet", "twitter-follow", "google-plus", "linkedin-share"] 
            },

            facebook: {  
                appId: "2068418453432508",
                like: {
                    title: "Like us",
                    url: "https://www.facebook.com/9H9Gang" // link to like in Facebook button
                }
            },

            twitter: {
                tweet: {
                    title: "Tweet", 
                    text: "PHPGang Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos.", // tweet text
                    url: "https://www.phpgang.com/" //tweet link
                },
                follow: {
                    title: "Follow us", 
                    url: "http://twitter.com/phpgang" // Twitter profile to follow 
                }
            },

            google: {                                
                plus: {
                    title: "Plus +1",
                    url: "https://www.phpgang.com/" // Google plus link for +1
                }
            },

            linkedin: {
                url: "https://www.phpgang.com/",      // LinkedIn url to share 
                share: {
                    title: "Share"
                }
            }
        });
    });
</script>

In above jQuery we give our links to user to like or share and initialize social locker plugin for a div with id lock-my-div and that div will be replaced with social content and your defined message once user perform any activity it will hide that social buttons box and show your content div.

CSS used to beautify the display:

<style type="text/css">

    .jo-sociallocker.jo-sociallocker-msie {
        background-color: hsl(200, 65%, 91%);
        border-color: hsl(190, 65%, 84%);
        color: hsl(200, 50%, 45%);
    }
    .jo-sociallocker {
        background-color: hsl(50, 81%, 94%);
        border: 1px solid hsl(39, 83%, 91%);
        -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        margin-bottom: 20px;
        padding: 8px 35px 8px 14px;
        -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.5);
        width:60%;
        margin-left: auto;
        margin-right: auto;
    }
    .jo-sociallocker-button{
        float: left;
        margin-left: 10px;
    }
    .jo-sociallocker-after-text{
        margin-bottom: 20px;
    }
    .jo-sociallocker-buttons{
        height:35px;
    }
    .jo-sociallocker-strong{
        font-size: 30px;
        color: hsl(0, 0%, 0%);
    }
</style>

You can customize CSS as per your website layout.

Content div replaced with social buttons

<div id="lock-my-div" style="display: none;">
    <p>
        <!-- YOUR CONTENT GOES HERE -->
    </p>
</div>
[wpdm_file id=91]DEMO

A functional demo and source of this tutorial is available to download for free you must try this and please give us your feedback and suggestion for improvement.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

81 responses to “How to create social content locker using jQuery plugin”

  1. Pozsár Sándor says:

    awsome, but, how to combine with timer. foe example, if user dont like for 15 sec,after the content is already avalaible?

  2. Muhamad Fikri says:

    How to Add Other Social, like Instagra etc. ?

  3. Shri says:

    Is this free to use??

  4. Imre Tanko says:

    Without Facebook share it’s almost useless. But thanks anyway.

  5. Can Minh says:

    it’s working for me, but after i clear cache and Cookies of Browse -> i have to login Facebook, Google … again and unlike + Like again for Unlock, Can i only login and not need unlike and like?
    Plz help me, many thanks

  6. iLenElFuerte says:

    Facebook: Share Button?

  7. My name says:

    Its not working with jquery verison 1.9? is there any solution for it?

  8. BHAVESH KUMAR says:

    How to Control Cookie Expiration Time !

    • huzoorbux says:

      You can increase and decrease cookie time in social-locker.js file by editing value of this variable
      // the number of days for cookies lifetime
      cookiesLifetime: 3560

  9. Alexander says:

    why i can’t see facebook buttons? Even in your demo page

  10. Francis Claide Magallen says:

    thanks for this tut. I have a question. How to check if the user already like the page show them directly the content? please help

  11. Ramses says:

    Like button doesn’t work i don’t know why. I change the URL and nothing

  12. Amazing Templates says:

    Hi,
    I have question.
    After i click on google +1 button, the content is unlocked.
    But when i check on my Google plus page. I don’t see “+1” post on my timeline.

    • Дмитрий says:

      You need Google share button (“google-share”). I found it in js file? but it in’t work ((( Maybe someone can help us?i

  13. Ricardo Sanchez says:

    Facebook Share button doesn’t show

  14. ehxp says:

    wonderful, thanks a lot

  15. suniel says:

    hi how can i download the code i subscribrd to feed burner but the codes not downloading

  16. Ismael says:

    It doesn’t work in my website. I locked a video, but now nothing appears in its place. What can I do to solve this problem?

  17. huzoorbux says:

    I saw your website and found the error and error is that you didn’t use (lock-my-div) id to any div so which dive locked?

  18. Carmen says:

    Hi, the code works fine but the install button disappears Facebook. Only buttons Goggle, Twitter and Linkedin are. You could look at it?

  19. jose says:

    thanks a lot

  20. sean says:

    how to create custom themes?

  21. Загварлаг Хувцас says:

    Hello, I already liked on facebook page before visit to locked content. I first time read the locked content.But Content is locked. How to unlock if i liked already facebook page and cookies not created?

    • Tahir Khan Afridi says:

      Admin – Same question from my side. Please provide us any solution or say sorry if you don’t have any solution. Thanks

    • Huzoor Bux says:

      It store cookies if cookie removed it will again lock content so unlike it and again like it to open locked content you can increase life of cookie to 1 year in social-locker.js file.


      // the number of days for cookies lifetime
      cookiesLifetime: 3560

  22. Yalin Meric, Logica IT says:

    Facebook like button doesn’t show if user is not already logged in to Facebook. Your demo works but mine does not work. Which means there is something wrong with my Facebook App settings. How should I set my Facebook App to solve that problem?

  23. Yalin Meric, Logica IT says:

    I’m using the unlock event to run a javascript function. How can I get logged Facebook user’s name and email at that step?

  24. gamexmod says:

    how to open like share by link blank or popup

  25. Eloi Vicenç Gonzalez Mas says:

    The facebook share button doesn’t work. If you include in the button order “facebook-share” a “0” appears, if you click on the 0 the facebook popups saying you must be logged in to continue..
    How can you make that “0” into a facebook share button? THANKS

    • Marcin says:

      I have the same problem, this ‘0’ is a value of the like counter, but the share button cannot appear. When I choose the ‘like’ button instead everything works well, but when you click on it you should have possibility to add comment to the content. Unfortunately the window with facebook’s comment message only blinks and disappears, it is closed by the _unlock event. Do anybody have any solution how to make “facebook-share” start to work?

  26. ripina says:

    CTRL + U,,, i can see the code

  27. faq says:

    This method has several disadvantages.
    1. The closing text can be seen via an HTML code
    Question – how to make via Ajax to hide the content in HTML code?
    2. I have, hidden text, opens after clicking on the button. Is obtained, share in social networks, it is unnecessary to see the hidden text. Members area It is unnecessary to, enter a username and password to enter the the social network. This is way it should be?

  28. Great trick. Thanks a lot.
    A suggestion, if you don’t mind. Make the hidden content visible, but blurred. This will make people more curios and they’ll be likely to click the share buttons 😉

  29. Great trick. Thanks a lot.
    A suggestion, if you don’t mind. Make the hidden content visible, but blurred. This will make people more curios and they’ll be likely to click the share buttons 😉

  30. I already subscribed and still cannot download the source code

  31. Yaron says:

    Facebook Like button doesn’t appear, do you have a solution for this?

  32. Dave Linney says:

    I implemented this on a website but can’t get the FB buttons to appear? They also don’t appear in your demo page in any browser, I’m logged into FB. Any ideas on what the issue is??

  33. Yaron says:

    At the end i managed to set the FB share button perfectly! THANK you for this great code!
    However, somehow today the FB Share button count was set to “0” and the count itself stopped working… how can i fix it?

  34. Coevote says:

    Nice Article . About lock content using Jquery . Also Update Your Facebook App id its not working and Add also Support to other like medium .

  35. Sidhi Dhall says:

    Facebook like button is not showing. Can you please help

Leave a Reply

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