Tuesday 16 February 2016

Create Social Content Locker Using jQuery

We are using social networking websites to share our article and ideas. However we are also using networking websites to boost our website traffic. We saw a website where main content has been locked and the message appears The content is locked! Please like us to unlock content. We have found the jQuery plugin through which we can make this functionality. We have used social media button Twitter, Google Plus, Facebook and LinkedIn. These buttons hide the actual content and once visitor perform any button action its hide all the button and show the actual content. It also creates a cookie on our browser so that we will get content every time until cookie available in our browser.

DOWNLOAD CODE

DEMO

So first we will include jQuery library and social locker plugin:

<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="social-locker.js"></script>

Initialize Social locker:

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

            theme: "starter",
                            
            locker: {
                close: false,
                timer: 0
            },
                                                        
            buttons: {                                
                order: ["facebook-like", "twitter-tweet", "twitter-follow", "google-plus", "linkedin-share"]
            },
                            
            facebook: {  
                appId: "YOUR_FACEBOOK_APP_ID",
                like: {
                    title: "Like us",
                    url: "https://www.facebook.com/stepblogging"
                }
            },
            
            twitter: {
                tweet: {
                    title: "Tweet",
                    text: "StepBlogging.com - PHP, MySQL, Payment Gateway, jQuery, PHP Demo & Source Code",
                    url: "http://www.stepblogging.com/"
                },
                follow: {
                    title: "Follow us",
                    url: "https://twitter.com/stepblogging"
                }
            },
            
            google: {                                
                plus: {
                    title: "Plus +1",
                    url: "http://www.stepblogging.com/"
                }
            },
                            
            linkedin: {
                url: "http://www.stepblogging.com/",                                
                share: {
                    title: "Share"
                }
            }
        });
    });
</script

Content which we want to lock:

<div id="form" class="result">
    <div class="to-lock-1" style="display: none;">
        <p>
StepBlogging is a Web Magazine for Business, Mobile, Technology.One of the best ways to Learn and share about Technology, Business, Finance, Telecom, Mobile.</p>
</div>
</div>

<p>StepBlogging is a Web Magazine for Business, Mobile, Technology.One of the best ways to Learn and share about Technology, Business, Finance, Telecom, Mobile.</p>

</div>