Log in Sign Up

Create a Custom Facebook Landing Page

Now that's a Facebook Page!

There are a few really cool Facebook Pages out there. The Page that comes to mind is Coca-Cola's very slick design for their Facebook Page. Colorful, fun, informative, and runs right inside Facebook. Wouldn't it be cool to have a Page like that for your business, club, nonprofit, product, or whatever?

Better yet, wouldn't it be great to be able to manage the content of that Page from within Facebook? That's what we're going to accomplish with this HowTo!

To see what we'll be building, check out the Magic Cupcake demo on the MagicEdit Facebook Page.

What You will Need

To get started, here are the things you will need:

  • A verified Facebook account
  • A live (as in on the Internet) web site, usually living on a domain like "http://yourcompany.com".
  • (Optional) The part of your site that is to be embedded in your Page should be 520 pixels wide
  • (Optional) Preferably, your site is already on MagicEdit.

Notes on Nomenclature, Screenshots, and Links

In order to avoid confusion, when you see the word "Page" capitalized, it refers to your Facebook Page, the profile for your business or product (or whatever) on Facebook. If the word "page" is not capitalized, it refers to any generic web page.

You can click to enlarge any of the screenshots in this HowTo. No need to squint at a tiny picture trying to figure out what it shows.

If you see a link that looks Like This, it is a link to Facebook that will open in a new tab or window. Don't close this page (see, not capitalized) until you've worked through the whole HowTo.

Some Background

A Facebook Page is much different than your basic personal Facebook account. Pages exist for companies, products, and services, and a regular account exists for, well, you, a real person. Usually, anyone can "Like" a Page, but you have to confirm your Friends. If you want to learn more about Facebook Pages, check out the FacebookPages Page (very meta, I know), which has lots of information about how to create and manage your Facebook Page.

By default, Facebook includes a number of features in Pages, but what is NOT included is the ability to simply design the Page to look however you want (think the Coca-Cola Page). To do that, you actually need to create a Facebook App, then add the App to your Page.

So here's what we're going to do:

1. Create a Facebook Page > 2. Create a Facebook App > 3. Add the App to the Page

Create a new Facebook Page (click to enlarge)

Step 1: Create your Page

Cupcakes are all the rage, so let's start a new venture marketing cupcakes! We've done some work to create a website, and now we want to style up our Facebook Page with the coolest cupcake styles ever.

First off, let's create our Facebook Page (skip this step if you already have a Page). Make sure you're logged in to Facebook, then click on the link below:

Create New Facebook Page

Choose the option that most closely matches our cupcake business (or choose the one that works for you). I think "Brand or Product" works, so let's click on that. Select your category (Food/Beverages), and type the name of your Page (Magic Cupcakes), then agree to the terms and click "Get Started."

Depending on the option you chose, you may have some other fields to fill out, but once you complete them you'll end up with your Page. Feel free to customize the profile a bit by adding an image, editing your info, or whatever. When you are finished, click the "View Page" button in the upper right.

Select your Page ID

What we need now is the Page ID, which is located in the URL (up in the address bar). It's a long number that looks something like the number in the screenshot on the right. Copy and paste your Page ID into the field below:

Set your Page aside for the moment. We'll get back to it.

Step 2: Create the App

Our next step is to create our App. Don't worry if you're not a programmer, since a basic Facebook App is really just a website that runs inside of Facebook. To start creating your app, click on the link below:

Launch my Facebook App

Creating the App

If you haven't created an app before, click "Allow" on the "Request for Permission" dialog, then click on the "+ Set Up New App" button in the upper right. You must have a verified Facebook account in order complete this step, so if you haven't verified your account, take care of that and then click the "Launch my Facebook App" link again.

Note: If you've already taken care of the permissions and verification, you can click here to immediately create your App.

Once you see the "Create Application" page (see image to the right), fill in a name for your App, then hit "Create App." You'll have to decipher a CAPTCHA to prove you are flesh and blood, then you'll be taken to the Facebook App management page.

Required Facebook Integration elements
for embedding your App in a Page

This stuff can look daunting, and Facebook seems to change it on a daily basis, but there are only a couple of things you absolutely have to set here. You can fill in whatever you want on the About tab. But the only things that we need to fill in for embedding the App in a Page are on the Facebook Integration tab.

Let's go through the required elements one at a time. First, copy your Application ID and paste it into the field below.

Select the "Auto-resize" option for the iFrame size, then fill in the information for Tab Name and Tab URL. Facebook used to have Tabs across the top of the Page, but those are now gone in favor of "tabs" as links down the left side of the Page. You must give your App a Tab Name, and also put the URL of the content you wish to be displayed in the tab. This should be a page designed to fit in the Facebook iFrame, which is a width of 520 pixels.

Step 3: Add the App to the Page

Here is where we'll do a little magic. There is no obvious way to do this on Facebook, so I'll do the work for you. If you've entered your Page ID and App ID correctly above, simply click on this link to add your App to your Page:

Add App to Page Confirmation

Add App to Page...

Okay, if you did everything correctly, you should see the dialog that lets you confirm adding the App to your Page. It looks something like the picture on the right. If you just get your Facebook home page, you did something wrong. Go back and check that you got your Page ID and App ID correct, paste them in the boxes above, and try clicking the "Add App to Page" link again.

Step 4: Configure the Page

Setting the default tab

Now that you have the App installed in the Page, you need to do one last thing to the Page to make sure the App comes up by default when visitors hit your Page. Navigate to your Page, then click "Edit Page" in the upper right corner. If you don't see the "Edit Page" link, click on "Account" in the upper right corner, then select "Use Facebook as Page" and switch over to your Page.

Select the "Manage Permissions" tab on the left, then look for the select drop-down for "Default Landing Tab" (see the screenshot on the right). You should be able to see and select your new App from the list. If you do not see your App name there, make sure you actually filled in the "Tab Name" field when you configured the App.

Click "Save Changes," and now your App will show up on your Page as the default tab. Since you are an administrator of the Page, however, you may not see it by default. Copy the whole URL of your Page, then log out of Facebook and paste the URL back in the address bar of your browser (or hit Back a couple of times). You'll see your Page the way the general web-surfing public will see it.

Scrollbars be Gone!

You've gone through all that trouble to have Facebook stick your site as an iFrame in your Page, and now you're stuck with scrollbars looking all ugly. Never fear! If you've designed the web page being shown in the App/Page to be 520 pixels wide, you can get rid of the scrollbars by simply embedding the following code in your website, right before the </body> tag:

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>window.fbAsyncInit=function(){FB.Canvas.setAutoResize();}</script>

This allows your website to communicate its height with the Facebook iFrame, causing it to size appropriately. You may see the scrollbars appear for a split second as the height is sent over, but most people won't even notice.

MagicEdit Support

If your site uses MagicEdit, you'll be able to maintain the Page content right from within Facebook.

To support this we have to resize the editor slightly to fit within the 520 pixel width iFrame, so just add the following script near the bottom of your page.

<script>if (document.getElementById('me_editor')) document.getElementById('me_editor').width='510';</script>

That's About It!

Now you have all the tools you need to create and manage your website in an App in a Page on Facebook. Overly complicated? Yup. Worth it? Absolutely.

For future reference, here are some useful links that may be a little difficult to find from within Facebook itself.

Create New Facebook Page
Create New Facebook App
View My Facebook Apps

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top