Facebook Reveal Tab Tutorial

Jarrod Medrano Aug 11 2011

I am going to explain how to create a Facebook tab with like to reveal functionality from start to finish. You will need to have PHP and cURL installed on your server to make this work.

Step 1: Download facebook.php from the Facebook PHP SDK

You can get a copy of the PHP SDK here. Download and unzip this directory. In the src directory, you will find facebook.php.

Step 2: Create index.php

Index.php will contain the logic that determines whether or not your page is liked. If someone likes your page, it will point them at a page called liked.php. If they do not, it will point them to a page called notliked.php. Note that there is a place to enter your app id and app secret. We will come back to this later.

require 'facebook.php';

$app_id = "APP_ID";
$app_secret = "APP_SECRET";
$facebook = new Facebook(array( 'appId' => $app_id, 'secret' => $app_secret, 'cookie' => true
));

$signed_request = $facebook->getSignedRequest();

$page_id = $signed_request["page"]["id"];
$page_admin = $signed_request["page"]["admin"];
$like_status = $signed_request["page"]["liked"];
$country = $signed_request["user"]["country"];
$locale = $signed_request["user"]["locale"];

// If a fan is on your page
if ($like_status) {
$a = file_get_contents("liked.php");
echo ($a);
} else {
// If a non-fan is on your page
$a = file_get_contents("notliked.php");
echo ($a);
}

Step 3: Create the unliked page

The first step is to create your poor lonely, unliked php page. This is a simple html page with an image. You can make it as complicated as you like.

Create a file called notliked.php and insert this code:

<?php ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>This Page is not Liked</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />
</head>
<body>

<img src="http://i.imgur.com/JdEeS.jpg" title="Like this page" />

</body>
</html>

Step 4: Create the Liked Page

This is the pretty and popular page. It includes some javascript and css to prevent facebook from showing scrollbars on your iframe. Note that towards the bottom of the page, there is a place to enter your App Id. We will come back to that later.

<?php ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>This Page is Liked!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />
<style type="text/css">
body {
overflow:visible;
overflow-x:hidden;
}
</style>
<script type='text/javascript'>
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1000 });
}
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1000 });
}
</script>
</head>
<body>

<img src="http://i.imgur.com/WL84m.jpg" title="Liked Page" />

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
</body>
</html>

Step 5: Upload your files to your website.

Your folder structure should now look like this.
Remember that your website must have PHP and the CURL extension installed. Make sure that your site is using index.php as the homepage of that directory

Step 6: Create your facebook Tab

Go to https://developers.facebook.com/apps and click Create New App.

Step 7. Copy your App Id and App Secret

The next step is to copy your app id and app secret to index.php. and to the bottom of liked.php

Step 8: Enter privacy policy url

Enter privacy policy. Your app must have a privacy policy.

Step 9: Enter url and domain.

Click Web, and set the url and domain. The url should be the path to your index.php.

The domain is the domain that it is hosted on.

Step 10: Enter canvas urls

Click ‘On Facebook’ in the left.

Set the canvas page, you can name this whatever.
Set Canvas URL, this should be the path to your index.php file.
Set Secure Canvas URL. It should be the same as canvas url but with https:// instead of http://
Set tab name to whatever you want.
Set Tab URL this is the same as the canvas url but you actually link to index.php.
Set Secure Tab URL to the same as the tab url but with https:// instead of http://

Step 11: Click View app profile page

Step 12: Click add to my page

Find your page, and click Add to Page.

Step 13: Your app will now appear on the left of the page you added to.

Step 14: Congratulations

The facebook Like Gate should now be added to your page. Just click the like button and it should work.

tags : Facebook Social Media

Jarrod Medrano

Front-End Developer

Jarrod Medrano is a front-end developer specializing in the creation of beautiful user interfaces. He has lent his extensive experience to Portent, Inc. for the past 8 years. Read More

2 Comments

Pablo Aug 12 2011, 05:33:36

Very good post! It is the first tutorial that I´ve seen to create facebook applications. Very good explanation. Thank you
Neil Aug 26 2012, 03:43:19

Thanks for this. Got it working, however, in step 5 I also needed to upload base_facebook.php from the library.

Comments are closed.