Wednesday, April 20, 2011

20 amazing custom facebook designs

Having entered the customized Facebook page arena some time ago, we appreciate when others share their thoughts and designs in this area.

Our theory is, take control. Facebook is a beautiful, open thought forum of text, images and video expression, but it's important to be the gatekeeper.

By customizing your Facebook welcome page, you control that all important first impress. You decide where they should click, read, view next. That way you have the powerful Facebook functionality at your service, but still have someone driving your agenda bus.

Here are 20 amazing custom Facebook designs recently shared by the Daily Blogger.

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. Here are some of the brilliantly designed facebook pages.

1. Porsche

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

2. Coca Cola

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

3. McDonald’s

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

4. Jeep

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

5. Skittles

SEO Blog FireShot capture 038   Skittles   www facebook com skittles

6. Blackberry

SEO Blog FireShot capture 039   BlackBerry   www facebook com skittles BlackBerry

7. Katy Perry

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

8. Sony Ericsson

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

9. Dreamworks

SEO Blog FireShot capture 042   DreamWorks Animation   www facebook com DreamWorksAnimation skapp 1268632

10. Shrek

SEO Blog FireShot capture 043   Shrek   www facebook com DreamWorksAnimation skapp 126863277340863 Shrek

11. Kung Fu Panda

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

12. Howcast

SEO Blog FireShot capture 045   Howcast   www facebook com youtube vapp 132886723397538 howcast

13. Subway

SEO Blog FireShot capture 046   Subway   www facebook com Cranium subway skapp 10442206389

14. X Box

SEO Blog FireShot capture 047   Xbox   www facebook com Cranium xbox skapp 105747796173439

15. Microsoft

SEO Blog FireShot capture 048   Microsoft   www facebook com Microsoft

16. Bing

SEO Blog FireShot capture 049   Bing   www facebook com Microsoft Bing skapp 131344773561855

17. Windows

SEO Blog FireShot capture 050   Windows   www facebook com Microsoft windows

18. Chevrolet

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

19. Tommy Hilfiger

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

20. Ebay

SEO Blog 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.

SEO Blog 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.

SEO Blog FireShot capture 056   Edit Your page name goes here   www facebook com developers editapp php a

Step 6 – Select canvas type

SEO Blog 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

SEO Blog 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.

    SEO Blog FireShot capture 059   Chevrolet Arabia   www facebook com ChevroletArabia

    SEO Blog FireShot capture 060   Bing   www facebook com eBay Bing

    Wrong way to put icons Right way to use icons

  2. 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.
  3. Dimensions
    Make 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 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.
  5. 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.
Our thanks to the Daily Blogger and the design gurus who contributed today.

No comments:

Post a Comment