How To Create A Variable Content App For Your Facebook Page

Facebook pages are all about creating engagement with your brand so, as marketers, it’s in our best interests to offer incentives and rewards to those people who show a direct interest in what we have to offer. Our Facebook page allows us to do that by giving us the ability to show different content to fans and non-fans.

Here’s How – Using IFrame Apps

From March 11^th 2011, the old system of using FBML (Facebook Markup Language) to create custom page tabs will be deprecated, and all new custom tabs will be produced using IFrames instead. Put simply, an IFrame can be thought of as a browser window that’s embedded within another web page.

Custom Facebook tabs will now display their content inside an IFrame, which means we can include just about any other web page without relying on any of the code being served by Facebook itself.

For the purposes of this article, I’m assuming that you’ve already upgraded your page to the new layout, which is essential to making this work. If you haven’t already done that, you can click on the banner at the top of your Facebook page inviting you to upgrade, or you can visit the “Page Upgrade Status” section on Facebook.

Disclaimer

The details in this post are based on knowledge current at the time of writing. As we all know, Facebook can (and often do) change things at a moment’s notice, so please bear that in mind. Assistance with specific websites, apps or code is beyond the scope of this article, which is intended as a guideline to at least get you started. It is assumed that you have a working knowledge of HTML, PHP, CSS, JavaScript and any other coding languages you might need to construct your pages. Again, help with those specific areas is beyond the scope of this article.

Overview

Here is a quick list of the things you will need to do:

• Create a folder for your app on your web server
• Install the Facebook PHP Software Developers Kit (SDK)
• Register your app on Facebook
• Set up your app files (PHP, HTML etc.) & upload them to your web server
• Add the app to your Facebook page
• Change your page default landing tab if desired

#1 – Create An App Folder On Your Web Server

This is where you will store all the essential code and files for your app. Images can be hosted anywhere, and referenced accordingly, but the code for your app should be placed in a dedicated folder. For example, I created a folder called “facebook” with subfolders inside that, one for each app I might want to create.

#2 – Install The Facebook PHP Software Developers Kit (SDK)

The Facebook PHP SDK is necessary to create content that may be dependent upon whether or not the user is a fan, their location etc. The Facebook PHP SDK allows you to gather a limited set of data about the user, which you can then use to alter the page content according to your needs. For example, this tutorial will show you how to display different content for fans and non-fans using these resources.

If you don’t have it already, you can download the Facebook PHP SDK from here:

https://github.com/facebook/php-sdk/zipball/master

You’ll need to unzip the download and then locate a file called “facebook.php” in the “src” folder. I recommend copying this file to your app folder.

By the way, the Facebook PHP SDK requires you to be running PHP 5 (or later) in order to function correctly. If you don’t know which version of PHP your server is running, you can easily find out by creating a test PHP file on your server, for example “phptest.php”, as follows:

<?php
phpinfo();
?>


When you point your browser at this file, you will see all the information about the installed copy of PHP on your server, including the version number. Assuming that you have the correct version of PHP, you will need to add the following line of PHP code to your app file (more on this later):

require “facebook.php”;

I’ll give you more information on how to use the Facebook PHP SDK later on, but for now we’ll need to go ahead and register our new app in Facebook.

#3 – Register Your App In Facebook

Facebook needs to know some basic information about our app (where to find it, for example), as well as creating specific login information to allow the app access to the Facebook system. To set up your app, go to the “Developer Home” section. If this is the first time you’ve visited this page you’ll need to allow the developers app access to your account:

Once you’ve got this set up, click on “+ Set Up New App” to start the process of registering your new app. Give your application an appropriate name, and click on “Create App” after checking the button to say you agree to the Facebook terms.

After completing the usual security check, you’ll see the screen where you can set up all the necessary information that Facebook needs to know about your app. You’ll need to upload an icon (16 x 16 pixels), a logo (75 x 75 pixels) and enter the contact email address etc. for your app.

The most important information about your app is on the “Facebook Integration” tab. This is where you give Facebook the specifics about where to find your application file, etc. You will also see your unique application ID and your application secret, both of which are needed in order for your app to interface with Facebook.

In the “Canvas” section, you can leave the “Canvas Page” empty, but you should enter the location of your app files in the “Canvas URL” field. For example:

http://www.mydomain.com/facebook/myapp/

You might also want to check the button that says “Auto Resize” as part of the steps needed to avoid having scroll bars appear on your tab.

Finally, you’ll need to fill out the “Page Tabs” section of the “Facebook Integration” section. The important parts here are:

• Tab Name – This is the text (up to 16 characters) for the navigation link that will appear on the left side of your page for the user to click on.
• Page Tab Type – Should be set to “IFrame”
• Tab URL – enter the filename of your main app file (for example, index.php)

#4 – Set Up Your App Files & Upload To Your Server

This is where we get into the details of creating your custom app, and producing an app that shows different content, depending on whether or not the user is a fan of your page. You will need a basic understanding of HTML, CSS, JavaScript and PHP in order to complete this part, and there are plenty of resources around the web to help with coding specifics.

However, I have put together a basic framework that you can use as a starting point:

<?php
// this is the Facebook PHP SDK:
require 'facebook.php';

$app_id = "YOUR APPLICATION ID GOES HERE";
$app_secret = "YOUR APPLICATION SECRET GOES HERE";
$facebook = new Facebook(array('appId' => $app_id, 'secret' => $app_secret, 'cookie' => true));

// this is the information we get from Facebook about the user
$signed_request = $facebook->getSignedRequest();

// extract the data about the user from the signed_request variable
$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"];

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body
{
width: 484px;
height: (nnnnpx - varies according to your content);
margin: 0px;
padding: 0px;
overflow: hidden;
}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<div id=”fb-root”></div>
<script src=”http://connect.facebook.net/en_US/all.js”></script>
<script>
FB.init({
appId : ‘YOUR APPLICATION ID GOES HERE’,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

<script type=”text/javascript”>
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

<body>

<?php
// this is where you will include the fan content
if ($like_status)
{
include “fan-content.php”;
}
else
// otherwise go ahead and load the non-fan content
{
include “non-fan-content.php”;
}
?>

</body>
</html>


You can download this code in a text file here (suggest right-click and then “save as…”).

A few notes about this code:

• Make sure you add your application ID and secret in the correct places
• In the “body” style section, you’ll need to insert the correct height
• The width of the “body” style is set to 484px
• The “overflow: hidden” style is necessary to remove scroll bars in Google Chrome

The files “fan-content.php” and “non-fan-content.php” contain the appropriate content that you want your page to display based on whether the user is a fan or not. These files can contain any regular web content (including embedded video, audio etc.) as well as PHP code if you need to make server-side decisions about the content.

#5 – Add The App To Your Facebook Page

The final step, once you are happy with your page content is to add the application to your Facebook page. Go to the application from the developer home page and click on your app to bring up this screen:

Click the “Application Profile Page” link and then over on the left side of the next screen, click the “Add to My Page” link, this will allow you to select which page you would like to add the application to.

If your new app is going to be the default landing tab on your page for non-fans then you will need to edit your page to set that up. You can do this on the “Manage Permissions” tab of the page editor in the box labeled “Default Landing Tab”

Try This Yourself

I hope that this has given you at least a starting point to help you set up some interesting content for the users of your Facebook page. The ideas here are just the tip of the iceberg of what you can do with apps on your pages, so be creative and see what kind of experiences you can give to your users to help foster lasting engagement from your fans.

If you found this article useful, please share it on Facebook & Twitter etc. and with your friends. By all means let me know of any errors in the text, or specific problems that could be better addressed. Unfortunately, I am not able to offer help with your specific code, apps or pages, as there are many other resources available for that type of support.

Connect With The Photography Coach On Google+

Share these photography business ideas with others:

Tweet

Take A Second To Share Your Thoughts - Add A Comment

Photography Website SEO facebook apps, facebook pages, IFrame app