A 6 Step Tutorial – Custom Tabs for Facebook Business Pages

December 7, 2012 | By

Earlier, you could bring in your own content along with tabs like “Photos” and “Likes”. One of the changes the advent of Timeline has wrought in Facebook’s settings has been the way you could customize business page tabs.

Being able to create customizable tabs on Facebook is a huge plus. You can customize them according to your requirements – whether you want to generate leads or promote a contest, you can do it all! Even with the debut of Timeline, it’s still easy enough to customize tabs for your Facebook business page.

What we have here is a simple tutorial on creating custom tabs for Facebook business pages. In order to get there, this is the 6-step process you should follow:

1. You need to login at the Facebook developer site:

Go to https://developers.facebook.com/apps and register as a Facebook Developer by verifying your Facebook account (login with your usual Facebook login details).

2. Create and christen your app:

To create a new app, you need to click on “Create a New App” in the top left corner of the page. You then need to give a “Display Name” to your app, which is what your app/tab will be called. You also have to create a unique ID for your app in the “App Namespace” field:

Customized Tabs For Business Page - Position2

3. Add an image and basic app info:

Pick out a smashing image for your app. Since this is going to be on display at the top of your Facebook page, it’s like a visual call-to-action! So you need to select an image that calls out to people to click on it. It’s also possible to upload a custom image by clicking on “edit icon”.

Add your basic information, the domain name and the category to the app:

Facebook Tab - Position2

Generate content that’ll display inside your app’s tab:

The next step on the way up the ladder is to create a web page off Facebook. This web page’s content is what displays within your customized tab. You need to make sure that the width of the web page is set at either 100% or at 520px or 810px. You should also make sure that all the images, videos etc used on the web page measure lesser than 520px or 810px (depending on how wide you make the content of your tab).

Since the new Facebook business page layout is 810px, it’s better to make the content of your tab 810px instead of 520px like the old Facebook business page layout:

Facebook tab

4. Inform Facebook on the content you want to share on your tab:

Next, you need to go to the app settings at developers.facebook.com, scroll down to the “Select how your app integrates with Facebook” section and select “Page Tab”. Name your tab whatever you want to name it as, copy the URL of the web page you created in the previous step and paste it in the “Page Tab URL” field.

In order for everyone to be able to see your new customized tab, a secure URL is necessary. This URL should be the same as the one you provided for the page tab, but with https:// instead of http:// at the beginning of the link. If your site doesn’t support an https connection, your app will still work for people who’ve disabled secure browsing in their Facebook settings. However, you should consider getting an SSL certification.

Save the changes you made to the app:

Position2 Page Tab info

6. Embed your app on your Facebook page:

To embed your app on your Facebook page, you need to go to a link with customized URL parameters:

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

You need to replace the parts in bold, “YOUR_APP_ID” and “YOUR_URL” with the information Facebook provides for your custom app, which is your “App ID/API Key” and your “Site URL” (site URL is your company website URL):

Facebook tab settings url parameters

Your customized Facebook tab should be included among your standard tabs like Photos, Likes etc now. If you want to re-arrange the tabs on your page, hover over the “Views & Apps” section of your page, click the pencil button (to edit) and replace that tab with another one from the list of choices which reads “Swap position with”.

Position2 EVA app

Have you dabbled with custom tabs? If you have, tell us about the tabs you’ve created in the comments section below!

Posted in SMM

Get in Touch.
We’d love to hear from you.

 

Subscribe to our monthly and
weekly email newsletters

 

Toll-free (US):

800-725-5507