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.
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>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:
awsome script!
awsome, but, how to combine with timer. foe example, if user dont like for 15 sec,after the content is already avalaible?
@pozsrsndor:disqus for timer you have to modify plugin and setup this feature.
sorry i am stupid for js. maybe have other solution? its possible close or remove the locker with link or button, or etc… ?
We give user multiple options so no need to give him alternate to close locker.
How to Add Other Social, like Instagra etc. ?
I mean Instagram.. thk’s
Is this free to use??
yes 100% free.
Without Facebook share it’s almost useless. But thanks anyway.
use “facebook-share”. But to isn’t show correctly. Means it is no text in tag for share. i put it manually in js file.. Still fighting with it
does the fb share button work?
Any possible way of making it work?
thanks
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
Facebook: Share Button?
Its not working with jquery verison 1.9? is there any solution for it?
How to Control Cookie Expiration Time !
You can increase and decrease cookie time in social-locker.js file by editing value of this variable
// the number of days for cookies lifetimecookiesLifetime: 3560
why i can’t see facebook buttons? Even in your demo page
wooow… you must try online, not in localhost,,,,, after i change the app id in script,,, facebook buttons showed…
thanks for your comment. I will try!
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
Like button doesn’t work i don’t know why. I change the URL and nothing
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
Facebook Share button doesn’t show
give me link of your website
wonderful, thanks a lot
hi how can i download the code i subscribrd to feed burner but the codes not downloading
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?
Your website link please.
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?
Hi, the code works fine but the install button disappears Facebook. Only buttons Goggle, Twitter and Linkedin are. You could look at it?
i have the same problem, did you find a solution??
thanks a lot
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?
Admin – Same question from my side. Please provide us any solution or say sorry if you don’t have any solution. Thanks
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
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?
Create app and add your app id in facebook section like I did. https://developers.facebook.com/apps/
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 http://netbridge.software/Social/Temp.html
Make sure that your application is on live mode http://stackoverflow.com/questions/20589213/how-to-enable-disable-sandbox-mode-in-facebook-app
It is live and open to public.
Can’t open your facebook page if i am not loggedin in facebook that’s why you its hiding like button.
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. 🙂
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. 🙂
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?
how to open like share by link blank or popup
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
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?
I have the same problem, appears a number :S. Anybody knows the solution to facebook-share?
CTRL + U,,, i can see the code
I think shareIt.js is a better options and its free.
http://mycodingtricks.com/jquery/shareit-js-social-content-unlocker/
I think shareIt.js is a better options and its free.
http://mycodingtricks.com/jquery/shareit-js-social-content-unlocker/
Shareit is not so good. If you reload the page, the like buttons are visible again and the content hidden. This one remember that you clicked like… I suppose by writing a cookie.
I will surely add this feature very soon.
Hi Andrew,
Today I have added the Cookie Option.
You can check it out.
Best Regards,
Shubham
Shareit is not so good. If you reload the page, the like buttons are visible again and the content hidden. This one remember that you clicked like… I suppose by writing a cookie.
The demo is not working too
Thank for notifying it.
Its Fixed.
Actually, the demo was not working because of Cloudflare as it had removed the code.
Thanks
Shubham
your web page is redirecting for 5 times.
Its working perfectly fine for me. Please clear your browser cache.
Hi man, Can you help me to implement Tumblr Share(reblog)?
Please request tutorial here: https://www.phpgang.com/request-tutorials-here
I know it works, but your website is applying bad coding practice. take a look at the back button on your browser of that tutorial page, it has 6 items everytime it is opened.
Thank for notifying it.
Its Fixed.
Actually, the demo was not working because of Cloudflare as it had removed the code.
Thanks
Shubham
Thank for notifying it.
Its Fixed.
Actually, the demo was not working because of Cloudflare as it had removed the code.
Thanks
Shubham
Thank for notifying it.
Its Fixed.
Actually, the demo was not working because of Cloudflare as it had removed the code.
Thanks
Shubham
Thank for notifying it.
Its Fixed.
Actually, the demo was not working because of Cloudflare as it had removed the code.
Thanks
Shubham
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?
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 😉
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 😉
I already subscribed and still cannot download the source code
Facebook Like button doesn’t appear, do you have a solution for this?
Make sure your FB page is open for everyone. If you use any sort of target filtering such as gender, location, etc then FB needs the user to be logged in to be able to apply that filter and therefore doesn’t respond properly to anonymous requests. This must be why your FB button does not show up.
https://uploads.disquscdn.com/images/c745d7ee9c6079f4c918ba6bf0b39f6f35ff4e2a7cecbeaf14198790e04b334f.png unfortunately everything is open, and i also try it when i’m logged in to facebook (as you can see on the attached picture) but still the “like” button keeps disappearing,
although the share button works great – only the like button doesn’t work.
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??
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?
How you managed to show the Facebook like button. I am also having the same issue
Nice Article . About lock content using Jquery . Also Update Your Facebook App id its not working and Add also Support to other like medium .
Facebook like button is not showing. Can you please help