Facebook API: Reward Users for liking your page

Facebook API: Reward Users for liking your page

Filed under News Blog, Tutorials

Written By : Kyle Bahr

Social interaction can be key to promoting your product, brand or service.  EnlightenMental Productions has developed a useful “facebook like button reward” script to allow you to reward guests with a link or promotional code when they like your page.  This script is in very early development, and will most likely improve as we begin to deploy it to client sites.

How it works

The idea is that you can offer users a secret link, hidden content, or promotional code when they “like” your page or URL. The javascript displays the hidden content after they have liked the page using the fb:like markup.

This code requires the XFBML markup for the Facebook Social Plugin (Like Button).

Include your jQuery / jQuery UI Libraries

Jquery is used for the majority of the animation and interaction of the like button reward.  We also included the jQuery UI libraries so we could animate(shake) the login button to make it more apparent to users that they need to login first.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

The Javascript

The script involved is all based on the Facebook API for Event.Subscribe and the Facebook Javascript SDK.


<script type="text/javascript">
 // define your facebook Application ID
 // be sure to use your own unique application ID
 var app_id = '123456789101112131415161718';

 // include the main Facebook javascript 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#xfbml=1&appId="+app_id;
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

 // initialize
 window.fbAsyncInit = function() {
 FB.init({
   appId : app_id, // App ID
   status : true, // check login status
   cookie : true, // enable cookies to allow the server to access the session
   xfbml : true // parse XFBML
 });

 // hook into the Event.subscribe to display the hidden content after the user likes the page
 FB.Event.subscribe('edge.create',
   function(response) {
     $('#before').slideUp();
     $('#after').slideDown();
   }
 );

 // if login is required, refresh the page after they have successfully authenticated their account
 FB.Event.subscribe('auth.login', function() {
   window.location.reload();
 });

 // get the status of the Facebook user (are they logged in?)
 FB.getLoginStatus(function(response) {

   if (response.status === 'connected') {
     
     // user is logged in and has authenticated your app
     var uid = response.authResponse.userID;
     var accessToken = response.authResponse.accessToken;

   } else if (response.status === 'not_authorized') {
     
     // user is logged in but has not authenticated your app
     console.log('Logged in no auth');

   } else {

     // user is not logged in
     // disable the like button and display the login link to force a login before liking
     $('#login').fadeIn();
     $('#login-mask').fadeIn();
     console.log('NOT Logged in');

   }
 });
     // user is trying to click the like button when not logged in,
     // animate it to get their attention
     $('#login-mask').live('click',function() {
     $('#fb-login').effect('shake', { times:3 }, 300);
   });
 };

</script>

The HTML


<div id="before">
  <h2 id="status">Reward yourself for liking us on Facebook</h2>
  <p>Click the like button below to receive your promotional code.</p>
  <h3>Try it out:</h3>
</div>
<div id="after">
  <h2 id="status">Thanks for liking us!</h2>
  <p>We've got warm fuzzies all over the place now!</p>
  <p>User Promotional Code <strong>"FUZZY"</strong> to get your additional 10% discount!</p>
</div>
<div id="fbcontainer">
  <fb:like href="http://www.enlightenmental.com" send="false" layout="box_count" width="450" show_faces="true" font="verdana"></fb:like>
  <strong id="login">
  <span id="login-mask"></span>
  <a id="fb-login" href="#" onclick="FB.login()">Please Login with Facebook first!</a>
  </strong>
</div>

Facebook Like Button Reward Demo

Written By : Kyle Bahr

With nearly ten years experience in digital media, graphic design, front-end development and creative direction, Kyle Bahr has spent the last several years growing an online presence and portfolio with EnlightenMental Productions with the hope to build continued success online and in life. A strong...

has written 9 articles

One Response to “Facebook API: Reward Users for liking your page”

  1. Willy says:

    Hi,

    I use your html source code and paste on my website but is not working, it show all the code on my live website only. Pls help.