How to Create A Facebook Page Tab

 

AFacebook Page Tab can be used as a “splash” page or welcome page that visitors see the instant they visit your Facebook Page. This tutorial will show you how to create one, with infomation up-to-date for 2012! 

Use a Facebook Page Tab to get more “Likes” to your page, or funnel traffic directly to your website.

About Facebook Page Tabs

I’m sure you’ve noticed several major companies’ Facebook Pages going directly to a custom made page, which has a big graphic and either entices you to watch a Youtube video, click their “Like” button or click out to some external website. That’s what a “tab” is, and you can create one yourself.
To the right is a picture of Coca-Cola’s official Facebook Page. When you visit it, you’re taken directly to a page tab that has a large image, clickable buttons, links and other elements that act exactly like a web page.
Well, that’s what you’re looking at: the Facebook Page is pulling in an external web page from Coca-Cola’s server that was created to fit the exact dimensions of the Facebook Page.

Before We Start…

What’s the Catch?

(You’ll need an SSL certificate)

In 2011, Facebook changed everything about how Page Tabs work. Before, there was a simple app called “FBML” or “Facebook Mark-Up Language” which pretty much let you create a tab and paste in any code you wanted. Now, Facebook got ultra strict about it — FBML was phased out, and the only way you can create a tab is the hard way, in Facebook Developers.
Here’s the bad part, though — even after you’ve created your tab through Facebook Developers, it will show an error message to anyone browsing Facebook on a secure URL (https://). Surprisingly, this is a very large chunk of Facebook users. The only way around it is if your server has a SSL certificate. 9.9 chances out of 10, most web hosting accounts do not, and you’ll have to purchase one yourself.
The cost of purchasing a corporate-level SSL certificate is probably more than you’ll be willing to pay (Verisign charges about $400/year for them, and their competitor Thawte charges around $150/year for one) but there are numerous budget SSL services that will also do the trick, such as GoDaddy SSL certificates which are around $12/year…and honestly, in this case, all you need is the rights to use “https”, which is what this will give you.
You can still create a Facebook Page tab without an SSL certificate. Just know that anyone browsing on a secure connection is going to see an error page, and will be forced to go to your page’s wall by clicking a button on the error message (this looks unprofessional).
Facebook Page Tabs
1. Visit Facebook Developers
Visit the Facebook Developers site. It’s a place where any Facebook user can log in and create their own Facebook apps. Click “Build Apps on Facebook” if you’d like to learn a little more about Facebook Developers.
Facebook Developer
2. Click “Apps” on the Top Navigation Bar
There should be an “Apps” link in your top navigation bar (in case you can’t find it, here’s the direct link) – click it, and it will take you to the screen where you can build your first app.
  • On the next screen, find the button that says “+Create New App.”
  • On the pop-up, your “App Display Name” is what the app (tab) will be named on your own menu of apps you’ve created. It’s not the “live” name of the tab, though.
  • The “App Namespace” is an identifier for the app. You can name this whatever you want, it’s pretty much just for your purposes.

Create new Facebook Page app

3. Fill In Your Basic Info
Most of this stuff should be filled in for you. All you’ll need to do is enter your app domain, which would be the domain name/web hosting account where any assets would load from, like images or web pages. If anything isn’t filled out for you, use the screenshot below as a guide.
Facebook Page tab basic info
4. Create A Web Page
Since a Facebook Page tab is nothing more than an external website that gets “pulled in” to the page, you’ll need to create that separate web page. So, create an HTML file and make sure that everything you put into it (tables, images, etc.) is a maximum of 520 pixels wide! Otherwise, it won’t fit properly.
Save this web page on your server account, and remember where you put it. You’ll have to link directly to it in the next step. For the sake of this tutorial, let’s say we created “facebook-page.html” and dropped it in the server account for “mydomain.com”
5. Inputting Your URLs
Back on the Facebook Developers/app screen, there are two sections at the bottom of the page you’ll need to access. You’ll find an accordion menu — expand the “Website” bar first. Simply type in the same domain name you’ve used above (in this example, mysite.com). Then, expand the “Page Tab” section, and do the following:
  • Page Tab Name: This is the actual tab that your Page visitors will see. Typically, a single word like “Welcome” or “About” will suffice here.
  • Page Tab URL: Since you’re pulling in a web page from your server account, you’ll want to type in the folder in your web account where it resides. Note that you must only include a “folder” and not a path to a “file,” here.
  • Secure Page Tab URL: Same as above…except the “https” version. Don’t forget my warning above about a SSL certificate being necessary in order for this to work! Otherwise, your visitors will see an error message instead. If you don’t have the certificate and you provide a “https” URL in here, it will still display an error message on the live page since the SSL certificate won’t be present.
  • Save the changes. We’re done! On to the next step.
Facebook page tab URLs
6. Adding the “App” to Your Page
Now’s the time where you can add your “app” (tab) to your Facebook Page! Normally, once you’ve saved your app, a link should appear on the same screen that says “View App Profile Page.” On this page, you can choose which of your existing Facebook Pages you’d like the app to appear on.
However, a common issue is that this link simply never appears. If that’s the case, copy and paste this URL into your browser, including your app’s ID number where it says “APPIDNUMBER” in the URL (this number can be found at the top of your app’s page):
https://www.facebook.com/add.php?api_key=APPIDNUMBER&pages=1
You should now see a screen with a drop-down box where you can choose which Facebook Page should have the tab showing on it. Make a selection, then visit the page to make sure it shows up on the left column, along with the standard tabs for “Wall | Info | Friend Activity | Photos | Questions.”
7. Force Visitors to Your Tab
This is optional — but, if you wanted all visitors to go directly to your new tab when they visit your page, you can make this happen through your page’s administration panel. Do the following:
  • Visit your Facebook Page, click “Edit Page” on the upper right.
  • Click “Manage Permissions” on the left column.
  • Look for the “Default Landing Tab” drop-down, and choose the tab you just created.
  • Log out of Facebook. Then, visit your Facebook page and make sure you’re taken straight to the tab instead of the Page’s wall. If so, it works!
Facebook Page default landing tab
In Closing…
This tutorial should have hopefully gotten your new Facebook Tab up and running. Keep in mind that this is a truly “basic” Page tab, and it has no fancy options, such as showing the tab only to new visitors who have never clicked “Like” before. So, the tab you’ve just created will show up to everyone, even if they are already a fan.
Making your Facebook Page tab perform these sophisticated functionalities will require programming skills, or quite simply, usage of a 3rd party app (most likely one that has a fee associated with it). Facebook Developers does have a community with lots of forum posts, where you can learn more about adding more sophistication to your page.
List of Facebook Page Tab Apps
(Both Free and Not Free)
  • Pagemodo: Creates 1 free nicely designed Facebook fan page tab per Facebook account, with tons of features like video, coupons, feeds & more. Forces a backlink to Pagemodo (for free accounts only).
  • Tabsite Manager: Includes a drag-and-drop platform for creating Facebook Page tabs, using dozens of pre-made templates as a “base design,” you can customize the look, feel and functionality of the tab. Plans range from Free, to $15/mo.
  • Involver: Look for the “Static HTML” app — it will let you set up a Facebook Page tab and insert whatever HTML code you want. It works for https connections. Just note that they force their link and Facebook Like code for themselves on your page.
  • Lujure: Another Facebook Page tab creator with a drag-and-drop interface, which works similarly to a desktop publishing program. Prices range from free (with forced backlink pointing back to their site) to $300/mo.

One comment

  1. I am looking for a website dev Facebook fan site dev can you point me in the right direction?

Leave a Reply

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

*