facebook-custom-tab

How to add a custom tab to your Facebook page

Let’s say you’ve already created a fantastic Facebook cover photo, you’re posting engaging social media content on the regular, and your Facebook Page is totally optimized for the Timeline design. You savvy social media marketer, you.

But are you ready to take your Facebook Page to the next level?

If so, we think you might be game for a new Facebook marketing challenge: creating custom Facebook tabs. Tabs give you a way to showcase custom content alongside the default tabs (e.g. “About” and “Likes”) and any ready-made apps you may have already added to your page.

Custom tabs are valuable to your social media marketing strategy because they let you create a much richer user experience on Facebook and control the content your visitors and followers see when they come to your page.

 

Step 1: “Create the Content to Display Within Your Custom Tab”

Think of your Facebook tab like an iFrame that loads inside Facebook. In other words, you can display pretty much whatever content you’d like inside your custom Facebook tab. You do this by creating a web page outside of Facebook. The contents of this page are what you’ll tell Facebook to display within your custom tab.

Important: Facebook requires you to provide a secure URL for your web page in order to set up your Facebook tab. A secure URL is a URL with “https://” instead of “http://” at the front. If the website you use to create your Facebook Page tab does not support https, Facebook will not allow you to set up a custom tab, and you’ll need to get an SSL certificate first.

To ensure that your page’s content displays correctly on Facebook, make sure 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 also less than either 520px or 810px, depending on how wide you chose to make the content of your tab. You’ll also want to get rid of any margin or padding around the body of your content so it’s optimized for the space Facebook provides within the tab.

Since Facebook’s latest Business Page layout is wider than it used to be, I recommend making the content of your tab 810px. Facebook’s previous Business Page layout was much narrower at 520px.

facebook-custom-tab-width

 

Step 2: Login in to Facebook as a Facebook developer

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

 

Step 3: Create and name your new app

1)Click the blue ‘+ Add a New App‘ button from left side of the screen. Then choose the ‘Website‘ button at the far right.

add-new-app

thedamlek-add-new-app-details

2)  Go to settings and click basic

thedamek-facebook-app-settings

scroll down to “+ Add Platform”, then choose page tab

facebook-add-platform

 

3) Now you can configure some settings for your new tab and save changes 

Next, add the ‘Secure Page Tab URL‘ of the external web page you created in step 1. Remember, Facebook requires a secure URL (which starts with https://), otherwise it won’t work. (See step 1 for more details.) Then specify whether you want a wide page tab (810px), which I recommend so your content fills the full width of the tab. This should also align with the width of the page you set up in step 1. You can leave ‘Page Tab Edit URL‘ field blank. You can also upload a ‘Page Tab Image‘ here (which must be 111 x 74 pixels), although to be honest, I’m not sure how Facebook uses this image since it no longer uses thumbnails in the Facebook tab navigation on your page.

faceook-custom-tab

 

STEP 4: Add Your New Custom Tab to Your Facebook Page 

This step can be a bit tricky, so read carefully. In order to add your new tab to your Business Page, you’ll need to visit a link with several custom URL parameters. I know it sounds strange, but bear with me. Here’s the link you’ll need to modify:

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

 

1) First, replace the parts in red in the URL above — YOUR_APP_ID and YOUR_URL — with the ‘App ID‘ found in the basic settings for your app, and your ‘Secure Page Tab

custom-tab-facebook-appid

facebook-cutom-tab

 

So using my example, my new URL would be:

http://www.facebook.com/dialog/pagetab?app_id=526212791503738&next=https://thedamlek.com/contact/

 

2) Once you have your URL, visit it in your browser. When you do, this will pop up …

facebook-custom-tab-add-page-tab

3) Last but not least, select the Facebook Page you want to add your tab to. Then click ‘Add Page Tab.’ Keep in mind that you’ll need to be an administrator of the Facebook Page in order to add the tab.

Voila! Your custom Facebook tab should now be added to your page. Go check and see!

 

Note:

Custom tab feature is restricted to use for selected pages and apps only. We require page fans > 2000.

We’ve heard rumblings of people getting 405 and 403 “Forbidden” errors within their page tabs once they’ve been set up. When a Facebook user clicks on your custom tab, their browser sends a HTTP POST request to your tab’s Secure Page Tab URL. They’ll see this error message if the page you’re using to host the content of your Facebook tab forbids HTTP POST requests. If you see these errors, your best course of action is to work with an experienced developer to help you set up your custom Facebook tab.

Damilola Adeleke

Damilola Adeleke

He is the founder of thedamlek.com. He is popularly called in the digital marketing space as "damlek the strategist". He is a web developer and a digital marketing consultant. An entrepreneur and a innovator. He likes to try out new things and also likes to grow new viable business.

Leave a Reply

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

Sign up to our newsletter!