JSFiddle - React, Tailwind, and code Playground

by Adam Azad

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="container">
    
    <p>This file is locked, to unlock and download it, share it on Facebook</p>
    
    <a class="fsl fsl-facebook" href="#" id="facebook-share">
       <span class="fa-facebook fa-icons fa-lg"></span>
       <span class="sc-label">Share on Facebook</span>
    </a>

    <a class="fsl content-download" href="#" id="download-file">
       <span class="fa-download fa-icons fa-lg"></span>
       <span class="sc-label">Download File</span>
    </a>
    
</div>

<div id="fb-root"></div>

CSS

* {
    margin: 0px;
    padding: 0px;
    text-decoration:none;
    -moz-transition: all 0.1s ease 0s;
    -o-transition: all 0.1s ease 0s;
    -webkit-transition: all 0.1s ease 0s;
    transition: all 0.1s ease 0s;
}
body {
    background:rgb(249, 249, 249);
    font-family:"Lato", Calibri, Arial, sans-serif;
}
.container > p {
    text-align: center;
    margin:40px auto;   
}
.fsl, content-download {
    display: table;
    margin:40px auto;
    padding: 6px;
    border-radius: 2px;
    opacity: 0.6;
}
.fsl-facebook {
    background:#14A0E9;
}
.content-download {
    background:#6DC118;
    display: none !important;
}
.content-download.unlock {
    display:block;
}
.fsl span {
    color: #FFF;
}
.fa-icons {
    font-family: FontAwesome;
    font-size: 20px;
    color: #FFF;
}
.fsl:hover {
    opacity: 1;
}
.hidden {
    display:none;
    opacity:0;
}

JavaScript

$(document).ready(function () {

    window.fbAsyncInit = function () {
        FB.init({
            appId: '553435274702353',
            status: false,
            xfbml: false,
        });

        FB.Canvas.setSize({
            width: 640,
            height: 200
        });

        $('#ShareToDownload').on('click', function (e) {
            e.preventDefault();
            FB.ui({
                method: 'feed',
                name: 'Title',
                link: 'https://www.facebook.com/'
            },

            function (response) {
                if (response && response.post_id) {
                    // the download link will be activated
                    $('#ShareToDownload').fadeOut();
                    $('#downloadSection').fadeIn();
                } else {
                    // do nothing or ask the user to share it
                }
            });
        });
    };

});

// Load the SDK
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));