With some jQuery trick, you can protect some contents on your site until your visitor give response such as Facebook Like, follow your Twitter etc ..

Here are the code:

Include jQuery and Plugin:

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

And, 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: "YOUR_FB_APP_ID",
                like: {
                    title: "Like us",
                    url: "https://www.facebook.com/YOUR_FB_PAGE_ID" // link to like in Facebook button
                }
            },

            twitter: {
                tweet: {
                    title: "Tweet", 
                    text: "YOUR_TWEETS", // tweet text
                    url: "http://www.YOUR_WEBSITE/" //tweet link
                },
                follow: {
                    title: "Follow us", 
                    url: "http://twitter.com/YOUR_TWITTER_USER" // Twitter profile to follow 
                }
            },

            google: {                                
                plus: {
                    title: "Plus +1",
                    url: "http://www.YOUR_WEBSITE/" // Google plus link for +1
                }
            },

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

CSS code 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>

 

Content div replaced with social buttons in HTML:

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

 

Download Social-Locker,js at here.