How to Create Custom Facebook Tabs with HTML

If you’re well versed in web technology and want to design your own custom tabs from scratch for your Facebook Business Page, you can do so through either of these two methods:

  • Use the Static HTML: iframes tabs application.

  • Pull a custom web page through an iframe application and add it to your Page.

How to create a custom Facebook tab with the Static HTML: iframe tabs application

If you know even basic HTML, creating a custom tab is easy with the Static HTML: iframe tabs application. You can easily create custom tabs.

This app lets you build any content you want inside your tab. You can write anything you want in the editor, and it appears on your Facebook Page tab. You can use HTML, JavaScript, or CSS.

One of the best things about the Static HTML: iframe tabs app is the amount of support from the community of thousands of other Facebook Page managers using the app.

image0.jpg

How to create a hosted custom Facebook tab

The second way to create your own custom tab is to pull a hosted web page into an iframe app and add it to your Facebook Page. Here are the steps to add a custom iframe tab to your Facebook Page.

Adding a self-hosted custom Facebook app to your Facebook Page requires a significant amount of knowledge of PHP, HTML, and Facebook’s Developer tools. Find someone to help you if you don’t know how to do this.

  1. Create an HTML or PHP file and upload it to your web server. Make sure that the width of this web page doesn’t exceed 810 pixels. A Facebook iframe app displays this web page as a tab on your Facebook Page.

  2. Go to the Facebook Developers site, create an account if you don’t have one yet.

  3. Select Create New App in the upper right.

  4. Fill in the App Name field with the name of your application.

    This is a unique name for the application you’re creating. Because only you will see this info, you can simply use the name of your custom tab.

    Leave the App Namespace field blank for now. (You can always fill it in later.)

  5. Click Continue.

    image1.jpg
  6. Fill in the captcha on the next screen and then click Submit.

    This brings you to the basic settings tab of your app.

  7. At the bottom of the Basic info tab, click the Page Tab link.

    Several fields appear.

  8. In the Page Tab fields, enter the following information.

    • Page Tab Name: Enter the name of your tab that users will see.

    • Page Tab URL: Enter the URL for the web app you created in Step 1. Content from this URL will be pulled into your Facebook Page tab.

    • Secure Page Tab URL: Enter the secure URL for the web app you created in Step 1. Facebook requires that all apps have secure URLs.

    • Page Tab Image: Upload your custom tab image. The dimensions for this image are 111 x 74 pixels.

    • Page Tab Width: Choose either 810 pixels or 520 pixels.

      image2.jpg
  9. Click Save Changes.

  10. To add the app to your Page, enter the following URL into a browser:

    https://www.facebook.com/dialog/pagetab?app_id=your app ID&redirect_uri=https://facebook.com

    Replace your app ID with the ID of your app.

    image3.jpg
  11. Select the Page you want to add your app to and click the Add Page Tab button.

    To change the content on this tab, edit the web page you created on your server.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.