Facebook Reveal Tab Tutorial

Social Media

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.

facebookYour 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

create-new-appGo to https://developers.facebook.com/apps and click Create New App.

Step 7. Copy your App Id and App Secret

app-idThe 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

privacy-policyEnter privacy policy. Your app must have a privacy policy.

Step 9: Enter url and domain.

url-domainClick 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.

canvas-urls

  • 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

view-app-profile-page

Step 12: Click add to my page

add-to-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.

added

Step 14: Congratulations

Screen shot 2011-08-09 at 2.08.17 PMThe facebook Like Gate should now be added to your page. Just click the like button and it should work.

Screen shot 2011-08-09 at 2.09.15 PM

tags : FacebookSocial Media

related articles

2 Comments

  1. Pablo

    Very good post! It is the first tutorial that I´ve seen to create facebook applications. Very good explanation. Thank you

  2. Neil

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

Comments are closed.