FB 점유율은 할인 코드를 공개하는

Question

나는 다음과 같은 기능으로 내 제품에 대한 공유 버튼을 만드는 방법을 알고 싶습니다

: 사용자가 공유하고 공유를 만든 후, 내가 원하는하기 버튼을 클릭하면

사용자가 사용할 수있는 할인 쿠폰을 표시하십시오.

Answer 1

아마도 다음과 같이하면됩니다.

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 

<style type="text/css"> 
    .lnkstyle { 

     -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; 

    } 
    .lnkstyle: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; 
    } 
    .lnkstyle:active { 
     position:relative; 
     top:1px; 
    } 

    .cpncode { 

     -moz-box-shadow: 0px 10px 14px -7px #3e7327; 
     -webkit-box-shadow: 0px 10px 14px -7px #3e7327; 
     box-shadow: 0px 10px 14px -7px #3e7327; 

     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352)); 
     background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%); 
     background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%); 
     background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%); 
     background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%); 
     background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%); 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0); 

     background-color:#77b55a; 

     -moz-border-radius:18px; 
     -webkit-border-radius:18px; 
     border-radius:18px; 

     border:1px solid #4b8f29; 

     display:inline-block; 
     color:#ffffff; 
     font-family:arial; 
     font-size:13px; 
     font-weight:bold; 
     padding:6px 12px; 
     text-decoration:none; 

     text-shadow:0px 1px 0px #5b8a3c; 

    } 
    .cpncode:hover { 
     cursor:pointer; 
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a)); 
     background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%); 
     background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%); 
     background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%); 
     background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%); 
     background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%); 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0); 

     background-color:#72b352; 
    } 
    .cpncode:active { 
     position:relative; 
     top:1px; 
    } 

    </style> 

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

<script type="text/javascript"> 
$(document).ready(function() { 

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

     $('#ShareForcouponcode').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 
       $('#ShareForcouponcode').fadeOut();  
       $('#couponcode').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')); 
</script> 

<div> 
<a id="ShareForcouponcode" class="lnkstyle">Share this to get discount code</a> 
</div> 

<div id="couponcode" style="display:none;"> 
Your discount code here. 
</div>