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 pointsTypically 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

FireShot capture 034   Porsche I Facebook   www facebook com porsche vapp 73697663718 porsche sk

2. Custom Facebook Page Design by Coca Cola

FireShot capture 035   Coca Cola I Facebook   www facebook com cocacola skapp 157721657609068

3. Brilliant Custom Facebook Page Design by McDonald’s

FireShot capture 036   McDonalds I Facebook   www facebook com McDonalds vapp 6009294086

4. Amazing Custom Facebook Page Design Jeep

FireShot capture 037   Jeep   www facebook com McDonalds vapp 6009294086 jeep skapp 204242762924

5. Impressive Facebook Page Design by Skittles

FireShot capture 038   Skittles   www facebook com skittles

6.Custom Facebook Page Design by Blackberry

FireShot capture 039   BlackBerry   www facebook com skittles BlackBerry

7. Katy Perry - Custom Facebook Page Design

FireShot capture 040   Katy Perry   www facebook com Sony vapp 6009294086 katyperry skapp 178091

8. Sony Ericsson’s Custom Facebook Page

FireShot capture 041   Sony Ericsson   www facebook com Sony vapp 6009294086 sonyericsson

9.Custom Facebook Page Design Dreamworks

FireShot capture 042   DreamWorks Animation   www facebook com DreamWorksAnimation skapp 1268632

10.Custom Facebook Page Design Shrek

FireShot capture 043   Shrek   www facebook com DreamWorksAnimation skapp 126863277340863 Shrek

11.Custom Facebook Page Design Kung Fu Panda

FireShot capture 044   Kung Fu Panda   www facebook com DreamWorksAnimation skapp 12686327734086

12.Custom Facebook Page Design Howcast

FireShot capture 045   Howcast   www facebook com youtube vapp 132886723397538 howcast

13.Custom Facebook Page Design Subway

FireShot capture 046   Subway   www facebook com Cranium subway skapp 10442206389

14. Custom Facebook Page Design X Box

FireShot capture 047   Xbox   www facebook com Cranium xbox skapp 105747796173439

15.Custom Facebook Page Design Microsoft

FireShot capture 048   Microsoft   www facebook com Microsoft

16.Custom Facebook Page Design Bing

FireShot capture 049   Bing   www facebook com Microsoft Bing skapp 131344773561855

17.Custom Facebook Page Design Windows

FireShot capture 050   Windows   www facebook com Microsoft windows

18.Custom Facebook Page Design Chevrolet

FireShot capture 051   Chevrolet Arabia   www facebook com HondaCivicTour vapp 156939184341874 C

19.Custom Facebook Page Design Tommy Hilfiger

FireShot capture 052   Tommy Hilfiger   www facebook com redmango tommyhilfiger skapp 1044220638

20.Custom Facebook Page Design Ebay

FireShot capture 053   eBay   www facebook com redmango eBay skapp 164953773555239

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.
FireShot capture 054   Create Application   www facebook com developers createapp php app id1613
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.
FireShot capture 056   Edit Your page name goes here   www facebook com developers editapp php a
Step 6 – Select canvas type
FireShot capture 057   Edit ManiKarthik   www facebook com developers editapp php app id16133053
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
FireShot capture 058   Edit ManiKarthik   www facebook com developers editapp php app id16133053
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

  1. 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.
    FireShot capture 059   Chevrolet Arabia   www facebook com ChevroletArabia
    FireShot capture 060   Bing   www facebook com eBay Bing
    Wrong way to put iconsRight way to use icons

  2. Try best to include a privacy policy and terms and conditionsLets 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.
  3. DimensionsMake sure the width of page is not beyond 520 pixels or else the content won’t show up properly on facebook page.
  4. Switch off scrollbarsIn 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.
  5. Content on facebook pageTry 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.

0 comments:

Post a Comment

 
Twitter Bird Gadget