Pages Menu
TwitterRssFacebook
Categories Menu

Posted by on Jan 9, 2012 in Blog, Featured, Technology | 14 comments

Build a Facebook Page that Changes When Like Is Clicked

Build a Facebook Page that Changes When Like Is Clicked

facebookA Facebook App and Custom Welcome Tab for Your New Page Visitors

Facebook is a great place for many small businesses to engage with existing customers and to find prospective new customers.  This article will walk you through creating your own custom tab on Facebook that changes when the visitor clicks the Facebook Like Button, a type of a Facebook page called a Reveal Tab.

This article is a bit on the technical side, but if you can handle some basic HTML code you can probably work your way through it.

  • You’ll need a program that lets you edit HTML, such as Dreamweaver or iWeb.
  • You might also want to have access to a graphics editor such as Photoshop or GIMP to do the graphics for your own page.
  • You need to have the ability to host web pages securely via HTTPS, because Facebook requires secure pages
  • I’m assuming that you’ve already created your Facebook Page itself and are looking to add a Custom Welcome Tab to it.

Four web pages to build a Facebook Page

There are four pages that you will create on your own server to make up the reveal tab.  For this demo, they will be named:

  • index.php
  • facebook.php
  • prelike.php
  • reveal.php

Create a blank document with each of these names in the location where you are going to host them publicly.

You will also create an App on Facebook’s Developer website that integrates these pages with your Facebook page for your business.

In very short form, here’s the purpose of each file:

Index.php

This page is the center of the Facebook page.  It links to the Facebook App to enable the Facebook page to put the right information on the page depending on whether the visitor has clicked Like or not.

Facebook.php

This is what is called the Facebook “SDK” or Software Development Kit.  It’s code that Facebook has provided you to enable these sorts of custom applications.  All you’ll do is cut and paste it in and save the page in the right directory.

Prelike.php

This is the content that will be displayed to the visitor before they click the Like button

Reveal.php

This is the content that will be displayed to the user after they click the Like button.

Note:

The two files “prelike.php” and “reveal.php” do not require that the files be in PHP, you could make them HTML or anything else you’d like and that your webserver can serve — but index.php and facebook.php DO require PHP to function properly.

 

Download Post Files

All of the files in this post are in this zip file for your convenience:  code.zip

 

Create a Facebook App

1. The first step in the process is to create a Facebook application.  Go to http://developers.facebook.com.  Select “Apps” along the top menu bar.

facebook developers home

http://developers.facebook.com

 

2.  Click on “Create New App” at the top right

Create a new Facebook app

Create a new Facebook app

 

3.  Grant Facebook permissions to give you access to the Developer tools, if you haven’t already done so:

Grant Facebook permission

Click Allow

 

4.  A popup will ask you to name your new app and give it a namespace.  The App Display Name will be shown to the end users of your application, so make it a friendly name that is descriptive.  The namespace is not shown to users.  Both names must be unique.

Name your new Facebook app

Name the new Facebook app

Click that you agree to the Facebook Platform Policies and click “Continue”.

 

4. You’ll be taken to your new a page that allows you to edit your brand new Facebook app settings, that looks like this:

Edit Facebook app settings

 

5.  Lower down on the edit page, check the box for “Page Tab”

Facebook app page tab settings

Facebook app page tab settings

There are three fields that must be filled in on Page Tab:

  • Page Tab Name:  This is what the user will see on the left menu on your Facebook page.
  • Page Tab URL:  This is where the index.php page is hosted.  May be non-secure
  • Secure Page Tab URL [Required]: Must be an HTTPS address.  Where the index.php page is located.

If you created the pages as requested at the beginning of the post, you can put those URLs in from where you have them hosted.

One other note on where these pages you create live.  It personally drives me insane when a company creates a fancy Facebook welcome page, then doesn’t do everything they can to make it load quickly.  I like putting the images, especially larger images on Amazon’s S3 service, and cacheing the site in every way possible to optimize the quick serving of this page.

If you haven’t used anything like that before, exhale.  All it is is a big hard drive in the sky (well, LOTS of hard drives scattered worldwide).  Using S3 will allow you to have pages that are secure, and will also be lightning-fast for the user.  At one point they would even give you something like 40GB of transfer per month for free, too, so your costs should be next to nothing.

Now that you’ve set up the app and entered your index page, click Save Changes and…let’s add the new Facebook App to your Facebook Page.

Add App to Your Facebook Page

To do this, you simply use the following URL (see this page for more info):

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

where YOUR_APP_ID and YOUR_URL can be found in your app settings.  (Specifically, YOUR_URL refers to the “Secure Page Tab URL” field).  If you do this correctly, the following popup will appear.  Choose your desired page from the drop down menu and click “Add Page Tab”.

Add To Page Dialog

Add To Page Dialog

 

Now let’s create the pages.

 

The Code

Create a new web page in your HTML editor and name it index.php.  Paste the code below into it:

Index.php


// Refer to http://16wells.com/build-a-reveal-tab-for-your-facebook-page for configuration

require 'facebook.php';

$app_id = "YOUR_APP_ID";
$app_secret = "YOUR_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"];

// The following statement does a test of $like_status and chooses which page to display to the visitor
if ($like_status) {$a = file_get_contents("reveal.php");
echo ($a);
}
else {$a = file_get_contents("prelike.php");
echo ($a);
}

?>

Save the file and upload it to the folder where you’ll be hosting them.

Prelike.php

Same drill…name this one prelike.php…code below:


Reveal.php

Create another new web page in your HTML editor and name it, reveal.php.  Here’s the code:



Facebook.php

And create and name the final file in the group, facebook.php.  Paste the code below into it. (This one’s really long…sorry…it’s the Facebook code to handle the interaction between your pages and Facebook) Remember you can download all of these files here:


*/
class FacebookApiException extends Exception
{
/**
* The result from the API server that represents the exception information.
*/
protected $result;

/**
* Make a new API Exception with the given result.
*
* @param Array $result the result from the API server
*/
public function __construct($result) {
$this->result = $result;

$code = isset($result['error_code']) ? $result['error_code'] : 0;

if (isset($result['error_description'])) {
// OAuth 2.0 Draft 10 style
$msg = $result['error_description'];
} else if (isset($result['error']) && is_array($result['error'])) {
// OAuth 2.0 Draft 00 style
$msg = $result['error']['message'];
} else if (isset($result['error_msg'])) {
// Rest server style
$msg = $result['error_msg'];
} else {
$msg = 'Unknown Error. Check getResult()';
}

parent::__construct($msg, $code);
}

/**
* Return the associated result object returned by the API server.
*
* @returns Array the result from the API server
*/
public function getResult() {
return $this->result;
}

/**
* Returns the associated type for the error. This will default to
* 'Exception' when a type is not available.
*
* @return String
*/
public function getType() {
if (isset($this->result['error'])) {
$error = $this->result['error'];
if (is_string($error)) {
// OAuth 2.0 Draft 10 style
return $error;
} else if (is_array($error)) {
// OAuth 2.0 Draft 00 style
if (isset($error['type'])) {
return $error['type'];
}
}
}
return 'Exception';
}

/**
* To make debugging easier.
*
* @returns String the string representation of the error
*/
public function __toString() {
$str = $this->getType() . ': ';
if ($this->code != 0) {
$str .= $this->code . ': ';
}
return $str . $this->message;
}
}

/**
* Provides access to the Facebook Platform.
*
* @author Naitik Shah
*/
class Facebook
{
/**
* Version.
*/
const VERSION = '2.1.2';

/**
* Default options for curl.
*/
public static $CURL_OPTS = array(
CURLOPT_CONNECTTIMEOUT => 10,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_TIMEOUT => 60,
CURLOPT_USERAGENT => 'facebook-php-2.0',
);

/**
* List of query parameters that get automatically dropped when rebuilding
* the current URL.
*/
protected static $DROP_QUERY_PARAMS = array(
'session',
'signed_request',
);

/**
* Maps aliases to Facebook domains.
*/
public static $DOMAIN_MAP = array(
'api' => 'https://api.facebook.com/',
'api_read' => 'https://api-read.facebook.com/',
'graph' => 'https://graph.facebook.com/',
'www' => 'https://www.facebook.com/',
);

/**
* The Application ID.
*/
protected $appId;

/**
* The Application API Secret.
*/
protected $apiSecret;

/**
* The active user session, if one is available.
*/
protected $session;

/**
* The data from the signed_request token.
*/
protected $signedRequest;

/**
* Indicates that we already loaded the session as best as we could.
*/
protected $sessionLoaded = false;

/**
* Indicates if Cookie support should be enabled.
*/
protected $cookieSupport = false;

/**
* Base domain for the Cookie.
*/
protected $baseDomain = '';

/**
* Indicates if the CURL based @ syntax for file uploads is enabled.
*/
protected $fileUploadSupport = false;

/**
* Initialize a Facebook Application.
*
* The configuration:
* - appId: the application ID
* - secret: the application secret
* - cookie: (optional) boolean true to enable cookie support
* - domain: (optional) domain for the cookie
* - fileUpload: (optional) boolean indicating if file uploads are enabled
*
* @param Array $config the application configuration
*/
public function __construct($config) {
$this->setAppId($config['appId']);
$this->setApiSecret($config['secret']);
if (isset($config['cookie'])) {
$this->setCookieSupport($config['cookie']);
}
if (isset($config['domain'])) {
$this->setBaseDomain($config['domain']);
}
if (isset($config['fileUpload'])) {
$this->setFileUploadSupport($config['fileUpload']);
}
}

/**
* Set the Application ID.
*
* @param String $appId the Application ID
*/
public function setAppId($appId) {
$this->appId = $appId;
return $this;
}

/**
* Get the Application ID.
*
* @return String the Application ID
*/
public function getAppId() {
return $this->appId;
}

/**
* Set the API Secret.
*
* @param String $appId the API Secret
*/
public function setApiSecret($apiSecret) {
$this->apiSecret = $apiSecret;
return $this;
}

/**
* Get the API Secret.
*
* @return String the API Secret
*/
public function getApiSecret() {
return $this->apiSecret;
}

/**
* Set the Cookie Support status.
*
* @param Boolean $cookieSupport the Cookie Support status
*/
public function setCookieSupport($cookieSupport) {
$this->cookieSupport = $cookieSupport;
return $this;
}

/**
* Get the Cookie Support status.
*
* @return Boolean the Cookie Support status
*/
public function useCookieSupport() {
return $this->cookieSupport;
}

/**
* Set the base domain for the Cookie.
*
* @param String $domain the base domain
*/
public function setBaseDomain($domain) {
$this->baseDomain = $domain;
return $this;
}

/**
* Get the base domain for the Cookie.
*
* @return String the base domain
*/
public function getBaseDomain() {
return $this->baseDomain;
}

/**
* Set the file upload support status.
*
* @param String $domain the base domain
*/
public function setFileUploadSupport($fileUploadSupport) {
$this->fileUploadSupport = $fileUploadSupport;
return $this;
}

/**
* Get the file upload support status.
*
* @return String the base domain
*/
public function useFileUploadSupport() {
return $this->fileUploadSupport;
}

/**
* Get the data from a signed_request token
*
* @return String the base domain
*/
public function getSignedRequest() {
if (!$this->signedRequest) {
if (isset($_REQUEST['signed_request'])) {
$this->signedRequest = $this->parseSignedRequest(
$_REQUEST['signed_request']);
}
}
return $this->signedRequest;
}

/**
* Set the Session.
*
* @param Array $session the session
* @param Boolean $write_cookie indicate if a cookie should be written. this
* value is ignored if cookie support has been disabled.
*/
public function setSession($session=null, $write_cookie=true) {
$session = $this->validateSessionObject($session);
$this->sessionLoaded = true;
$this->session = $session;
if ($write_cookie) {
$this->setCookieFromSession($session);
}
return $this;
}

/**
* Get the session object. This will automatically look for a signed session
* sent via the signed_request, Cookie or Query Parameters if needed.
*
* @return Array the session
*/
public function getSession() {
if (!$this->sessionLoaded) {
$session = null;
$write_cookie = true;

// try loading session from signed_request in $_REQUEST
$signedRequest = $this->getSignedRequest();
if ($signedRequest) {
// sig is good, use the signedRequest
$session = $this->createSessionFromSignedRequest($signedRequest);
}

// try loading session from $_REQUEST
if (!$session && isset($_REQUEST['session'])) {
$session = json_decode(
get_magic_quotes_gpc()
? stripslashes($_REQUEST['session'])
: $_REQUEST['session'],
true
);
$session = $this->validateSessionObject($session);
}

// try loading session from cookie if necessary
if (!$session && $this->useCookieSupport()) {
$cookieName = $this->getSessionCookieName();
if (isset($_COOKIE[$cookieName])) {
$session = array();
parse_str(trim(
get_magic_quotes_gpc()
? stripslashes($_COOKIE[$cookieName])
: $_COOKIE[$cookieName],
'"'
), $session);
$session = $this->validateSessionObject($session);
// write only if we need to delete a invalid session cookie
$write_cookie = empty($session);
}
}

$this->setSession($session, $write_cookie);
}

return $this->session;
}

/**
* Get the UID from the session.
*
* @return String the UID if available
*/
public function getUser() {
$session = $this->getSession();
return $session ? $session['uid'] : null;
}

/**
* Gets a OAuth access token.
*
* @return String the access token
*/
public function getAccessToken() {
$session = $this->getSession();
// either user session signed, or app signed
if ($session) {
return $session['access_token'];
} else {
return $this->getAppId() .'|'. $this->getApiSecret();
}
}

/**
* Get a Login URL for use with redirects. By default, full page redirect is
* assumed. If you are using the generated URL with a window.open() call in
* JavaScript, you can pass in display=popup as part of the $params.
*
* The parameters:
* - next: the url to go to after a successful login
* - cancel_url: the url to go to after the user cancels
* - req_perms: comma separated list of requested extended perms
* - display: can be "page" (default, full page) or "popup"
*
* @param Array $params provide custom parameters
* @return String the URL for the login flow
*/
public function getLoginUrl($params=array()) {
$currentUrl = $this->getCurrentUrl();
return $this->getUrl(
'www',
'login.php',
array_merge(array(
'api_key' => $this->getAppId(),
'cancel_url' => $currentUrl,
'display' => 'page',
'fbconnect' => 1,
'next' => $currentUrl,
'return_session' => 1,
'session_version' => 3,
'v' => '1.0',
), $params)
);
}

/**
* Get a Logout URL suitable for use with redirects.
*
* The parameters:
* - next: the url to go to after a successful logout
*
* @param Array $params provide custom parameters
* @return String the URL for the logout flow
*/
public function getLogoutUrl($params=array()) {
return $this->getUrl(
'www',
'logout.php',
array_merge(array(
'next' => $this->getCurrentUrl(),
'access_token' => $this->getAccessToken(),
), $params)
);
}

/**
* Get a login status URL to fetch the status from facebook.
*
* The parameters:
* - ok_session: the URL to go to if a session is found
* - no_session: the URL to go to if the user is not connected
* - no_user: the URL to go to if the user is not signed into facebook
*
* @param Array $params provide custom parameters
* @return String the URL for the logout flow
*/
public function getLoginStatusUrl($params=array()) {
return $this->getUrl(
'www',
'extern/login_status.php',
array_merge(array(
'api_key' => $this->getAppId(),
'no_session' => $this->getCurrentUrl(),
'no_user' => $this->getCurrentUrl(),
'ok_session' => $this->getCurrentUrl(),
'session_version' => 3,
), $params)
);
}

/**
* Make an API call.
*
* @param Array $params the API call parameters
* @return the decoded response
*/
public function api(/* polymorphic */) {
$args = func_get_args();
if (is_array($args[0])) {
return $this->_restserver($args[0]);
} else {
return call_user_func_array(array($this, '_graph'), $args);
}
}

/**
* Invoke the old restserver.php endpoint.
*
* @param Array $params method call object
* @return the decoded response object
* @throws FacebookApiException
*/
protected function _restserver($params) {
// generic application level parameters
$params['api_key'] = $this->getAppId();
$params['format'] = 'json-strings';

$result = json_decode($this->_oauthRequest(
$this->getApiUrl($params['method']),
$params
), true);

// results are returned, errors are thrown
if (is_array($result) && isset($result['error_code'])) {
throw new FacebookApiException($result);
}
return $result;
}

/**
* Invoke the Graph API.
*
* @param String $path the path (required)
* @param String $method the http method (default 'GET')
* @param Array $params the query/post data
* @return the decoded response object
* @throws FacebookApiException
*/
protected function _graph($path, $method='GET', $params=array()) {
if (is_array($method) && empty($params)) {
$params = $method;
$method = 'GET';
}
$params['method'] = $method; // method override as we always do a POST

$result = json_decode($this->_oauthRequest(
$this->getUrl('graph', $path),
$params
), true);

// results are returned, errors are thrown
if (is_array($result) && isset($result['error'])) {
$e = new FacebookApiException($result);
switch ($e->getType()) {
// OAuth 2.0 Draft 00 style
case 'OAuthException':
// OAuth 2.0 Draft 10 style
case 'invalid_token':
$this->setSession(null);
}
throw $e;
}
return $result;
}

/**
* Make a OAuth Request
*
* @param String $path the path (required)
* @param Array $params the query/post data
* @return the decoded response object
* @throws FacebookApiException
*/
protected function _oauthRequest($url, $params) {
if (!isset($params['access_token'])) {
$params['access_token'] = $this->getAccessToken();
}

// json_encode all params values that are not strings
foreach ($params as $key => $value) {
if (!is_string($value)) {
$params[$key] = json_encode($value);
}
}
return $this->makeRequest($url, $params);
}

/**
* Makes an HTTP request. This method can be overriden by subclasses if
* developers want to do fancier things or use something other than curl to
* make the request.
*
* @param String $url the URL to make the request to
* @param Array $params the parameters to use for the POST body
* @param CurlHandler $ch optional initialized curl handle
* @return String the response text
*/
protected function makeRequest($url, $params, $ch=null) {
if (!$ch) {
$ch = curl_init();
}

$opts = self::$CURL_OPTS;
if ($this->useFileUploadSupport()) {
$opts[CURLOPT_POSTFIELDS] = $params;
} else {
$opts[CURLOPT_POSTFIELDS] = http_build_query($params, null, '&');
}
$opts[CURLOPT_URL] = $url;

// disable the 'Expect: 100-continue' behaviour. This causes CURL to wait
// for 2 seconds if the server does not support this header.
if (isset($opts[CURLOPT_HTTPHEADER])) {
$existing_headers = $opts[CURLOPT_HTTPHEADER];
$existing_headers[] = 'Expect:';
$opts[CURLOPT_HTTPHEADER] = $existing_headers;
} else {
$opts[CURLOPT_HTTPHEADER] = array('Expect:');
}

curl_setopt_array($ch, $opts);
$result = curl_exec($ch);

if (curl_errno($ch) == 60) { // CURLE_SSL_CACERT
self::errorLog('Invalid or no certificate authority found, using bundled information');
curl_setopt($ch, CURLOPT_CAINFO,
dirname(__FILE__) . '/fb_ca_chain_bundle.crt');
$result = curl_exec($ch);
}

if ($result === false) {
$e = new FacebookApiException(array(
'error_code' => curl_errno($ch),
'error' => array(
'message' => curl_error($ch),
'type' => 'CurlException',
),
));
curl_close($ch);
throw $e;
}
curl_close($ch);
return $result;
}

/**
* The name of the Cookie that contains the session.
*
* @return String the cookie name
*/
protected function getSessionCookieName() {
return 'fbs_' . $this->getAppId();
}

/**
* Set a JS Cookie based on the _passed in_ session. It does not use the
* currently stored session -- you need to explicitly pass it in.
*
* @param Array $session the session to use for setting the cookie
*/
protected function setCookieFromSession($session=null) {
if (!$this->useCookieSupport()) {
return;
}

$cookieName = $this->getSessionCookieName();
$value = 'deleted';
$expires = time() - 3600;
$domain = $this->getBaseDomain();
if ($session) {
$value = '"' . http_build_query($session, null, '&') . '"';
if (isset($session['base_domain'])) {
$domain = $session['base_domain'];
}
$expires = $session['expires'];
}

// prepend dot if a domain is found
if ($domain) {
$domain = '.' . $domain;
}

// if an existing cookie is not set, we dont need to delete it
if ($value == 'deleted' && empty($_COOKIE[$cookieName])) {
return;
}

if (headers_sent()) {
self::errorLog('Could not set cookie. Headers already sent.');

// ignore for code coverage as we will never be able to setcookie in a CLI
// environment
// @codeCoverageIgnoreStart
} else {
setcookie($cookieName, $value, $expires, '/', $domain);
}
// @codeCoverageIgnoreEnd
}

/**
* Validates a session_version=3 style session object.
*
* @param Array $session the session object
* @return Array the session object if it validates, null otherwise
*/
protected function validateSessionObject($session) {
// make sure some essential fields exist
if (is_array($session) &&
isset($session['uid']) &&
isset($session['access_token']) &&
isset($session['sig'])) {
// validate the signature
$session_without_sig = $session;
unset($session_without_sig['sig']);
$expected_sig = self::generateSignature(
$session_without_sig,
$this->getApiSecret()
);
if ($session['sig'] != $expected_sig) {
self::errorLog('Got invalid session signature in cookie.');
$session = null;
}
// check expiry time
} else {
$session = null;
}
return $session;
}

/**
* Returns something that looks like our JS session object from the
* signed token's data
*
* TODO: Nuke this once the login flow uses OAuth2
*
* @param Array the output of getSignedRequest
* @return Array Something that will work as a session
*/
protected function createSessionFromSignedRequest($data) {
if (!isset($data['oauth_token'])) {
return null;
}

$session = array(
'uid' => $data['user_id'],
'access_token' => $data['oauth_token'],
'expires' => $data['expires'],
);

// put a real sig, so that validateSignature works
$session['sig'] = self::generateSignature(
$session,
$this->getApiSecret()
);

return $session;
}

/**
* Parses a signed_request and validates the signature.
* Then saves it in $this->signed_data
*
* @param String A signed token
* @param Boolean Should we remove the parts of the payload that
* are used by the algorithm?
* @return Array the payload inside it or null if the sig is wrong
*/
protected function parseSignedRequest($signed_request) {
list($encoded_sig, $payload) = explode('.', $signed_request, 2);

// decode the data
$sig = self::base64UrlDecode($encoded_sig);
$data = json_decode(self::base64UrlDecode($payload), true);

if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
self::errorLog('Unknown algorithm. Expected HMAC-SHA256');
return null;
}

// check sig
$expected_sig = hash_hmac('sha256', $payload,
$this->getApiSecret(), $raw = true);
if ($sig !== $expected_sig) {
self::errorLog('Bad Signed JSON signature!');
return null;
}

return $data;
}

/**
* Build the URL for api given parameters.
*
* @param $method String the method name.
* @return String the URL for the given parameters
*/
protected function getApiUrl($method) {
static $READ_ONLY_CALLS =
array('admin.getallocation' => 1,
'admin.getappproperties' => 1,
'admin.getbannedusers' => 1,
'admin.getlivestreamvialink' => 1,
'admin.getmetrics' => 1,
'admin.getrestrictioninfo' => 1,
'application.getpublicinfo' => 1,
'auth.getapppublickey' => 1,
'auth.getsession' => 1,
'auth.getsignedpublicsessiondata' => 1,
'comments.get' => 1,
'connect.getunconnectedfriendscount' => 1,
'dashboard.getactivity' => 1,
'dashboard.getcount' => 1,
'dashboard.getglobalnews' => 1,
'dashboard.getnews' => 1,
'dashboard.multigetcount' => 1,
'dashboard.multigetnews' => 1,
'data.getcookies' => 1,
'events.get' => 1,
'events.getmembers' => 1,
'fbml.getcustomtags' => 1,
'feed.getappfriendstories' => 1,
'feed.getregisteredtemplatebundlebyid' => 1,
'feed.getregisteredtemplatebundles' => 1,
'fql.multiquery' => 1,
'fql.query' => 1,
'friends.arefriends' => 1,
'friends.get' => 1,
'friends.getappusers' => 1,
'friends.getlists' => 1,
'friends.getmutualfriends' => 1,
'gifts.get' => 1,
'groups.get' => 1,
'groups.getmembers' => 1,
'intl.gettranslations' => 1,
'links.get' => 1,
'notes.get' => 1,
'notifications.get' => 1,
'pages.getinfo' => 1,
'pages.isadmin' => 1,
'pages.isappadded' => 1,
'pages.isfan' => 1,
'permissions.checkavailableapiaccess' => 1,
'permissions.checkgrantedapiaccess' => 1,
'photos.get' => 1,
'photos.getalbums' => 1,
'photos.gettags' => 1,
'profile.getinfo' => 1,
'profile.getinfooptions' => 1,
'stream.get' => 1,
'stream.getcomments' => 1,
'stream.getfilters' => 1,
'users.getinfo' => 1,
'users.getloggedinuser' => 1,
'users.getstandardinfo' => 1,
'users.hasapppermission' => 1,
'users.isappuser' => 1,
'users.isverified' => 1,
'video.getuploadlimits' => 1);
$name = 'api';
if (isset($READ_ONLY_CALLS[strtolower($method)])) {
$name = 'api_read';
}
return self::getUrl($name, 'restserver.php');
}

/**
* Build the URL for given domain alias, path and parameters.
*
* @param $name String the name of the domain
* @param $path String optional path (without a leading slash)
* @param $params Array optional query parameters
* @return String the URL for the given parameters
*/
protected function getUrl($name, $path='', $params=array()) {
$url = self::$DOMAIN_MAP[$name];
if ($path) {
if ($path[0] === '/') {
$path = substr($path, 1);
}
$url .= $path;
}
if ($params) {
$url .= '?' . http_build_query($params, null, '&');
}
return $url;
}

/**
* Returns the Current URL, stripping it of known FB parameters that should
* not persist.
*
* @return String the current URL
*/
protected function getCurrentUrl() {
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on'
? 'https://'
: 'http://';
$currentUrl = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$parts = parse_url($currentUrl);

// drop known fb params
$query = '';
if (!empty($parts['query'])) {
$params = array();
parse_str($parts['query'], $params);
foreach(self::$DROP_QUERY_PARAMS as $key) {
unset($params[$key]);
}
if (!empty($params)) {
$query = '?' . http_build_query($params, null, '&');
}
}

// use port if non default
$port =
isset($parts['port']) &&
(($protocol === 'http://' && $parts['port'] !== 80) ||
($protocol === 'https://' && $parts['port'] !== 443))
? ':' . $parts['port'] : '';

// rebuild
return $protocol . $parts['host'] . $port . $parts['path'] . $query;
}

/**
* Generate a signature for the given params and secret.
*
* @param Array $params the parameters to sign
* @param String $secret the secret to sign with
* @return String the generated signature
*/
protected static function generateSignature($params, $secret) {
// work with sorted data
ksort($params);

// generate the base string
$base_string = '';
foreach($params as $key => $value) {
$base_string .= $key . '=' . $value;
}
$base_string .= $secret;

return md5($base_string);
}

/**
* Prints to the error log if you aren't in command line mode.
*
* @param String log message
*/
protected static function errorLog($msg) {
// disable error log if we are running in a CLI environment
// @codeCoverageIgnoreStart
if (php_sapi_name() != 'cli') {
error_log($msg);
}
// uncomment this if you want to see the errors on the page
// print 'error_log: '.$msg."n";
// @codeCoverageIgnoreEnd
}

/**
* Base64 encoding that doesn't need to be urlencode()ed.
* Exactly the same as base64_encode except it uses
* - instead of +
* _ instead of /
*
* @param String base64UrlEncodeded string
*/
protected static function base64UrlDecode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}
}

The End Result

Once all the files are in place, go to your Facebook page and check the operation of the new page tab.  Here’s the “before like” page from our example:

Facebook page before like button

Facebook page before like button is clicked

 

And after you click the button, the changed experience:

Post-Click Like Page Revealed

Post-Click Like Page Revealed

 

So what should you put on your pre- and post-click Like pages?  That’s up to you.  But one common thing that marketers will tell you is to have an offer of a free podcast, a whitepaper, PDF download, video, or some other “goodie” that the visitor gets for clicking Like.

The ambitious will also have a secondary offer on the Thank You page.  An even better thing that the user can get if they opt into your email list, for example.

Good luck with your own Facebook page, and if you liked this article, would you please leave a comment and share it?  If have any questions or issues, please post in the comments below.

14 Comments

  1. I think I have followed your directions to the T, however it's not working the image For "pre-like" shows up but stays there after like is clicked.

    Also I see the app on the left, but how do I make that the default app that the user sees, right now you can see it all. and the only way to see the app is if they click on the icon on the left.

    This is the URL I'm testing it with : https://www.facebook.com/pages/Brewster-Dogs/168916179879358.

    • Andrew, one thing I noticed in reviewing the article was that some of the code display seemed to be messed up, so I’m betting that somewhere you copied some incomplete code. I think I’ve gotten it all fixed now if you want to give it another try…

  2. You know I've also noticed that it seems to put a lot of white space above the actual PNG, like 10 inches of white space. I have figured out the default page setting to get it to start with the fangate, but it still doesn't work. I'm using Wildfire's Free FanGate until we can work it out, hope to hear from you. I'd rather have a home-grown solution.

    • Andrew, my apologies for not responding sooner (site didn’t send me notification of your comment). I’ll take a look and loop back.

  3. WICKED Tutorial. It's rare you see tutorials that contain working sample code that you can just upload and it just *works*. Thanks so much!

  4. We are a group of volunteers and starting a new scheme in our community. Your website provided us with useful information to paintings on. You’ve done an impressive job and our entire community might be thankful to you.

  5. Huge thanks. I followed this and other tutorials only get stumped time and time again. It turned out when I was developing I had to point to a directory not a page in order to get around the SSL issue. Then once I got the SSL (which is required now for facebook). I was stuck for almost 2 days then once I pointed the page urls to index.php it worked.

  6. Hey Skip, Sacks of Kudos to you.

  7. Great tutorial! thanks a lot! it truly help me ^^.

  8. Great tutorial! thanks a lot! it truly help me ^^.

  9. Great Tutorial! Thanks for sharing.

  10. Nice tutorial, Thanks

Post a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>