Create Custom Facebook Tab With Custom Icon (1)

To read part 2 then click this link "Design Welcome Page For your Facebook Fan Page"

Custom-Facebook-tabThis is part one of our tutorial series on "How to create a Welcome WebPage on Facebook". To add branded look to your Fan Pages you need a custom tab so that you could then design the tab to blend your website theme. A tab is basically a link that will appear under the wall and info tabs. On clicking the tab your visitors or fans will be able to see the content inside that tab page.


Live Demo

Follow these easy steps,

1. Set Up New Facebook Tab App

Kindly Visit Facebook Apps Page and then click the + Set Up New App button.
set up new app
Set the App Name with either your website name or blog name. You can give any name you want and you can change it later too.
app name
Click the the Create App button and enter some security code to proceed further.

2. Configure your Tab App Settings

In the About section, click the "Change you icon" link to upload a 16px by 16px Icon for your tab. My advise is that you upload your website logo like I have done,
change-FB-icon
Before you save your changes, click the Facebook Integration tab. On the Facebook Integration settings page fill up the blanks using the information below. Make sure you note down your Application ID as shown in the screenshot below,
Canvas Page - It is optional. Just write your blog name here.
In each process below, replace YOURAPPLICATIONID with your Application ID
Canvas URL - Enter http://YOURAPPLICATIONID.iframehost.com/
Secure Canvas URL - Enter https://YOURAPPLICATIONID.iframehost.com/
Tab URL - Enter http://YOURAPPLICATIONID.iframehost.com/tab
Secure Tab URL - Enter https://YOURAPPLICATIONID.iframehost.com/tab
IFrame Size - Choose Auto-resize
FACEBOOK-INTEGRATION
Click the Save Changes button. Congratulations you just created a tab successfully! Now just few more steps.

3. Add your Custom Tab App to your Fan/Like Page

Copy your API key and App Secret code and keep them safe in a notepad as we will be needing them later. Now click the Application Profile Page link.
Add-Tab-to-Like-Page
Next click the Add to My Page link to install the page tab
add-to-my-page
Finally select the page you would like to install the tab on.
adding-iframe-tab-to-facebo

4. Visit Your Facebook Custom Tab Page

You will now find the custom tab appearing under the wall and info tabs. Click your Tab. When you visit the tab page for the first time, you will be asked to enter your API Key and APP Secret. Simply fill up the blanks with the App number codes you saved  in a notepad.
facebook-api-key

5. You are now Ready To Design your Welcome Page!

After completing a normal formality, you will now see Woobox's beautiful WYSIWYG Editor just like your Blogger Editor, where you can create amazing designs using your imagination. This is the end of tutorial part -1. On my next tutorial I will be sharing how can you design the Welcome landing page with CSS, HTML and JavaScript. Make sure you don't miss any part by subscribing to our free email updates. The fun is yet to begin! Peace out. :d
WYSIWYG Editor
PS: Keep all settings default.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »