Facebook Custom Tab

Today, one of our reader have raised a query on forums about ‘How to create a Facebook Custom tab’?

Its an interesting question and facebook custom tab is demanded heavily by most of our clients. So, we decided to write a detailed posts with all the required steps to enrich our readers and social media enthusiasts in our community.

What are Facebook Custom Tabs?

Under cover image on your fan page, you will find some default tabs like Photos, Events, Videos and Notes etc. But what if you want to have some custom information in such tabs?  For example, we have provided a tab for ‘Recruitment’ from where candidates can apply for the job. Interesting, isn’t it?

We have developed lot many such creative custom tabs for our clients for varied purposes like restaurant menu, displaying teams, creating a video gallery, showing events, google maps and much more.

How to create Facebook Custom Tabs?

Before starting the development of Facebook pages, lets understand how it functions. With the help of IFRAME tags, facebook allows to display the webpages inside the custom tabs. Only condition is that the web-pages should be hosted over SSL secured (https://) pages. For beginners, you can use the Hiroku hosting which is free. 🙂

Here in the given sample, we will see how to display a webpage on our custom tab. In this example, we will be displaying our own webpage which is on ssl secured server.

Step 1: Login on Facebook Developers Account

Open developers.facebook.com. You need not be a geek or coder to login here. Your routine Facebook login will serve the purpose.

Step 2: Create a New App

If you are creating it for first time, click on ‘Create new app’ on top left hand corner as shown in below image.

Create a new tab - Facebook Custom Tab

Step 3: Name your App

Based on the purpose of app, you can give it a desired name. You will also be required to create a ‘Namespace’ which is nothing but a unique ID for your app. Just refer the below image.

Name your tab - Facebook Custom Tab

Step 4: Give your app info and upload app icon

Go to ‘Page Tab’ option and give the name to your page tab. You would be required to give the page tab url, which is the webpage which will be displayed via iframe. Please note in the below image that its essential to give the secure page tab url as well. As mentioned above, its essential to have ssl secured webpage to create your facebook app. If you do not use ssl secured pages, your app may get displayed only on browsers where secure browsing is disabled.

Tab info & apps icon - Facebook Custom Tab

Now upload a custom image for your app icon. You must take it into consideration that this would be displayed prominently to your users and hence the image should be thoughtfully used. The required dimensions for this thumbnail image is 111×74 px.

Click on save changes and you are almost done. 🙂

Step 5: Add your tab to your fan page

It’s the last and an easiest step. You simply need to replace the app ID and URL in the following link.

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

Copy the customized link and open in your browser. You will get an option to ‘Add tab to your page’ as given in below image.

add to page - Facebook custom tab

You should now see that a Custom tab is added to your page as shown in below image.

Facebook Custom Tab on SocialChamps

You can use Facebook Custom Tabs for varied purposes with lot of creativity.

Please feel free to discuss if you are facing any problems in creating custom tabs. We would love to answer your queries.

Image credits: Rucha

Leave a Reply