Thanks to Woobox and their iframehost service, ANYONE can easily create their own Facebook Custom Page and even use their own icon if he/she wishes. This article provides a step by step guide.

Background

All the major brands have their own Facebook pages, such as Coke, Pepsi, Redbull, etc. The vast majority of these brands have added their own custom pages (also known as Custom tabs), and a lot of those custom pages have their own custom icon which is usually the brand's own logo. For example, see the left-hand menu taken from Pepsi’s Facebook page below. You can see that 3 of their custom pages (or custom tabs) have their own icons.

One of the many good things about Facebook is that it provides a relatively even playing field for everyone. Whatever a major brand can do with their Facebook page, YOU can do too, and custom Facebook pages are no exception. Now, since Facebook allowed iframes to be used on Facebook pages earlier this year, there are a lot of different “iframe” apps available for you to use to create your own custom Facebook pages. However, at the time of writing this article, there’s only ONE “iframe” app that lets you create your own custom Facebook pages with your OWN ICON, and that is the Static Iframe Tab by Woobox. This article will provide a step by step guide on creating your own custom Facebook Page with your own icon, utilizing this "Static Iframe Tab" app.

Step by Step guide on creating your own custom Facebook page (also known as tab) with your own logo.

1. Go to https://developers.facebook.com/apps
2. Click Create New App. Enter a name for the app, for example, it might be what you want to call the eventual custom page, such as “Connect with me”. However you can’t use symbols or the word “facebook” or “fb” in the name. Change Locale if needed, and then check I agree to the Facebook Terms and then click Continue.
3. Enter the security info and the click Submit.
4. Your app will then be created and you will now see the app's basic info.



5. Copy and paste the app id and app secret into notepad (or an equivalent), you’ll need these later on.
6. Click Edit icon and then browse to the 16x16 pixel icon you want to use to upload it.
7. Click App on Facebook underneath Cloud Services.



8. Fill in the following, HOWEVER, replace YOURAPPLICATIONID with your App ID, you copy and pasted this earlier into notepad, it’s also at the top of this page.
• Canvas URL - Enter http://YOURAPPLICATIONID.iframehost.com/
• Secure Canvas URL - Enter https://YOURAPPLICATIONID.iframehost.com/
9. Click Page Tab underneath Cloud Services.



10. Fill in the following, HOWEVER, replace YOURAPPLICATIONID with your App ID, you copy and pasted this earlier into notepad, it’s also at the top of this page.
• Tab URL - Enter http://YOURAPPLICATIONID.iframehost.com/tab
• Secure Tab URL- Enter https://YOURAPPLICATIONID.iframehost.com/tab
11. Click Save Changes.
12. Click View App Profile Page from the left-hand menu. Click Leave this page if prompted.



13. Click Add to My Page.



14. Click Add to Page next to the page you wish to add this app to followed by clicking Close.
15. Go to your Facebook page and you will see the new app added. It will be in the left-hand menu, you may have to click More to see it.
16. Click the new app. You will be asked to enter the app secret. Enter the app secret that you copy and pasted into notepad earlier (or go to https://developers.facebook.com/apps to get it again). Click Save App Settings and then click the app from the left-hand menu again. You will be asked for permission, click Allow.
17. You should now see the Tab Settings where you can finally start adding your html code, images, etc. If you want to add a “fan gate”, meaning if you want people to “like” your Facebook page before seeing your content, set Non-Fan Page Source to something other than “off” such as image or html. If this is set, whatever you specify under Non-Fan Page Source will display if the person on your Facebook page hasn’t “liked” the page, and if the person has “liked” it the person will see what you’ve specified under Page Source (at the top of the page). If you leave Non-Fan Page Source to “Off”, then whatever you specify in Page Source will be shown to everyone (people that have and haven’t “liked” your page). There are also some other items to bear in mind at below.

Changing the Tab Name

You may want to change the name of your new custom page (or tab).

1. To change the name of the tab, click on your page's wall and then click Edit Page on the right. Click Apps from the left-hand menu.
2. Find the new app from the list and then click Edit Settings. Enter the new tab name and click Save.

Things to bear in mind

1. When entering in HTML code into the page source or non-fan page source, you don’t need to add any html headers, etc. Literally just the html code you want to see. You might want to use the editor first to add some text or images first, save it, and then go back and look at the source. This will give you a feel for what little you need.
2. If you have multiple images that you want to display on your new custom Facebook page/tab you can host those images on your own website, OR you can use Amazon’s S3, see How to use Amazon S3 with your Website.
3. The iframe app has it’s own stats so you don’t need to add any google analytics code. Just go to the custom page/tab and you will see Stats in the top right of the page.
4. Remember to support users that use Facebook in secure mode (in Facebook go to Account - Account Settings - Security - Secure Browsing = Enabled) which uses HTTPS. To this end any images, links, etc in your html code need to be HTTPS instead of HTTP, otherwise people coming to your Facebook page in secure mode will get a message that will warn them that the page isn't secure, which may prevent people from wanting to come to your page. According to Facebook, at the time of writing this article, 15% of Facebook users accessed Facebook in secure mode.

Related Articles

• How to CORRECTLY add the Facebook Social plugins to your website
• Share on Facebook – How to embed your own Videos on someone's Facebook wall when your web pages are “Shared” on Facebook
• Share on Facebook - Customizing the Text and Images that are posted when your web pages are “Shared” on Facebook
• Overview of the New Facebook Social Plugins – Part 1 of 3

Please leave me a comment if you found this article useful or if you have any questions.

< Prev		Next >