Topic-icon FB share to reveal discount code

Active Subscriptions:

None
11 years 9 months ago #46739 by sortby
Hello Alex,
I would like to know how I can create FB share button with the following functionality:
When the user clicks a button to share and after the share is made, I want to display a discount coupon that the users can use.
I have tried to use this code ... but it isn't working, maybe something is missing or hopefully you have another solution.
Thanks,
sortby


[In the code below the part :
method: 'feed',
name: 'Title',
link: 'www.facebook.com'
has to be personalized in some way?]

<script type='text/javascript' src='http://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      : 'MY_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 = "http://connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=MY_APP_ID&version=v2.0";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
</script>
<script src="http://connect.facebook.net/en_US/all.js"></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>
The topic has been locked.
Support Specialist
11 years 9 months ago #46746 by alzander
We won't be making a "Like to Reveal" feature at any point. Facebook has always frowned upon the idea, and recently changed their platform policies to specifically dis-allow such use of the Like button. You can read more:
developers.facebook.com/blog/post/2014/08/07/Graph-API-v2.1/
Changes To Platform Policy

You must not incentivize people to use social plugins or to like a Page. This includes offering rewards, or gating apps or app content based on whether or not a person has liked a Page. It remains acceptable to incentivize people to login to your app, checkin at a place or enter a promotion on your app's Page. To ensure quality connections and help businesses reach the people who matter to them, we want people to like Pages because they want to connect and hear from the business, not because of artificial incentives. We believe this update will benefit people and advertisers alike.

If Facebook finds you violating their policies, they can ban your apps/sites from using their social widgets. That's not something we can implement due to the severity of the problems it could cause our users, and I wouldn't recommend you do it either.

I hope that helps, even if it's not what you were looking to hear.

Alex
The topic has been locked.