You must have seen those attractive custom tabs on the Facebook fan pages of your favorite businesses. With the help of these custom tabs, landing pages and welcome screens can easily be created. Custom tabs allow page owners to customize in terms of inserting text, images and even videos for a much richer customer experience. Facebook allows its users to create custom tabs with the static HTML iFrame application.
After integrating the iFrame application on the fan page, you can insert any web page that is hosted outside of Facebook.
Before adding a custom tab, make sure you have a HTML web page hosted on your own domain with a maximum width of 520 pixels. This will help you to avoid resizing after it is embedded within your Facebook iFrame application.
You will be taken to your application’s settings page. Click on the ‘edit icon’ button below the image icon to select your desired graphic which serves as an identification for your app. Similarly, you can also change the display image for your app as well.
Select “App on Facebook” to see two options. In the “Canvas URL” bar, type in the URL of the web page that you would like to display on your custom tab. Also provide a secure canvas URL by adding the term ‘https://’ in the URL.
Select “Page Tab” to see a drop down menu of options. Type in the desired tab name in the “Page Tab Name” bar. The name will be shown as it is on your Facebook page. For example: ‘Welcome’, ‘Contest’ etc
Type in the URL of your HTML web page in the “Page Tab URL” bar. Content will be pulled into the iFrame app through this URL. Repeat the process with the “Secure Page Tab URL” by adding ‘https://’ to the URL. Once that is done, click on “Save Changes” to confirm.