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.


Tutorial Categories:
  • http://www.i-visionblog.com 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.

  • http://hagiangpro.com 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?

  • BHAVESH KUMAR

    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

    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.

    • Дмитрий

      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

  • http://highxp.eu/ 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?