Purpose: The purpose of this step-by-step guide to allow customers who are not skilled at web technologies to install the Like 2 Unlock plugin correctly.

I. Scrips and Styles

In order to use the plugin you should include some js and css files into your page where you want to install the locker.

Step #1. Upload the folders: css, js, img – from the archive you got on your server (for example, via FTP). Place the ones in any catatalog that, as you consider, is convinient for you.

Step #2. Open to edit the file on the server that provides content of the <head>…</head> tags of the page where you want to install the plugin.

Check whether or not the page uses jQuery. Try to find a line of code (inside the <head> tag) that is similar to:

<script scr="/js/jquery.min.js"></script>

If you have found the one, go to the next step.
If there isn’t any, you should include jquery into you page. To make it add the line below into the <head> tag:

<script src="{jspath}/jquery.min.js"></script>

where {jspath} is a relative or absolute path to js folder that you uploaded earlierly. For example, your domain is http://example.com and you put the folders at the root of your site, then {jspath} is “http://example.com/js/”

Step #3. Add plugin assets into the <head> tag after the jquery inclusion that you found/added on the previous step:

<script src="{jspath}/jquery.op.like2unlock.min.js"></script>
<link rel="stylesheet" href="{csspath}/jquery.op.like2unlock.min.css" />

where {jspath} and {csspath} are relative or absolute paths to js and css folders that you uploaded earlierly.

At this moment thetag of your page must look like the markup below:

<head>
     ...
     <script scr="/js/jquery.min.js"></script>
     <script src="/js/jquery.op.like2unlock.min.js"></script>
     <link rel="stylesheet" href="/css/jquery.op.like2unlock.min.css" /> 
     ...
</head>

II. Usage

Step #1. Decide what content you want to lock. Open to edit the file on the server that provides that content.

Assume that the content to lock is a download link of the form:

<a href="http://www.example.com/file.zip">Download</a>

Wrap the one with a <div> tag and set an unque id. For example:

<div id="download-link">
     <a href="http://www.example.com/file.zip">Download</a>
</div>

Step #2. Again open the file where thetag is placed. Add the following piece of code after the inclustion of the plugin assets:

<script type="text/javascript">

// this is an obligatory wrapper, it runs when a page is loaded   
jQuery(document).ready(function ($) {

  $("#download-link").toLike({

    // a website url or a fanpage to like, 
    // leave it empty to use a current page
    url: "http://onepress-media.com/portfolio",

    // extra css class that will be added to the locker           
    // ui-locker-facebook-style is one of the preset styles
    style: "ui-locker-facebook-style",

    facebook: {
        // your facebook app id here,
        // get it here: https://developers.facebook.com/apps
        appId: "427542137301809"
    }
  });        
});

</script>

Leave a Reply

Your email address will not be published. Required fields are marked *