JSFiddle - React, Tailwind, and code Playground

HTML

<div>
 <a id="ShareToDownload" class="sTD">Share this to download</a>
</div>

<div id="downloadSection" style="display:none;">
<a href="http://example.test/file.zip" class="dFile">Click To Download!</a>
</div>

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

CSS

.sTD {
        
        -moz-box-shadow:inset 0px 5px 14px -7px #276873;
        -webkit-box-shadow:inset 0px 5px 14px -7px #276873;
        box-shadow:inset 0px 5px 14px -7px #276873;
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
        background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
        
        background-color:#599bb3;
        
        -moz-border-radius:22px;
        -webkit-border-radius:22px;
        border-radius:22px;
        
        display:inline-block;
        color:#ffffff;
        font-family:Trebuchet MS;
        font-size:12px;
        font-weight:bold;
        padding:12px 11px;
        text-decoration:none;
        
        text-shadow:0px 0px 0px #3d768a;
        
    }
    .sTD:hover {
        cursor:pointer;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
        background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
        background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
        
        background-color:#408c99;
    }
    .sTD:active {
        position:relative;
        top:1px;
    }


/* --- Download Button...

JavaScript

$(document).ready(function() {
	  
	window.fbAsyncInit = function() {
 FB.init({
		  appId      : '553435274702353',
		  status     : false,
		  xfbml      : false,
		  logging	 : false									
		});
		
		FB.Canvas.setSize({ width: 640, height: 200 });

		$('#ShareToDownload').on('click',function(e) {
			e.preventDefault();
			FB.ui(
			 {
			   method: 'feed',
			   name: 'Nice Ebook',
			   link: 'https://www.facebook.com/photo.php?fbid=584800054934276',
               picture: 'http://ecx.images-amazon.com/images/I/51Wo67gFieL.jpg?1'
			 },
			 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/all.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));