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>