20 Amazing Custom Facebook Page Designs
Once it was the FBML app. There were limitations. And then facebook introduced iframes. Since then, custom facebook page designs have grown to a complete new level of unlimited possibilities. Flash, Ajax, jQuery – all that you can think of in design is now available on facebook pages.
A custom facebook page design is no easy game. Because a facebook page design is your landing page, you have to do a lot of thinking about how effective it should be. As a business, you might have certain objectives or action points in your mind. For example, when a user visits or lands on you custom facebook page, he should click on the like button or he should click on the subscribe button, things like that. Its very important to make sure your custom facebook page design actually meet up all those demands and not just remain yet another facebook page design.
How to design a custom facebook page?
Several things go into consideration. Remember that a custom facebook page design is as important as your webpage design. Only that facebook page design might be a little more tougher if at all, because you have several limitations as compared to a web design.
However, designing a custom facebook page is not difficult. Here are some guidelines.
1. Do not clutter
Imagine how a user would behave once when he is on your facebook page? Do not clutter a lot of information on your facebook pages. Social media users are generally very impatient, and they only skim through the information. So try to make it simple and do not clutter with unwanted information.
2. Make it simple and clear
Try to make the design simple. Simple is elegant. A cluttered one is easily recognized as cheap. It takes lot of guts to make it simple and add lot of space around but an efficient design is not about putting in whatever you can think about.
3. Make sure there are action points
Typically your business would have action points expected from the user. Like to click the like button or to subscribe to an email list or something like that. Make sure your design does justice to that objective.
Here are some very well done custom facebook page designs.
Note that most of them adhere to the above said points.
1. Custom Facebook Page Design by Porsche

2. Custom Facebook Page Design by Coca Cola

3. Brilliant Custom Facebook Page Design by McDonald’s

4. Amazing Custom Facebook Page Design Jeep

5. Impressive Facebook Page Design by Skittles

6.Custom Facebook Page Design by Blackberry

7. Katy Perry - Custom Facebook Page Design

8. Sony Ericsson’s Custom Facebook Page

9.Custom Facebook Page Design Dreamworks

10.Custom Facebook Page Design Shrek

11.Custom Facebook Page Design Kung Fu Panda

12.Custom Facebook Page Design Howcast

13.Custom Facebook Page Design Subway

14. Custom Facebook Page Design X Box

15.Custom Facebook Page Design Microsoft

16.Custom Facebook Page Design Bing

17.Custom Facebook Page Design Windows

18.Custom Facebook Page Design Chevrolet

19.Custom Facebook Page Design Tommy Hilfiger

20.Custom Facebook Page Design Ebay

How to design a custom facebook landing page in FBML / iframe ?
Step 1 – Got to Facebook Developers.
Step 2 – Click on “Create a new app” button.
Step 3 – Give in the app details in the fields asked.

Step 4 – Enter the application details as requested. Make sure you have a privacy policy and terms and conditions set up on html files and paste the urls in the field. Now, this isn’t necessary, but if you’re going for a popular application / page that has data fetching integrated, then it might be a good idea to have both terms and conditions and privacy policy.
For simple landing pages, you can skip it.
Step 5 – Enter site details.

Step 6 – Select canvas type

Select canvas type as “iFrame” and iFrame size as “Auto resize” (this is to avoid scroll bars to popup when the app goes beyond the specified length or height.)
Step 7 – Specify the page URL

Tab name : This is the tab name that appears on the left navigation bar on the facebook page.
The icon that appears next to it, can be changed in Step 1 (Website settings).
Step 8 – Designing the page
When designing the page, make sure the width is not more than 520 pixels, so that it fits the facebook page space. You can embed any media through the iframe, videos, flash, sound, html or just about any web element.
Those best facebook pages are the ones where the elements are designed in such a way that it doesn’t hinder the facebook experience but enhances the user experience in interactive ways.
Tips to create a good custom facebook page
- Don’t forget to add an icon and logo to the application so that the default icon does not show up in your navigation area (see screenshot.). This makes your page look un-professional. You could use many of those free icon sets available, that will fit very well with the rest of facebook icons.


Wrong way to put icons Right way to use icons - Try best to include a privacy policy and terms and conditions
Lets say you’re a popular brand and you’ve data fetching elements like email forms etc on your page. In such cases, its safe to add privacy policies to your page so that it aligns itself to facebook’s terms and conditions. - Dimensions
Make sure the width of page is not beyond 520 pixels or else the content won’t show up properly on facebook page. - Switch off scrollbars
In the canvas app settings page, make sure you switch off enabling scroll bars or else if the content goes beyond the specified length, it would get truncated with scroll bars. - Content on facebook page
Try to make the content on page minimal unless absolutely necessary. Facebook users get triggered by content that are similar to that are being shared on facebook, hence too much text and lot of action points might confuse users.
Greate Greate Greate collection!!!!!!!!!!!!!
Great Mani, Great Case study on facebook iframe and fbml pages.
Excellent review, very useful list and ideas, many thanks.
Great article Mani, there are some great examples here and love the “How to” inclusion!
Awesome review. Very good samples. Thanks!
awesome time to explain this great work Mr.Mani !!!
thanks mani….
its Great article…
Hey, You have put together a VERY solid list of resources here and very helpfull! Will certainly share it. Thanks!
Great & solid reference resources! Thanks a ton for sharing this.
is it we able to put our logo in the tab while i see lot of professional fan page doing that. I been wasting time to use FBML. I would try this application and have a try. Hope i will get a good landing page for my company as well.
These are great! You should also check out Kenra Professional’s page; designed by MediaFuel.net & The Momentum Group. http:/on.fb.me/oNWJEV
These are some awesome desings, never knew so much was possible with Facebook pages