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!

22 comments

  1. I follow each single step and it didn’t work for me.  Can you help me find out what is going on? Thank you

    • Gustavo, Without seeing the steps you are taking, it’s hard to know what went wrong for you but I have walked through the steps again and don’t see anything that would cause you not to be able to create one. The one thing I did run into during testing, is if you have multiple Facebook accounts, make sure you’re logged into the one you are loading this tab to. Good Luck!

  2. Jessica,

    Awesome, I hope you can have more of these tutorials for everyone.

    Thank you very much,

    Regards,
    Daryl

  3. Its working only when i have my google sites account logged in the back ground.
    Any help on this ?

    • I’m not sure why that is happening. Mine is still in tact even when not logged in and I don’t see any answers on the internet that it’s a common occurrence. I’ll keep looking for an answer though.

  4. Jessica –

    I’ve followed all of these directions from numerous posts and am still having difficulties. I’ve used google sites to create the tab and am having issues. First, I’ve discovered that you are not able to view the contents of the tab if you’re not logged into gmail. Is that typical? Second, there is a heading area (not the heading that I unchecked in the set-up process) above that shows “edit” “more” and then email information that is visible to the public. I can not seem to get this to disappear. Unless there have been recent changes to this process or I accidently overlooked a step or something minute, I am completely confused. Please any advice would be greatly appreciated. I know this could be a great tool for my organization if I can work out these bugs.

    • Emily,
      I know that Google is making changes to the apps and allowances for different payment levels but I went through the process again today and am able to complete it without the issues you mentioned. If you want to send me a private message to jessicaprouty@maketecheasier.com with your login information, I would be happy to take a look and see what I can find and fix if possible.

      • Dear Jessica,
        thanks for the useful tutorial. I’m currently experiencing the same problem occurred to Emily – the heading area thing – and I really don’t know how to solve it.
        Any advice?
        Thanks a lot!

      • I forgot to mention that Google Sites does not shows me the sitemap as it does in your pic. No matter how many page I add, it only shows me the homepage. And I’m not able to find all the other pages I created…
        Any advice will be more than appreciated!
        Thanks again :)

  5. Thanks for a very helpful process.

    Unfortunately after following the process carefully, I get the following ….

    “This application does not support integration with your profile.”

    Is there anything you can pinpoint as my possible problem.

    Regards

    Dave

    • I haven’t encountered this myself but doing a Google search shows that it’s a possible mistake in the setup. Make sure you’re putting the “Site” URL (the URL for the site you created in Google sites) in the Page Tab section under the Facebook Developers page where you are creating the tab. You can send me a screen shot of your setup to jessicaprouty@maketecheasier.com if you want me to take a look at what might be setup wrong.

  6. This was a great tutorial. I was successful in generating a custom tab. However, I have one question. I want people to be able to click on the custom tab content to go to my organization’s home page. How do I add a link in the tab page content to point people to my site?

    Thanks,
    Jill

    • If you are using Google Sites, you can add an hyperlink (pointing back to
      your site) to the images or whatever content you are displaying. In this
      way, when people click on the images, they will be redirected to your site.

  7. Thank you soooo much! I was pulling my hear out trying to figure out how to make a simple app for my page. Following your guide, I managed to do it! You saved my sanity!! ^_^

Comments are closed.

Sponsored Stories