How to Create Custom Tabs for Facebook Business Pages

Facebook business pages just went through quite a change with the release of the new page design that includes the addition of Timeline. But that also means your old way of customizing page tabs -- the tabs you could use to pull in your own custom content alongside the standard tabs like "Photos" and "Likes" -- has changed.
These tabs areimportant for your social media marketing, because they let you create a much richer user experience on Facebook and control the content that your followers see when they visit your page.

So, with the new layout, how do you create your own custom Facebook tabs? Turns out it's not as difficult as you might think. Just follow these 6 simple steps to creating custom Facebook page tabs.

Wait, Where Do Tabs Exist on the New Facebook Page Layout?

Before we get started, let's make sure we're all on the same page about where tabs now exist since the layout is still new to many. Tabs now exist under your cover photo in a section of your page called 'Views & Apps,' which can be expanded by clicking on the blue arrow on the far right. You can take a look at Coca-Cola's Facebook page for a great example of a company that effectively uses custom tabs (make sure to expand the tab area by clicking the blue dropdown arrow if you're checking them out).

Alright, now that we've got that out of the way, let's start customizing!

Step 1: Log In as a Facebook Developer

Visit https://developers.facebook.com/apps. You'll be able to log in with your normal Facebook credentials.

Step 2: Create and Name Your New App

Click "Create a New App" from the top left-hand corner. You'll need to provide a "Display Name," which is what your "app," or tab, will be called. You'll also need to create a "namespace," which is basically just a unique ID for your app.

You now also have the option to host your app for free with Heroku, a great choice for a serious app developer. For the average marketer, however, it's probably not necessary.

Step 3: Choose an Image and Update Basic Info for the App

Choose an image and icon for your custom tab. Remember, this is going to display at the top of your Facebook page, so think about it like a call-to-action. Choose an image that will get your visitors clicking!

Update your basic info with domain name and category. You can also upload a custom image for your app by clicking "edit icon."

Step 4: Create the Content That Will Display Within the App's Tab

Now create a web page outside of Facebook. This is what will display inside your custom Facebook tab. To ensure the page's content displays correctly on Facebook, make sure that the width of your web page is either set to 100%, 520px or 810px. Make sure all images, videos, etc. that you include on your page are less than either 520px or 810px, depending on how wide you chose to make the content of your tab.

Since you're now using the new Facebook business page layout, I recommend making the content of your tab 810px; the old layout before Facebook's business page redesign was much narrower at 520px.

Think of your Facebook tab like an iFrame that loads inside Facebook -- you can display pretty much whatever content you'd like inside your custom Facebook tab. As a marketer concerned with lead generation, for example, you could leverage the Facebook tab as a way to drive leads, making it essentially a landing page with a form -- thought you'll likely need a developer to help you build that functionality.

Step 5: Tell Facebook What Content You Want to Display on Your Custom Tab

Go back to your app settings in developers.facebook.com, scroll down to the "Select how your app integrates with Facebook" section, and choose "Page Tab." Name your tab whatever you'd like; then copy the URL of the page you just created in step 4, and paste that URL into "Page Tab URL."  

To make sure everyone can see your new Facebook page tab, you'll also need to provide a secure URL. This should be the same URL you provided for the page tab, but with "https://" instead of "http://" at the front. If your website does not support https, your app will still work for anyone who has secure browsing disabled in their Facebook settings, but you should look into getting an SSL certificate.

Save the changes you've made to the app.

Step 6: Add Your Tab to Your Facebook Page

This step can be a bit tricky, so read carefully. In order to install your new page tab on your business page, you need to visit a link with several custom URL parameters. The link is:

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

You'll need to replace the parts I've bolded in the URL above -- "YOUR_APP_ID" and "YOUR_URL" with some information that Facebook provides for your app, your "App ID/API Key" and your "Site URL."

Your custom Facebook tab should now be included with your standard tabs like Photos, Events, etc. If you'd like to re-order the tabs on your page, hover over it in the 'Views & Apps' part of your page we discussed earlier in this post, click the pencil button, and replace that tab with another from your list of available choices where it reads "Swap position with." If you're thinking about your custom tab as a call-to-action on your Facebook page, you'll want to make sure it's visible above the tab fold. On HubSpot's Facebook page below, you can see how our social media team has done this for our 'Inbound' event tab as well as our 'Free Ebook' tab.

Bonus Step for HubSpot Customers

If you're a HubSpot customer, there is an even easier way to create custom tabs. HubSpot has an app in our App Marketplace that streamlines and simplifies the process of creating Facebook tabs with knowledge of code required -- the Facebook Tab Customizer. While Facebook's new design no longer allows you to create a designated lead generating welcome page like you might have done before with the Facebook Welcome App, you can use the Facebook Tab Customizer App (or follow the steps in this blog post) to create landing pages that serve the same purpose!

For more detailed documentation and support from Facebook about creating custom Facebook page tabs, you can reference the official Facebook tutorial here.

Have you created your own custom tab for your Facebook business page? Share examples of your custom tabs in the comments!