To add This Social Locker widget in your blogger please follow the steps below carefully
  • Open your Blogger Blog Dashboard
  • Go to template section
  • Open Edit HTML section to integrate the code in blogger template
  • Now find the Code and paste the below code under/below it
<link href='https://googledrive.com/host/0B34mC1Fbl7PmQnFySC1jaGs1OUU/tronicflow-social-locker-css.css' rel='stylesheet' type='text/css'/>
  • Then You have to put below code end of the blog post in HTML section where you want to show your Social Locker widget
<article id="default-usage">
    <div class="to-lock" style="display: none;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
   
    <br />
<div style="text-align: justify;">
THIS IS YOUR HIDDEN TEXT! </div>
<!--Hidden Content Ends -->
   
    </div>
</article>
    <br />
<script src="https://googledrive.com/host/0B34mC1Fbl7PmdFFLRVVvOG5iNkk" type="text/javascript"></script>
   
    <script>
    jQuery(document).ready(function ($) {
    $("#default-usage .to-lock").socialLock({
   
    text: {
    header: "THE CONTENT IS LOCKED!",
    message: "To unlock the content, Please use one of the social buttons below. Thank you for your support!"
    },
   
    style: "ui-social-locker-secrets",
    buttons: {
    order: ["twitter", "facebook", "google"]
    },
   
    // twitter options
    twitter: {
    url: "HTTP://YOURSITE.COM",
    text: "TWEET TEXT"
    },
   
    // facebook options
    facebook: {
    url: "http://www.facebook.com/yourpage",
    appId: "337462366354755"
    },
   
    google: {
    url: "YOUR DOMAIN OR POST URL"
    }
    });
    });;;;
         
    </script> 


 Social Locker Widget Customization

Change All Above Highlighted code with your own codes.
  • THIS IS YOUR HIDDEN TEXT! : You can use any hidden text or HTML code here which will be show when some one like your social site / pages.
  • HTTP://YOURSITE.COM :  Replace it with your site URL or post URL.
  • TWEET TEXT : Put Your site meta content here so the people see and they tweet it on twitter.
  • yourpage : Replace it with your facebook fan page name .
  • YOUR DOMAIN OR POST URL:  Your post URL or domain name to put here .

After customization publish your post and watch out your social locker is working awesome in your blogger.

Post a Comment

 
Top