Create Custom Tabs For Facebook Timeline In Under 5 Minutes!

Facebook Tabs for Pages is an important but easily overlooked tool for enhancing your Facebook Business Pages. They add color, definition, and are great for marketing a specific product or point. Facebook Tabs are essentially mini web pages that are embedded into your Facebook Timeline for viewers to see more about your product. Their prominent place under the cover photo is excellent for displaying a video, Google Map to your location, product slideshow or anything else that adds value and interest to your page. You don’t need a big marketing budget or hired designers to have a Facebook Page as interesting and colorful as the big brands! Let’s look at how easy it is to create your own custom Tab in minutes!

Because each Tab is essentially a web page, the first thing you need to do is have a place to host the HTML, CSS, Images, Javascript and other files associated with your new web pages. The best option for this is Google Sites. It’s a free service that comes with an easy editor to create the pages which can be integrated with Google Analytics to track visits to your Facebook Pages, making it not only custom but useful.

Navigate to Google Sites and enter your Gmail account information to begin. Click Create to start a new web page leaving the tab on Blank Template. Name your site and the Site Location will auto-fill. The name will need to be unique so if you have trouble getting a name to be accepted, just add an ending title that is unique to your Tab and it will process.

Tabs-google-site-setup

For the theme, choose the Blank Slate template and click Create.

Tabs-google-template

In your site settings, click Site Layout. To customize the way the page displays on Facebook, we want to change the layout. Click on the tab Change Site Layout.

Tabs-edit-sidebar

In the Site Width column, un-check the default tab and set the width to 100%. This is so your content will occupy the entire width of the Facebook canvas. We don’t need the Sidebar, Header, or Footer features here either so you can un-check those boxes and click OK.

Tabs-change-layout

The next thing we can hide are the customized footer settings. In Systems Footer, click on Customize System Footer Links and check all of the boxes to hide those options. Click OK and save all your changes.

Tabs-system-footer

The last thing in this step is to enable Google Analytics for the site so you can track visits to your Facebook Page. You can do this by going to the General site settings and scroll down to the Statistics tab. Enable Google Analytics and enter your Web Property ID and Save.

Tabs-enable-analytics

Go to the Home tab of your new Google Site and click on the page icon in the top right of the tool bar.

Tabs-create-new-page

Name the page and press Create at the top of the screen.

Tabs-name-page

Compose your new page in Google Sites by adding some content. If you know how to write code, switch to the HTML view and add the code directly to your page. If you prefer to use the standard view, simply use the built in editor to enter your text as you would in a Word document.

Tabs-add-content

You can add anything from pictures to video, maps, or even spreadsheets and tables. Just click on the Insert tab to see your options.

Tabs-Insert

To make a Tab with a map to your location, create a new page as you did above but this time click Insert and choose the Maps tab. Enter the Address or Name of the location and click on the search box to propagate the map. When you have it directed to your location, click Select to add it to the page.

Tabs-add-map

Now that you have created your app, it’s time to configure it to be displayed in your Facebook Page. Go to the Facebook Developer Site and choose Apps. If you’re using this site for the first time, you’ll have to give the app permission to access your page. Click on Go To App and then click on Create New App.

Give your Facebook App a name and click Continue.

Tabs-create-new-app

You will need the URL from your Google Site Page for the next step so go back to your Google Site and right click on the page you want to display as a Tab in Facebook. Copy the URL and paste it in the box for Page Tab URL.

Tabs-copy-link

Scroll down to the Page Tab Options and give your Tab a name. For the Page Tab, you will need to remove the ( S ) from https:// Repeat this step for the Secure Page Tab URL but leave in the ( S ). You should also use a custom image here that will be displayed on your Facebook Page to make your Tab stand out. Click Change to browse your files and upload a new image.

Tabs-AppID

Adding a custom image can be done for the default Tabs created by Facebook by following the steps to add a Page Tab Image.

Enter the following URL into your clip board and replace the XYZ at the end with your App ID from the Developer Page you were just working in.

Tabs-URL

After you add your App ID to the URL, copy the entire URL and open it in your browser. It will open the Add Page Tab menu. Select your page from the drop down menu and click Add Page Tab. Now you will see your new Facebook Tab displayed under your Timeline cover photo.

Tabs-add-to-timeline

Now that you see how easy it is to create your own custom Tabs for your Timeline Page, give it a try and make your Facebook page stand out from the crowd! come back and post some links to your custom tabs so we can see what cool designers we have out there!