Web Design Tutorials: Photoshop, HTML, Flash, PHP

PHP Tutorials – How to use a Fan Gate on your Iframe Tab to Hide Content until Someone ‘Likes’ Your Facebook Fan Page

Posted on Oct 17th, 2011 in Php Tutorials | 2 comments

With how rapidly Facebook changes the way things look and operate, we have been doing the same when designing for Facebook. The February tutorial explains how to use a Fan Gate to reveal specific content only to those who ‘Like’ your FBML page. Since FBML has basically become extinct and will soon be phased out completely the new current method for creating Custom Fan Pages is the Iframe method. Creating a Fan Gate for the Iframe method differs greatly from the old FBML method. In this tutorial we will teach you the correct way to setup a Fan Gate for your Custom Facebook Iframe tab to show and hide content to Fan and Non-Fan users.

*PLEASE NOTE: The web is constantly changing and while we are currently using HTML5 on all of our projects not everyone is, for this reason we will still use the HTML that most are familiar with in our tutorials. If you are currently using HTML5, you can easily adapt this tutorial’s code to reflect the new and improved HTML5.

Before You Start

Before getting started on this tutorial you should currently already have a Custom Facebook Iframe Tab already set up for your Facebook Fan Page. If you do not already have one set up, complete our previous two tutorials ‘How to Set Up a Facebook Application for your Custom IFrame Tab’ and ‘How to Create a Custom Facebook IFrame Tab’. After completing these two tutorials you should have a fully functioning Facebook Iframe Tab and your code should look like the code below, which will be the basis for this tutorial.

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>YOUR PAGE TITLE HERE</title>
06 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
07
08 <script type="text/javascript">
09 window.fbAsyncInit = function() {
10 FB.Canvas.setSize();
11 }
12 // Do things that will sometimes call sizeChangeCallback()
13 function sizeChangeCallback() {
14 FB.Canvas.setSize();
15 }
16 </script>
17
18 <base target='_blank' />
19 </head>
20
21 <body>
22
23 <div id="container">
24
25   START YOUR CODING HERE
26
27 </div>
28
29 <div id="fb-root"></div>
30 <script src="http://connect.facebook.net/en_US/all.js"></script>
31 <script>
32 FB.init({
33 appId : 'INSERT YOUR APP ID HERE',
34 status : true, // check login status
35 cookie : true, // enable cookies to allow the server to access the session
36 xfbml : true // parse XFBML
37 });
38
39 window.fbAsyncInit = function() {
40 FB.Canvas.setAutoResize();
41 }
42 </script>
43
44 </body>
45 </html>

Step 1: Download and Setup Facebook PHP

In order to retrieve information from Facebook on whether or not the user is logged in and has ‘Liked’ your Facebook Fan Page you will need to download the current Facebook PHP file and set it up for reference. You can download the most current version here https://github.com/facebook/php-sdk, after you download the zip file, find the facebook.php file. Copy and paste this file alongside your current Iframe files. Next open up your index.php file, make sure your file has a .php extension, if it does not make sure to change it now. Copy the following code below and paste it at the absolute top of your file above the :

01 <?php
02 require 'facebook.php';
03
04 $app_id = "INSERT YOUR APP ID HERE";
05 $app_secret = "INSERT YOUR APP SECRET HERE";
06 $facebook = new Facebook(array(
07 'appId' => $app_id,
08 'secret' => $app_secret,
09 'cookie' => true
10 ));
11 ?>

You will need to change two items in the code, insert your Iframe tabs specific ‘APP ID’ and ‘APP SECRET’, these can be found by visiting your Facebook developer page. Also make sure that the path to the facebook.php file is correct.

Step 2: Set Up the PHP Variables

The next step is to set up 2 PHP variables that will retrieve the appropriate information from Facebook about the user’s status. Update the PHP code from Step 1 with the following two lines of code:

1 $signed_request = $facebook->getSignedRequest();
2 $like_status = $signed_request["page"]["liked"];

Your PHP code should now look like this:

01 <?php
02 require 'facebook.php';
03
04 $app_id = " YOUR APP ID";
05 $app_secret = " YOUR APP SECRET";
06 $facebook = new Facebook(array(
07 'appId' => $app_id,
08 'secret' => $app_secret,
09 'cookie' => true
10 ));
11
12 $signed_request = $facebook->getSignedRequest();
13 $like_status = $signed_request["page"]["liked"];
14 ?>

The first variable, $signed_request, simply checks whether or not the user who is visiting your Fan Page is actually signed into Facebook. The second variable, $like_status, takes the first variable and uses it to find out whether or not the signed in user has ‘Liked’ your Facebook Fan Page.

Step 3: Using the Variables in a Conditional Statement

We now know whether or not the current visitor ‘Likes’ your Fanpage, let’s now use this information to build a conditional statement to power the Fan Gate. Copy the following code and paste it inside your ‘container’ DIV in your HTML code:

1 <?php if ($like_status) { ?>
2 FAN CONTENT HERE
3 <?php } else { ?>
4 NONFAN CONTENT HERE
5 <?php } ?>

This is a very basic conditional statement; it simply states if the user has ‘Liked’ the page do this, otherwise do this instead. The content under ‘if ($like_status)’ is revealed to viewers that have become a fan of your page. If viewers have not become a fan of your page, then they will see the content under ‘else’. You should now have a fully functioning Fan Gate on your Custom Facebook Iframe Tab.

Bonus Step: Using a ‘Like’ Button on your Iframe Tab

When using a FanGate on your Facebook Iframe Tab, it is best to have the ‘Like’ button readily available within the design. This way your viewers do not have to scroll upward to find the ‘Like’ button. Thankfully, Facebook provides simple coding to add a ‘Like’ button to any website.

Get your Facebook ‘Like’ button plugin code here http://developers.facebook.com/docs/reference/plugins/like/. While filling out the necessary information to complete the look of your ‘Like’ button, be sure to use your Facebook Fanpage URL. After you grab the final code, place it anywhere in your Facebook Iframe Tab code where you want it to show up. Also, you do not have to include the Facebook JavaScript code that is referenced at the beginning since we are already communicating with Facebook through other methods.

Now that you have a ‘Like’ button inside your actual Facebook Iframe Tab coding there lies one very big problem with functionality. If a visitor uses the ‘Like’ button inside your actual code, only the ‘Like’ button updates and shows that the visitor has ‘Liked’ the page. This is a problem because the page needs to refresh on ‘Like’ to show the Fan content, which means the user has just ‘Liked’ your page but is still stuck viewing the Non-Fan content. So in order to get our ‘Like’ button synced up with our Fan Gate and make it all work properly we need to force the page to refresh when a user clicks the ‘Like’ button. Copy the following JavaScript code and paste it before the body end tag:

1 <script>
2 FB.Event.subscribe('edge.create',
3 function(response){
4 top.location.href = 'FACEBOOK URL TO REFRESH';
5 });
6 </script>

You will need to insert the full Facebook URL to the tab containing the ‘Like’ button so that the proper URL is refreshed and the Fan Content is shown. The URL should look something like this:

http://www.facebook.com/yourfanpage?sk=app_###############

Complete Code Including Bonus ‘Like’ Button JavaScript:

01 <?php
02 require 'facebook.php';
03
04 $app_id = " YOUR APP ID";
05 $app_secret = " YOUR APP SECRET";
06 $facebook = new Facebook(array(
07 'appId' => $app_id,
08 'secret' => $app_secret,
09 'cookie' => true
10 ));
11
12 $signed_request = $facebook->getSignedRequest();
13 $like_status = $signed_request["page"]["liked"];
14 ?>
15 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
16 <html xmlns="http://www.w3.org/1999/xhtml">
17 <head>
18 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
19 <title>YOUR PAGE TITLE HERE</title>
20 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
21
22 <script type="text/javascript">
23 window.fbAsyncInit = function() {
24 FB.Canvas.setSize();
25 }
26 // Do things that will sometimes call sizeChangeCallback()
27 function sizeChangeCallback() {
28 FB.Canvas.setSize();
29 }
30 </script>
31
32 <base target='_blank' />
33 </head>
34
35 <body>
36
37 <div id="container">
38
39 <?php if ($like_status) { ?>
40 FAN CONTENT HERE
41 <?php } else { ?>
42 NONFAN CONTENT HERE
43 <?php } ?>
44
45 </div>
46
47 <div id="fb-root"></div>
48 <script src="http://connect.facebook.net/en_US/all.js"></script>
49 <script>
50 FB.init({
51 appId : 'INSERT YOUR APP ID HERE',
52 status : true, // check login status
53 cookie : true, // enable cookies to allow the server to access the session
54 xfbml : true // parse XFBML
55 });
56
57 window.fbAsyncInit = function() {
58 FB.Canvas.setAutoResize();
59 }
60 </script>
61 <script>
62 FB.Event.subscribe('edge.create',
63 function(response){
64 top.location.href = 'FACEBOOK URL TO REFRESH';
65 });
66 </script>
67
68 </body>
69 </html>

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.

Source: daddydesign.com

you may also like:

  • PHP Tutorial – How to Create a Custom Facebook IFrame Tab
    Now that no new FBML Facebook tabs are able to be created, Facebook users must now use the IFrame method in order to add custom tabs to their Facebook Fan Page. IFrame tabs are definitely a bit more c...
  • PHP Tutorial – Banner Rotator
    In this tutorial we'll be creating a php banner rotator. What this basicly will be is a script that uses banners stored inside of a database table and shows a random one and this way creates a rotatio...
  • PHP Tutorial – Guestbook
    This is a beginner tutorial, but it is assumed that you already know some HTML and CSS. The tutorial will, kind of describe and explain my workflow in creating a guest book application. I will also ex...
  • PHP Tutorial – Using mod_rewrite to symfony backend
    So, I am building a web application with symfony framework and I wanted to redirect traffic from /admin/ to my backend.php application. It was unbelievably simple yet I was unable to find very much ...
  • PHP Tutorial – Currency Format
    If you program with PHP, you'll often need to format numbers to represent currency. This PHP tutorial will show you how to format money using PHP in the locale's international currency format. In...

2 Responses to “PHP Tutorials – How to use a Fan Gate on your Iframe Tab to Hide Content until Someone ‘Likes’ Your Facebook Fan Page”

  1. avatar Sean says:
    November 11, 2011 at 09:41

    I’m doing a print_r($signed_request) and getting nothing…

    http://www.facebook.com/affinitywedding?sk=app_137604106345171

    also, I seemed to need to include the base_facebook file because the facebook.php file was asking for it. Is that right?

  2. avatar FanPage For Commerce says:
    March 14, 2012 at 22:07

    Thank you for the good writeup. It in truth used to be a enjoyment account it. Look complex to far delivered agreeable from you! However, how could we keep in touch?

Leave a Reply

Powered by WordPress | Designed by Elegant Themes