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

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:

jQuery to initialize social locker:

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:

You can customize CSS as per your website layout.

Content div replaced with social buttons

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:
  • s.shivasurya

    awsome script!

  • Pozsár Sándor

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

    • huzoorbux

      @pozsrsndor:disqus for timer you have to modify plugin and setup this feature.

      • Pozsár Sándor

        sorry i am stupid for js. maybe have other solution? its possible close or remove the locker with link or button, or etc… ?

        • Huzoor Bux

          We give user multiple options so no need to give him alternate to close locker.

  • Muhamad Fikri

    How to Add Other Social, like Instagra etc. ?

    • Muhamad Fikri

      I mean Instagram.. thk’s

  • Shri

    Is this free to use??

    • huzoorbux

      yes 100% free.

  • Imre Tanko

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

  • Can Minh

    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

  • iLenElFuerte

    Facebook: Share Button?

  • My name

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


    How to Control Cookie Expiration Time !

    • huzoorbux

      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

  • Alexander

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

    • Naf Se Sa

      wooow… you must try online, not in localhost,,,,, after i change the app id in script,,, facebook buttons showed…

      • Alexander

        thanks for your comment. I will try!

  • Francis Claide Magallen

    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

  • Ramses

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

  • Amazing Templates

    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.

    • Дмитрий

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

  • Ricardo Sanchez

    Facebook Share button doesn’t show

    • huzoorbux

      give me link of your website

  • ehxp

    wonderful, thanks a lot

  • suniel

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

  • Ismael

    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?

    • huzoorbux

      Your website link please.

  • huzoorbux

    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?

  • Carmen

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

  • jose

    thanks a lot

  • sean

    how to create custom themes?

  • Загварлаг Хувцас

    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

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

    • Huzoor Bux

      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

  • Yalin Meric, Logica IT

    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?

    • huzoorbux

      Create app and add your app id in facebook section like I did.

      • Yalin Meric, Logica IT

        I already created a Facebook App and used its id. It works fine if I’m already logged in to Facebook. Like button shows up. If I log out of Facebook and test it, like button does not show up. Here is a test URL for you

        • huzoorbux
          • Yalin Meric, Logica IT

            It is live and open to public.

        • huzoorbux

          Can’t open your facebook page if i am not loggedin in facebook that’s why you its hiding like button.

          • Yalin Meric, Logica IT

            Thanks. The Facebook page that I used for my tests was age restricted. When I removed age restriction it started working. Thanks for providing this usefull script and your fast support. :-)

          • Yalin Meric, Logica IT

            Thanks. The Facebook page that I used for my tests was age restricted. When I removed age restriction it started working. Thanks for providing this usefull script and your fast support. :-)

  • Yalin Meric, Logica IT

    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?

  • gamexmod

    how to open like share by link blank or popup

  • Eloi Vicenç Gonzalez Mas

    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

      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?

      • Elo

        I have the same problem, appears a number :S. Anybody knows the solution to facebook-share?

  • ripina

    CTRL + U,,, i can see the code