A custom Facebook page is a great way to show anyone who lands on your page exactly why they should click the Like button. And they are fairly easy to create if you know a little bit of HTML and CSS.
UPDATED! This info is updated to reflect Facebook removing App Profile Pages on Feb. 1, 2012 (The updated part is in Step 4).
Here are a couple examples of effective page tabs.
Because Facebook now uses iFrames to display custom tabs, you will need to have a web host (and one that offers secure hosting). I use Fatcow to host my Facebook tabs. They’re not the fastest host, but they are very affordable and have done a nice job for me over the years.
Step 1: Design your page
Your page should be 520 pixels wide or fewer to fit into the tab area. Here is some code to get you started:
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>Put your page content here.</p>
</body>
</html>
Just change what goes between the body tags to create your page.
Step 2: Upload your page
Upload your page and all of the supporting image files to your web host. I find it easiest to just treat each tab as if it were it’s own web site with a root folder, an index page and an images folder.
Step 3: Create a Facebook App
Go to developers.facebook.com, and create an account if necessary.
Click on “Apps” at the top.
Click on “Create new app” at the top right.
Give your app a display name, and a namespace (unique ID). Check the box that you agree to the Platform Policies. Click continue.
On the next screen, scroll to the bottom and fill out the App on Facebook tab and the Page Tab tab.
App on Facebook:
- The Canvas URL is the root folder where you saved the page you designed in Step 1, and it should end with “/”.
- The Secure Canvas URL is the same folder on a secure folder. To find your secure server URL using Fatcow, click on Secure Server in the Fatcow control panel.
Page Tab
- Page Tab Name is the name that will display in the left column on your actual Facebook page. If this is a welcome page, call it “Welcome.”
- Page Tab URL is the full URL to the page you created in Step 1 – in this case you see that I named it index.html.
- Secure Page Tab URL is the full URL to the secure version of the page you created.
You also can edit the small icon that appears next to the name of your tab on your Facebook page (in this case just a red box to the left of the Welcome link):
Click on “edit icon” near the top of the page to change the icon. The icon is 16×16 pixels, but you can make it a larger and let Facebook size it down.
Click “Save changes” at the bottom of the page.
Step 4: Adding the app/tab to your page
To add this new tab to a Facebook page, go to the following web address:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Replace YOUR_APP_ID with the App ID Facebook created when you made your app. And replace YOUR_URL with the “Canvas URL” you entered into your app in Step 3.
You will get a page that looks like this:
Select the page you want the tab to be on, and then click “Add Page Tab.”
To make your page default to this new tab, go to your Facebook page. Click “edit page” in the upper right (you need to be on the “wall” tab to see this).
Click on “manage permissions” on the left and change the “default landing tab” to the page you just created.
This will only apply to users who have not “liked” your page. Anyone who likes your page will see the wall by default.
Note: If you see scrollbars on your page, here’s how to get rid of them.
Looking for someone to design a tab for you?
If you’re not quite ready to design your own Facebook tab, I am available to do so for you. Please contact me at csnider(at)gmail.com for pricing info.
Here are a couple examples:
Chris Snider Design welcome page
Drake School of Journalism welcome page
Welcome page for my son’s page, which includes a “fan gate” – click “like” to see the message change. You can use this to display content only to fans who have liked your page.
I personally use PageYourself to customize my Page, it’s really nice, all the more so as it links the tabs together to make it look like a real website! They call it the f-Site. Have a look if you like http://www.pageyourself.com/