facebook twitter flickr rss

Rewarding Those That Like You (on Facebook) - April 15th, 2012

Facebook Like Button

A client that I have been working for had an interesting request for me a couple weeks ago. He wanted to create a campaign for his Facebook page where an individual would get rewarded with a free music download for liking the page. This was already accomplished from the Facebook page, but I was curious if such a thing could be done directly from a web site, since Facebook’s button is generated through Javascript code.  What I really wanted to do was create a page redirect to this free music download page once the Like button was clicked.  Here are the steps I’ve done to make this work:

  1. Create an new application and get an app id by going here. Get started and follow the steps after clicking “Create New App”.
  2. Generate the Facebook button code by going here. After you’ve entered in the page you are putting the like button on, click on the “Get Code” button.
  3. When the box pops up, I selected “XFBML”. Also make sure to select the application you created in step one next to “This script uses the app ID of your app:”. Follow the steps that Facebook provides. You will need to add “xmlns:fb=”http://ogp.me/ns/fb#” to your <html> tag.
  4. After the first body tag, place the code that Facebook suggests. This is what I placed:
    <body>
    <div id="fb-root"></div>
    <script>
       (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=Application ID that was created in the first step";
          fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>


  5. Don’t forget to add the Like button where you want it on the page. This code can be placed anywhere you want to appear on the page:
    <fb:like href="The address of the page the button sits on" send="true" width="450" show_faces="true"></fb:like>

  6. Now that all the Facebook code has been added to the page, you’ll need to add a little bit of code for the redirect. Looking at the script that was placed right before the body tag add these lines as shown in bold:
    <body>
    <div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
       FB.init({appId: 'Application ID that was created in the first step', status: true, cookie: true,xfbml: true});
       FB.Event.subscribe("edge.create", function(targetUrl) {
         window.location.href = "The address of the page you want to redirect to.";
       });
       FB.Event.subscribe("edge.remove", function(targetUrl) {
         console.log('edge.remove');
       });
    };

    (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=Application ID that was created in the first step";
          fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>



No Comments

No comments yet.


RSS feed for comments on this post.
TrackBack URI


Leave a comment



Posted in Web Media | No Comments »