Facebook "Share to Download"

A simple demo for "How Facebook Social Share" works HINT: the "Download File" won't download anything because the href attribute set to #

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container text-center">
    <div class="panel panel-default">
       <div class="panel-body">
            <p class="p-share">This file is locked. To unlock and download it, share it</p>
            <p class="p-unlocked">Thanks for sharing, the file is unlocked and ready for download</p>
            <p class="p-locked">In order to download this file, you need to share it</p>
            
            <a class="btn btn-default btn-fb" href="#" id="facebook-share">
                <span class=" fa fa-facebook-official fa-lg"></span>  Share
            </a>
            <a class="btn btn-default btn-dl" href="#" id="download-file">
                <span class="fa fa-cloud-download fa-lg"></span>  Download
            </a>
    </div>
</div>
<div id="fb-root"></div>

CSS

body, p, a {
    font-family:"Lato", Calibri, Arial, sans-serif;
}
.container > .panel {
    text-align: center;
    margin:40px auto;   
}
.btn-fb,
.btn-fb:hover,
.btn-fb:active,
.btn-fb:focus,
.btn-fb:active:hover,
.btn-fb:active:focus {
    background:#4080ff;
    border: 1px solid #4080ff;
    color:#fff;
}
.btn-dl,
.btn-dl:hover,
.btn-dl:active,
.btn-dl:focus,
.btn-dl:active:hover,
.btn-dl:active:focus {
    background:#8BC34A;
    border: 1px solid #8BC34A;
    color:#fff;
}
.btn-dl {
    background:#6DC118;
    display: none;
}
.p-locked,
.p-unlocked {
  display:none;
}

JavaScript

/**
 * Copyright 2014 Facebook "Share to Download" by Adam Azad (AdamA)
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 **/
$(document).ready(function () {

     var btnShare = $('#facebook-share'),
         btnDownload = $('#download-file'),
         txtShare = $('.p-share'),
         txtLocked = $('.p-locked'),
         txtUnlocked = $('.p-unlocked');

      window.fbAsyncInit = function() {
        FB.init({
          appId      : '1692823324355327',
          version    : 'v2.7'
        });
      };   
    btnShare.on('click', function(){
      txtShare.add(txtLocked).slideUp();
      /** display the share dialog and wait for the response **/
      FB.ui({
            display: 'popup',
            method:  'share',
            href: 'https://developers.facebook.com/docs/',
            },
            /** our callback **/
            function(response) {
               /** debug **/
               console.log(typeof response);
               console.log(response);
               console.log(response instanceof Array);
    			     if (response != 'undefined' && response instanceof Array) {
    			        /** the user shared the content on their Facebook, go ahead and continue to download **/
                         btnShare.add(txtShare, txtUnlocked).slideUp(function(){
                             btnDownload.add(txtUnlocked).slideDown();
                         });
    			     } else {
    			        /** the cancelled the share process, do something, for example emphasize **/
                  txtLocked.slideDown();
    				 }
            });
        
     });
});

// 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'));