Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Advertisement

Despite its privacy issues, Facebook clearly has a key role in global Internet activity. It has become a kind of universal social network, being used for both personal and business needs. For many individuals, companies and organizations, Facebook has become an integral part of their branding strategy and promotional campaigns.

Facebook provides many tools for maximizing the effect of your presence on the social network, most of all by means of business pages, also known as fan pages. Using a variety of applications and Facebook API tools, one can get creative not only with the page content, but with the design, too.

In this post, we’ll give you an idea of how to use Facebook for your business and self-promotional efforts. Below, you will find best practices for custom Facebook fan page designs, with various approaches to creating an attractive, descriptive and engaging Facebook business page. In addition, the selection of tutorials and resources for Facebook fan page development might help you get started with your own effective Facebook presence.

By the way, it’s been two years since Smashing Magazine’s Facebook fan page1 launched (now with 18,500 fans). We have worked hard to integrate discussions, useful tips and give-aways to make the fan page more appealing and engaging.

Showcase Of Well-Designed Facebook Fan Pages

Giants of the Industry

Big brands demonstrate the best use of Facebook by far. Getting millions of fans may not seem like a big deal for Coca-Cola or Victoria’s Secret, but these companies managed to create fan pages that engage users on a much deeper level than by just asking them to click the “Like” button. An interesting trend seen across this category is of large companies taking Facebook to a new level, putting it at the center not only of their social media campaign, but of their entire online presence.

Starbucks2
Currently with the number one fan page for a brand on Facebook (with almost 8 million fans), Starbucks takes a distinctive approach, focusing less on loud entertaining apps and more on high-quality content and beneficial offers for its fans. Starbucks has learned how to effectively use status updates and how to share a lot of interesting, useful and engaging material aside from its product updates. The company also offers a couple of interactive apps that not only are fun (e.g. the Instant Story tab) but that offer tangible benefits (e.g. discount coupons, and functionality that allows fans to manage their Starbucks accounts right in Facebook). The fan page also has an interactive map that links to the company’s regional Facebook pages (just as BlackBerry does, as we’ll see). With no unusual visual indicators on its fan page, Starbucks demonstrates that functionality is at least as important as aesthetics.

3

Red Bull4
The fan page for Red Bull is by far one of the best on Facebook. By implementing a number of innovative ideas and engaging apps, Red Bull makes the best of its Facebook presence and thus stands out from business pages for other brands. A good example of this is its Twitter stream, which, instead of featuring just Red Bull’s corporate feed, assembles tweets from sponsored sports athletes and allows fans to connect with them beyond Red Bull’s domain. Live Web TV that anyone can view right on Facebook and a variety of fun games also encourage users to interact with the brand. While the welcome page is not in the default menu bar, it’s quite informative and serves as a compact graphic map of the entire Facebook page. Red Bull is also a pioneer of using Facebook as a recruiting tool; adding a careers board to a profile with so many fans makes sense indeed. Bravo Red Bull!

5

Skittles6
Although Skittles’ fan page features two brightly designed, eye-catching tabs (one a graphic presentation with links, the other promoting its “Mob The Rainbow” campaign), the company has set its Wall tab as the default. This is typical of popular brands that don’t require an introduction. It allows fans and visitors to the page to immediately follow the company’s updates and join the conversation.

7

Coca-Cola8
Another giant with a million-plus Facebook fans, Coca-Cola has a fan-centric Facebook page. It encourages active user participation and interaction between the brand and its fans. The landing tab is set to the Coca-Cola introduction, which contains a dynamic box with latest updates and a “Like” button, links to other social network profiles for the brand, a fan highlights strip, and info about the product and the page’s creators (by the way, this Facebook page was created by two Coke fans and then later supported officially by the company). Another highlight of the Coke fan page is photo albums: in addition to some standard product shots and event photographs, many other albums are included, presenting Coca-Cola not only as a popular beverage but as a multi-generational icon. Here is a good example of how to make use of photos on Facebook.

9

Twilight Saga10
The default tab for the official fan page of the blockbuster series Twilight Saga is a large graphical tab promoting the latest episode, Eclipse. The custom tab incorporates elements of the movie’s website and the trailer, live Twitter updates, links to official websites and other info. Two other custom tabs are dedicated to the second film, New Moon, and the official movie soundtrack. The entire page is rich in content and delivers its information effectively.

11

More Beautiful and Engaging Facebook Pages

Room 21412
A nice approach to the Facebook welcome page is demonstrated by social media agency Room 214, based in Boulder, Colorado. The default tab, with its nice duo-tone and sketchy font, looks minimalist and attractive, and it focuses on introducing its team members. The “About” tab has a clean two-column layout, with some basic info about the company in the left column and cute roll-over links to the staff’s Twitter accounts, official website, blog, contact page and corporate Twitter page. Another graphic tab covers the agency’s clients. A simple yet well-executed fan page design.

13

Porsche14
The ColorStyler tab on the fan page for Porsche is so darn great that one immediately wonders why on Earth they didn’t make it the default tab? The pure FBJS tab allows users to select a Porsche model and customize its look in a live preview mode, with a nifty color and rims picker. One then can send the Porsche image to a friend or publish it on the page’s wall. This hidden gem makes the entire page shine.

15

Digital Turf16
The fan page for Digital Turf is an interesting and rather confusing case. The page design itself is wonderful: the excellent company presentation, two-level sub-navigation, diverse data and cute style is a feat of FBJS and makes this one of the most attractive business pages you’ll see on Facebook. Here’s the confusing part: Digital Turf specializes in developing Web-building and media solutions for political campaigns and organizations (maybe not exclusively, but that does figure prominently in its list of services). The question is whether this design style communicates the company’s strengths well enough to attract its target audience. If it solved this concern, Digital Turf could turn its fan page, which is awesome as it is, into a Facebook promo bomb.

17

Revision Eyewear18
The main tab of the Revision Eyewear fan page features an impressive Flash intro, with bold photographs and transitions and a dynamic “Become a Fan” link. The eye-wear manufacturer also uses Facebook for its charity work; a custom graphic tab on the page explains its causes and displays donation links (the “Become a Fan” button turns into a donation button—very clever).

19

Thurston & Betts PLLC20
The Facebook page for law firm Thurston & Betts is notable for its “Like Us!” tab. A simple informational scheme in the center, with nice roll-over buttons leading to the company’s website, is a clever solution: neat yet substantial. The tab also includes the firm’s main contact info and a map of its location. It’s difficult to imagine a better Facebook page design for a law consultancy.

21

Daddy Design22
The fan page of Miami-based Web design studio Daddy Design includes two custom tabs: “About” and “Portfolio.” Both tabs use the page’s entire width, which, along with the striking orange color scheme, makes this page hard to pass by. The business page is tied closely to the company’s official website design, and it highlights a neat FBJS portfolio, with links to Daddy Design’s social profiles. It actually creates the feeling of a website within the Facebook page. Great work.

23

1-800-Flowers24
In our opinion, this is one of the best uses of a Facebook business page for e-commerce. By becoming a fan of 1-800-Flowers on Facebook, you can access up-to-date content, send virtual gifts to friends and shop for flowers right on Facebook (via the Flash-based application Alvenda). The company’s “Welcome” page has a simple and attractive grid, consisting of four sections that engage visitors with various activities. Also, the cool promo code field offers a discount to anyone who hits the “Like” button.

25

The Game – Team A26
The Game, for the Sony PS3, has two beautiful fan pages on Facebook, dedicated to each of the two teams in the game. The two pages have a similar design, featuring beautiful graphical tabs (and especially fine typefaces) that link to the interactive Facebook applications. The “About” tab includes an interactive worldwide game stats map, which is a nice touch.

27

Oxelo28
Oxelo’s fan page would be rather generic if not for the inventive Diabolo Roller tab, which promotes its new model of roller blades. Built with a Flash app, it allows a nifty 360-degree view of the product.

29

Teesey Tees30
Teesey Tees use its Facebook presence effectively: it partially implements an e-commerce element from its website that allows Facebook users to browse t-shirt designs in a sleek FBJS gallery, directing them to the regular store for purchases. The fan page also includes a blog and a charming fan-only tab containing a discount code. There is no “About” or “Welcome” tab, and the default tab is set not to the product gallery (which one would expect) but to the Wall. While this is normal for big brands, it’s not so clear why a company with a smaller audience, such as Teesey Tees, would do this. Still, this is an attractive and well-executed fan page.

31

Threadless32
Popular t-shirt producer Threadless takes the e-commerce on its Facebook fan page to the next level. Here, the native Facebook tee design gallery is supplemented by a size-selection menu and shopping cart buttons, which direct the user to the cart on Threadless’ website. The customer review section, with its “Share” and “Like” buttons, enhance the shopping experience of this fan page. Threadless also makes good use of the video and photos tabs, which, along with the live webcast section and active discussion board, make for an engaging, community-oriented Facebook presence.

33

Cranium34
Board game Cranium has a beautiful Facebook fan page, which includes several promotional FBML pages. It doesn’t have any JavaScript gimmicks, just cutely drawn illustrations and cheerful colors that make for a positive visual experience.

35

Mark Meyer Photography36
Mark Meyer’s business page is a good example of how to promote one’s personal brand effectively on Facebook. Using FBML and FMJS, the Alaska-based photographer outfits his custom tab with sub-tabs for his blog and photo gallery and an exquisite image slideshow. Status updates are also cleverly done, so that the Wall (the default tab) takes on the appearance of a photoblog.

37

Livescribe38
The “Buy Now” tab on the Livescribe Smartpen fan page has an Amazon-ish design: it’s rich in content and options, but may require the touch of someone like Jacob Nielsen to be truly usable. Livescribe effectively uses multimedia on its Facebook page, which certainly presents its product favorably and is good for fan interaction on the page. But we would suggest that the company rearrange the position of its tabs, putting some interesting sections (such as the Pencasts, which are animated Flash videos of handwritten notes and audio captured by the Smartpen) in the main bar, instead of, say, the standard “Boxes” tab.

39

Bodum USA40
The highlight of Bodum’s Facebook business page is its excellent use of an iFrame to embed the company’s online store and interactive catalogue, which is powered by iPaper, onto the Facebook profile. In other words, Facebook users can shop for Bodum products without leaving the page.

41

Soul City Church42
The “Welcome” tab of the Soul City Church Facebook page is by far the smoothest pearl in our collection of fan page designs. The clean layout, the neat typography and icons and, of course, the awesome combination of black-and-white photography and energetic green elements result in a stunning intro page. It portrays the church as a progressive and contemporary community. Credit for the great job goes to Monster Eyes43.

44

Diesel45
Famous apparel brand Diesel has three out-of-the-mold tabs, the most noteworthy of which is the one labelled “Sex Sells.” It is built on a Flash app and provides a stylish and original showcase for the denim collection of the same name.

46

Lancome Germany47
This one will appeal to those who admire good typography. The “About” section of Lancome Germany’s Facebook page takes on a website-within-a-tab format. It features elegant and polished typography, accompanied by high-quality photography.

48

Eco-Artware.com49
The Facebook business page for Eco-Artware.com features a nice FBJS “Shop” tab. It’s a pseudo-shop, though; in fact, it’s just a featured product gallery, in which both product thumbnails and catalogue categories are linked to the official online store. Nevertheless, the clean grid layout and nice roll-overs for the product images make this a beautiful and useful fan page tab. Eco-Artware.com also makes good use of the “Boxes” tab by setting it as the default.

50

31151
The official Facebook page of music band 311, particularly the “News & Multimedia” tab, is eye candy. Designed in a cool retro poster style, it contains basic info about the band and a built-in multimedia player. A large “Fan Photos” section reflects the band’s commitment to communicating with its fans. Well done!

52

Rei53
Outdoor gear and clothing provider REI uses its Facebook profile to foster strong interactivity, rather than merely to present a plain front. Its fan page is basically a community portal where the company engages people with its social campaigns and projects. The fan page includes two Flash tabs that feature community pictures, links and fun family games.

54

Desigual55
The fan page for Spanish apparel brand Desigual is bursting with color, freshness and style. It is versatile, with various types of promotional and entertaining content, yet not overwhelming. The mood is set equally by great content and classy design elements. Desigual points out that the page was started by fans and then made official by the brand; this is clearly illustrated on the Wall feed, where user-created updates are set to default along with the company’s messages.

56

Volkswagen57
Currently featuring its soccer fan campaign, VW shows amazing use of FBJS on its page. Rich in content, up to date, well designed and heavily supportive of user-created content, this is the best Facebook business page that a popular automotive brand could have.

58

Living Proof59
The fan page of cosmetics manufacturer Living Proof is all about interactivity and dialogue between the company and its customers. Chief among its many features is the dynamic Flash introductory tab, containing basic info about the company,a lab tour,a mini blog, links to customer support services and a corporate Twitter feed. The business page also includes an interactive app that helps customers choose the most suitable products.

60

Inspired Magazine61
Inspired Magazine is one of the few Web design blogs that have customized their Facebook fan page. No fancy applications or high-volume presentations here; a minimalist FBML tab is quite enough to grab the attention of a random Facebooker and give them reasons to “Like” the page.

62

Sony Ericsson63
Current Sony Ericsson promotions are presented via beautifully designed tabs, with videos, contest forms and interactive applications inside.

64

BlackBerry65
Besides its several promotional tabs built with Facebook Javascript and Flash, the BlackBerry fan page features a nice FBJS map with links to local Facebook business pages. This does a good job of integrating the company’s Facebook presence and promoting its local pages.

66

Resources And Tutorials

Here is a list of websites and tutorials to help you understand the basics of developing and promoting your Facebook business page.

Facebook Developers67
This is the ultimate resource for anyone who wants to take advantage of the variety of opportunities offered by Facebook. Related documentation, forum discussions, wikis and a showcase of best practices for Facebook integration are all aggregated in one place for both beginners and advanced developers.

Hyperarts68
A lot of excellent tutorials related to Facebook fan page development can be found in the Static FBML & FBML archive on the Hyperarts Blog. The tutorials are geared to both beginners and advanced developers. The blog also features a series of video tutorials, which we’re sure will come in handy for many of you. Some of the most interesting tutorials from Hyperarts are highlighted below.

All Facebook69
On the unofficial Facebook Blog, you will find news, articles, tips and stats related to the world’s fastest-growing social network. An extensive guide titled How to Develop a Facebook Page That Attracts Millions of Fans70 addresses its subject well.

How to Use Facebook for Business and Marketing71
This guide takes a look at the potential of Facebook for business and reviews the various options business owners have in order to be effective with Facebook business marketing. Recommended reading.

Screenshot72

How to Create a Facebook FBML Template73
In this tutorial, you’ll learn how to create a Facebook fan page in Photoshop. It uses a page for a photographer as an example. This is the first in a series; the second lesson74 covers the coding part. The source files, including the code, are available for download.

75

Facebook Programming step-by-step tutorial76
This tutorial series consists of 22 lessons and covers all aspects of Facebook programming, including application development, displaying fan-only content and creating an interface for a Facebook page.

Static FBML: Not Every Facebook Fan Page Needs an Application77
In this tutorial the well-known blogger Alison Gianotto walks you through what a Static FBML is and why it’s sometimes quite enough to create an attractive and efficient Facebook fan page.

Extending Facebook Static FBML Tabs with Dynamic Content78
Continuing from the previous guide, this tutorial explains how to add some spice to your Facebook fan page using the DynamicFBML function. You can build an image or video gallery or even a micro-site inside a Static FBML tab quite easily.

Taking Your Static FBML Microsite to the Next Level 79

Learn how to create sub-nav tab navigation within your Static FBML microsite using only DynamicFBML.

Creating a Custom Facebook Page80
This useful guide gives you a head start on building your own fan page on Facebook. The tutorial includes such basics as Facebook page creation, restrictions on Facebook, creating tabs and displaying navigation and content elements using FBML and FBJS.

Google Analytics for Facebook Fan Pages81
Another great post by Webdigi.co.uk, in which they show you how to get around Facebook’s limitations. Even though Facebook supports only restricted JavaScript, which is usually not enough for Google to correctly track visitors, the guys from Webdigi.co.uk successfully managed to get all functions of Google Analytics working on their fan page. You can learn how they did it by reading this tutorial.

How To: Build a Facebook Landing Page for Your Business82
This is Mashable’s brief guide on how to add and configure a Static FBML tab on your Facebook fan page.

83

Internet Explorer and Static FBML: Using External Style Sheets for CSS84
This insightful article discusses aspects of applying CSS styles to your Static FBML application in Internet Explorer versions and other browsers. The post includes an important update85 that takes into account changes in Facebook’s API that affect the implementation of CSS styles in static tabs.

8 Essential Apps for Your Brand’s Facebook Page86
This article suggests a number of Facebook apps you could use to attract fans to your brand’s landing page and to make them return repeatedly.

Add a Custom Tab to Your Facebook Fan Page (Starter Template Included)87
Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook88, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments.

Facebook Best Practices for Non-Profit Organizations89
This Facebook fan page guide is written by Diosa Communications, a company that specializes in social-media consulting for non-profit institutions and small businesses. It’s not exactly a list of best practices in the traditional sense, but rather a number of recommendations on how to set up and promote a fan page to the best effect.

How To Create the Perfect Facebook Fan Page90
Some tips you can apply to your Facebook marketing strategy that will put your Facebook Page leaps and bounds ahead of the competition.

Adding iFrames to Your Facebook Applications: 201091
Recent modifications in Facebook’s API further restricted the use of iFrames. For instance, you can’t embed one in Static FBML anymore. iFrames can still be used in the Canvas Pages application, though, which is the topic of this tutorial.

Developing a Facebook Application for Absolute Beginners92
Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato.

93

Showcase

Not many galleries of Facebook pages exist yet. Still, the ones that do give us a pretty good idea of trends in this area.

Facebook Designs94
This gallery is rarely updated, but it features some really cool Facebook page designs that we haven’t seen in other showcases.

95

Custom Facebook Page gallery96
Custom Facebook Page is run by the social media marketing group North Social. The gallery contains over 60 Facebook page designs, sorted into several categories. The most recent showcase is dated December 2009.

97

Facebook Showcase98
Facebook Showcase is the most frequently updated gallery of the ones covered here. A lot of inspirational Facebook page designs can be found here.

99

Facebook Platform Showcase100
This showcase is slightly different. Here you can explore how companies around the world integrate Facebook on their websites.

101

Customize Your Facebook Fan Page: Tips, Tricks, Applications102
A quick overview of basic tips and tricks for customizing and improving your Facebook fan page.

Facebook Fan Page Templates

Many freelance designers and design studios offer customization services for Facebook pages. Standalone fan page templates are less widespread, at least so far. To provide you with the best possible starter kit, we’ve collected Facebook business page themes that you can get either free or at a cost.

Free Templates

Free PSD Facebook Template103 | Preview104 | Details105
This 520-pixel Photoshop layout of Facebook fan page tab is available for free downloading. If you are looking for a simple graphical presentation for your Facebook page, this template may come in handy.

106

Free PSD: Facebook Fanpage Template107 | Preview108 | Details109
This is a free mock-up Facebook fan page with editable text, posting times and other elements.

110

Absolutely Free Cool Facebook Template111 | Preview112| Details113
This graphic FBML template, along with the PSD file, fonts and HTML mark-up, is available for free downloading. The package also includes an installation manual.

114

Free FBML Template115 | Preview116 | Details117
You can use this multi-tabbed Facebook page template for free only if you maintain the links to its creators and the copyright info in the footer.

118

Facebook Template Page119 | Details120
This is quite a different Facebook page template. Basically, it’s a worksheet available in text and PDF formats, allowing school students to construct a Facebook page for a character from a story or some other purpose. The template has been downloaded over 10,000 times and has gotten a lot of positive feedback because it is a new and exciting way for students to comment on their readings. You have to register to download the template.

121

Commercial Templates

Photographer Facebook Template122 | Preview123 | Details124 | All FB templates125
A sleek graphical FBML tab, with an image gallery, text sections, social networking buttons and a reminder to “Like” the page. The template package consists of source files and the Facebook installation guide. Price: $15.

126

Corporation Number 1: Facebook Tab 127| Preview128 | Details129 | All FB Templates130
A minimalist Facebook page theme, with space for one main image, the company’s logo or tagline, two paragraphs of text and links to social media resources, including an optional RSS feed. The user can also add images, contact forms, videos and other elements to the template (no coding skills are required). Price: there are two subscription plans to choose from, although only one of them (Standard) is active at the moment – $14.99 per month. Free trial option is available, too.

131

My Style Facebook Flash Template132 | Preview133 | Details134 | All FB Templates135
Among the highlights of this Flash-based FBML template are diverse transitions, multi-tab sub-navigation and a large image gallery in the tab header (760 pixels in width, of course). Instructions on how to upload the template are attached; and the developer offers additional customization services. Price: $18.

136

Website Image Gallery Template137 | Preview138 | Details139 | All FB Templates140
This FBML template features a FBJS image gallery, horizontal top menu navigation, social networking links and side images. The website does not mention whether installation documentation is provided; perhaps it is provided upon purchase. Price: $20.

141

Facebook Flash Template142 | Preview143 | Details144
This is another version of the Flash-based “Welcome” tab for Facebook fan pages. It’s actually a mini-site, 520 pixels in width, with three sub-pages, including a slideshow and image gallery. It comes with step-by-step instructions on setting it up on Facebook. Price: $13.

145

(al)

Footnotes

  1. 1 http://www.facebook.com/smashmag
  2. 2 http://www.facebook.com/Starbucks
  3. 3 http://www.facebook.com/Starbucks
  4. 4 http://www.facebook.com/redbull
  5. 5 http://www.facebook.com/redbull
  6. 6 http://www.facebook.com/skittles
  7. 7 http://www.facebook.com/skittles
  8. 8 http://www.facebook.com/cocacola
  9. 9 http://www.facebook.com/cocacola
  10. 10 http://www.facebook.com/twilight
  11. 11 http://www.facebook.com/twilight
  12. 12 http://www.facebook.com/Room214
  13. 13 http://www.facebook.com/Room214
  14. 14 http://www.facebook.com/porsche
  15. 15 http://www.facebook.com/porsche
  16. 16 http://www.facebook.com/digitalturf
  17. 17 http://www.facebook.com/digitalturf
  18. 18 http://www.facebook.com/RevisionEyewear
  19. 19 http://www.facebook.com/RevisionEyewear
  20. 20 http://www.facebook.com/ThurstonandBetts
  21. 21 http://www.facebook.com/ThurstonandBetts
  22. 22 http://www.facebook.com/wordpressdesign
  23. 23 http://www.facebook.com/wordpressdesign
  24. 24 http://www.facebook.com/1800flowers
  25. 25 http://www.facebook.com/1800flowers
  26. 26 http://www.facebook.com/thegameteama
  27. 27 http://www.facebook.com/thegameteama
  28. 28 http://www.facebook.com/OxeloOfficiel
  29. 29 http://www.facebook.com/OxeloOfficiel
  30. 30 http://www.facebook.com/teeseytees
  31. 31 http://www.facebook.com/teeseytees
  32. 32 http://www.facebook.com/threadless
  33. 33 http://www.facebook.com/threadless
  34. 34 http://www.facebook.com/Cranium
  35. 35 http://www.facebook.com/Cranium
  36. 36 http://www.facebook.com/markmeyerphotography
  37. 37 http://www.facebook.com/markmeyerphotography
  38. 38 http://www.facebook.com/livescribe
  39. 39 http://www.facebook.com/livescribe
  40. 40 http://www.facebook.com/BODUMUSA
  41. 41 http://www.facebook.com/BODUMUSA
  42. 42 http://www.facebook.com/SoulCityChurch
  43. 43 http://monstereyes.com/
  44. 44 http://www.facebook.com/SoulCityChurch
  45. 45 http://www.facebook.com/Diesel
  46. 46 http://www.facebook.com/Diesel
  47. 47 http://www.facebook.com/LancomeGermany
  48. 48 http://www.facebook.com/LancomeGermany
  49. 49 http://www.facebook.com/EcoArtwaredotcom
  50. 50 http://www.facebook.com/EcoArtwaredotcom
  51. 51 http://www.facebook.com/official311
  52. 52 http://www.facebook.com/official311
  53. 53 http://www.facebook.com/REI
  54. 54 http://www.facebook.com/REI
  55. 55 http://www.facebook.com/Desigual
  56. 56 http://www.facebook.com/Desigual
  57. 57 http://www.facebook.com/VW
  58. 58 http://www.facebook.com/VW
  59. 59 http://apps.facebook.com/livingproof/
  60. 60 http://apps.facebook.com/livingproof/
  61. 61 http://www.facebook.com/inspiredmag
  62. 62 http://www.facebook.com/inspiredmag
  63. 63 http://www.facebook.com/sonyericsson
  64. 64 http://www.facebook.com/sonyericsson
  65. 65 http://www.facebook.com/BlackBerry
  66. 66 http://www.facebook.com/BlackBerry
  67. 67 http://wiki.developers.facebook.com/index.php/Main_Page
  68. 68 http://www.hyperarts.com/blog/category/facebook-static-fbml/
  69. 69 http://www.allfacebook.com/
  70. 70 http://www.allfacebook.com/2009/03/facebook-page-strategy/
  71. 71 http://www.techipedia.com/2010/how-to-use-facebook-for-business-and-marketing/
  72. 72 http://www.techipedia.com/2010/how-to-use-facebook-for-business-and-marketing/
  73. 73 http://www.webdesign-tutorials.com/blog/2010/06/23/how-to-create-facebook-fbml-template/
  74. 74 http://www.webdesign-tutorials.com/blog/2010/06/24/how-to-create-facebook-fbml-page-part-2/
  75. 75 http://www.webdesign-tutorials.com/blog/2010/06/23/how-to-create-facebook-fbml-template/
  76. 76 http://www.phpeveryday.com/articles/Facebook-Programming-Facebook-Platform-P845.html
  77. 77 http://www.snipe.net/2009/06/fb-fanpages-fbml-box/
  78. 78 http://www.snipe.net/2009/10/mini-site-facebook-static-fbml/
  79. 79 http://www.snipe.net/2010/05/static-fbml-microsite-next-level/
  80. 80 http://www.webdigi.co.uk/blog/2010/creating-a-custom-facebook-page/
  81. 81 http://www.webdigi.co.uk/blog/2010/google-analytics-for-facebook-fan-pages/
  82. 82 http://mashable.com/2010/02/22/build-facebook-landing-page/
  83. 83 http://mashable.com/2010/02/22/build-facebook-landing-page/
  84. 84 http://www.hyperarts.com/blog/facebook-static-fbml-internet-explorer-stylesheets-css/
  85. 85 http://www.hyperarts.com/blog/facebook-static-fbml-external-stylesheets/
  86. 86 http://mashable.com/2009/05/13/facebook-brand-apps/
  87. 87 http://www.proworks.com/blog/2010/04/30/add-a-custom-tab-to-your-facebook-fan-page-starter-template-included/
  88. 88 http://wiki.developers.facebook.com/index.php/Roadmap_Profile
  89. 89 http://www.diosacommunications.com/facebookbestpractices.htm
  90. 90 http://www.techipedia.com/2009/create-facebook-page/
  91. 91 http://www.hyperarts.com/blog/adding-iframes-to-facebook-application-2010-static-fbml/
  92. 92 http://www.emanueleferonato.com/2009/09/20/developing-a-facebook-application-for-absolute-beginners/
  93. 93 http://www.emanueleferonato.com/2009/09/20/developing-a-facebook-application-for-absolute-beginners/
  94. 94 http://www.facebookdesigns.org/
  95. 95 http://www.facebookdesigns.org/
  96. 96 http://www.customfacebookpage.com
  97. 97 http://www.customfacebookpage.com
  98. 98 http://facebookshowcase.net
  99. 99 http://facebookshowcase.net
  100. 100 http://developers.facebook.com/showcase/
  101. 101 http://developers.facebook.com/showcase/
  102. 102 http://www.1stwebdesigner.com/development/customize-facebook-fan-page/
  103. 103 http://layoutspack.com/wp/website-templates/free-psd-facebook-template/
  104. 104 http://layoutspack.com/wp/website-templates/free-psd-facebook-template/
  105. 105 http://layoutspack.com/wp/website-templates/free-psd-facebook-template/
  106. 106 http://www.smashingmagazine.com/wp-content/uploads/2010/06/layoutspacks-free-template.jpg
  107. 107 http://www.fuelyourcreativity.com/free-psd-facebook-fanpage-template/
  108. 108 http://www.fuelyourcreativity.com/free-psd-facebook-fanpage-template/
  109. 109 http://www.fuelyourcreativity.com/free-psd-facebook-fanpage-template/
  110. 110 http://www.fuelyourcreativity.com/free-psd-facebook-fanpage-template/
  111. 111 http://icetemplates.com/blog/134/absolutely-free-cool-facebook-template/
  112. 112 http://icetemplates.com/blog/134/absolutely-free-cool-facebook-template/
  113. 113 http://icetemplates.com/blog/134/absolutely-free-cool-facebook-template/
  114. 114 http://icetemplates.com/blog/134/absolutely-free-cool-facebook-template/
  115. 115 http://blog.homegain.com/blogging-and-social-networking/free-fbml-template-for-facebook-fan-pages/
  116. 116 http://blog.homegain.com/blogging-and-social-networking/free-fbml-template-for-facebook-fan-pages/
  117. 117 http://blog.homegain.com/blogging-and-social-networking/free-fbml-template-for-facebook-fan-pages/
  118. 118 http://www.smashingmagazine.com/wp-content/uploads/2010/06/homegainbusiness-template.jpg
  119. 119 http://www.tes.co.uk/article.aspx?storycode=6025698
  120. 120 http://www.tes.co.uk/article.aspx?storycode=6025698
  121. 121 http://www.tes.co.uk/article.aspx?storycode=6025698
  122. 122 http://www.flashmint.com/show-template-2892.html
  123. 123 http://www.flashmint.com/template-demo-2892.html
  124. 124 http://www.flashmint.com/show-template-2892.html
  125. 125 http://www.flashmint.com/show-type-facebook.html
  126. 126 http://www.flashmint.com/show-template-2892.html
  127. 127 http://fanpagebuilders.com/2010/05/corporation-number-1-facebook-tab/
  128. 128 http://fanpagebuilders.com/2010/05/corporation-number-1-facebook-tab/
  129. 129 http://fanpagebuilders.com/2010/05/corporation-number-1-facebook-tab/
  130. 130 http://fanpagebuilders.com/facebook-page-products/
  131. 131 http://fanpagebuilders.com/2010/05/corporation-number-1-facebook-tab/
  132. 132 http://www.flashmint.com/show-template-2917.html
  133. 133 http://www.flashmint.com/template-demo-2917.html
  134. 134 http://www.flashmint.com/show-template-2917.html
  135. 135 http://www.flashmint.com/show-type-facebook.html
  136. 136 http://www.flashmint.com/show-template-2917.html
  137. 137 http://www.facebookpagetemplate.com/store/#ecwid:category=270743&mode=product&product=855654
  138. 138 http://www.facebookpagetemplate.com/store/#ecwid:category=270743&mode=product&product=855654
  139. 139 http://www.facebookpagetemplate.com/store/#ecwid:category=270743&mode=product&product=855654
  140. 140 http://www.facebookpagetemplate.com/store/
  141. 141 http://www.facebookpagetemplate.com/store/#ecwid:category=270743&mode=product&product=855654
  142. 142 http://www.flashscope.com/product/facebook-flash-template
  143. 143 http://www.flashscope.com/product/facebook-flash-template/preview
  144. 144 http://www.flashscope.com/product/facebook-flash-template
  145. 145 http://www.flashscope.com/product/facebook-flash-template

↑ Back to top Tweet itShare on Facebook

Julia May is a freelance writer now working with FlashMint, the top-class provider of Flash templates.

Advertising
  1. 1

    Its on right time actually i was thinking to make my own Facebook fan page for wwebz.com. now i got some good inspirational material
    Thanks a lot

    0
  2. 52

    Thanks a lot for this very complete article!

    0
  3. 103

    Another great post guys!
    Thank you very much for including Inspired Mag’s Fb page – mucho appreciadu!

    0
  4. 154

    Dmitry Chebakov

    July 8, 2010 3:46 am

    Thank you for both inspiration and tutorials! I think it’s the most comprehensive list about Facebook fan page creation process so far!

    0
  5. 205

    Ignatius Mario

    July 8, 2010 3:59 am

    Thanks you that what i looking for…

    0
  6. 256

    Awesome post! I am definitely bookmarking. I wish the FBML stuff was easier/less time consuming. Building an audience is tough. I am about six months into the process and only at 164 fans. I feel like the content is quality and I have some new ideas coming, so hopefully that will help. If you all are so inclined, join the page and help me build my page. Also any suggestions for things I can do to improve are greatly appreciated.

    You can leave a message on the fanpage or email me at steve at weltbranding dot com. Thanks!
    facebook.com/#!/pages/Cincinnati-OH/Welt-Branding/58012219459?ref=ts&ajaxpipe=1&__a=10

    -Steve

    0
  7. 307

    Thanks for the post. Lots of great resources!

    0
  8. 358

    Perfect timing, great resource, thanks a million for putting it together

    0
  9. 409

    Thanks for the information
    awesome resources

    0
  10. 460

    i’m glad of this post because it will help me out a lot, petty much this is what i do at work. design facebook pages.

    0
  11. 511

    I am not a fan of customizing FB pages. I get the whole brand identity thing, but I like that not matter who it is it looks the same in FB. Boo to custom pages.

    0
  12. 562

    I made a fan page for a church here is the link, tell me what do you think ?

    facebook.com/iglesiakemuel?v=app_4949752878

    0
  13. 613

    I know it may look like a shameless self-promotion, but we are truly proud of the way that we have integrated our Issuu titles on our brand new Facebook page. We haven’t seen this solution elsewhere. You are most welcome to check it out for yourself. It’s purely FBML-based, of course.

    0
  14. 664

    Thanks for the mention of http://facebookshowcase.net! I see you selected many of the Pages from my site to feature here as well ;). Anyone interested in Facebook Page Design and the interesting things you can do with Custom Tabs should check out the Showcase for more examples – I try to update a few times a week!

    Also, anyone interested in customizable Tab Templates and “Tab CMS” capabilities should keep an eye on my next project due out later this summer, http://faceil.com … *wink wink nudge nudge*

    Thanks for the great post!

    0
  15. 715

    Adegbenga Agoro

    July 8, 2010 3:13 pm

    This is a great tutorial and wonderful resource tool.

    I recently tried my hands on FBML and was wondering how to extend my capabilities, this is all the information I need in one place, I’ve already bookmarked the page for future and continuous referencing as I continue my research.

    Thanks for the post

    0
  16. 766

    I’ve seen people mention the width is 750 and will be 520 soon, but I just made one today and it’s 760px. When will the 520 be official?

    0
  17. 919

    Left Facebook a month ago. They are racist.

    0
  18. 970

    Grimur Fjeldsted

    July 9, 2010 5:14 am

    Created one a few weeks ago. Check it out on facebook.com/eccoshoecompany/

    -1
  19. 1021

    Thanks everybody for feedback! I appreciate all the kind words and glad the round-up was useful for so many people.

    0
  20. 1072

    Michiel Ebberink

    July 9, 2010 6:14 am

    Only one really extend the facebook look and feel. All other fanpages are just simple landingpages. Very disappointing actually.

    0
  21. 1123

    You reading my mind .. im going to create a custom fan page for a client and here you come , thaaaaaaaaaaaaaaanks

    0
  22. 1174

    Julia…sure with you would have seen a couple of ours: facebook.com/idrinc and facebook.com/valuemedical

    It’s not just the big boys that have awesome design!

    0
  23. 1225

    I’ve been hoping that Smashing Mag would do a post on this! Looking through the gallery you’ve put together is so much easier than typing random company names after facebook.com/ and crossing my fingers for a good example. Thanks!

    1
  24. 1276

    This is a great resource, thanks.

    –M

    0
  25. 1327

    WOW! lots of great info & ideas.
    must try to esign on too…thanks.
    Aloha…

    1
  26. 1378

    Fantastic resource. Thank you for putting this together!

    -1
  27. 1429

    This is really nice post…after reading this article ..i found out this company name Socioniks that helped me create a facebook fanpage at amazingly cheap price that all other people developing them… Facebook.com/clevertonmarketing is the page ..Also they helped me get additional facebook fans for my page..now i see more people liking my page rather than earlier..I guess i will now engage socioniks now for all my social media marketing needs..

    0
  28. 1480

    thank you sooo much , its really Fantastic!!! good Job ;)

    0
  29. 1531

    This article post has open up my eyes to more possible outcomes with FBML custom page. So many resources links to learn from. Kamsahamnida (Thank you in korean). I better start reading and learning! =D

    0
  30. 1582

    This is a grate article and useful article.

    0
  31. 1633

    I created one for our church that aggregates live events, Blog, and the most Recent podcast:
    facebook.com/christian.life.center.williamsburg.va

    0
  32. 1684

    I like!

    0
  33. 1735

    A girl asked a boy:(Girl)Do you think I’m pretty?(Boy)NO
    (Girl)Do you want to be with me forever (Boy)NO (Girl)Would you cry if I walked away?(Again the boy said)NO
    She heard enough and waz hurt, tears ran down her face
    The boy grabbed her arm and said:(Boy)- You’re not pretty, you’re BEAUTIFUL
    (Boy)- I don’t want to be wi…th you forever, I NEED to be with you forever… See More… See More… See more… See More… See More… See More… See More
    (Boy)- and I wouldn’t cry if you walked away… I would DIE!!!!
    (Boy whisperz)- Plzzzz stay with me…(Girl whisperz)- I will…
    Tonight at midnight your true love will realize they love you. Something good will happen to you between 1-4 pm tomorrow it could be anywhere..Get ready for the biggest shock of your life! If you dont post this on to 5 other pages you will have relationship problems for the next 10 years

    -2
  34. 1786

    Thank you for this very useful article. Social networking platforms such as facebook are really beginning to open new doors to online marketing by integrating web design within itself.

    These customisable fan pages can really capture and draw in possible custom and interest into a company or brand due to the high volume of facebook users browsing these fan pages. Having external links from a companies website directly to the companies facebook page gives the user a sense of comfort if they are familiar with facebook themselves feeling like they can relate to a facebook page possibly better than to a website.

    This is possibly due to the flowing trend that I have noticed of integrating Web 2.0 styling into these fan pages. The use of vivd gradients and minimalist text being easier on the eye really merges well with the facebook design style and can keep a user on the fan page.

    0
  35. 1837

    You can see how customizable they are when using sliders,css tricks, and well commented code on the backend that allows the admin to easily update things like link blocks on a regular basis. This page we did serves as a monthly newsletter and introduction for this magazine:http://www.facebook.com/pages/Aves-Noir/350146477715?ref=ts

    0
  36. 1888

    Nice round up. I know Absolut’s Facebook page gets a lot of love round these here parts.

    0
  37. 1939

    thanks for info…now im gonna start designing my FB page in style

    0
  38. 1990

    Here goes another resource for designers who work with FB app design: http://surgeworks.com/blog/design/facebook-gui-free-psd-resource

    0
  39. 2041

    Awesome list, this must of taken a while to put together. You made a lot of people happy. Thanks and Keep up the great work! #igotux

    0
  40. 2092

    These fan pages look excellent. I think that having an amazing design, and effective facebook pages in your business profile is very important, and will only continue to grow.

    -2
  41. 2143

    FacebookPageTemplates.com offers you unique absolutely for free. Our Facebook Pages are easy to install and can actually draw the attention of your page visitors. Owe to the unique design and the simple replacement of the content, our templates are very popular among facebook users. All the big companies have already created their own unique pages on facebook. Owe to these pages, users can buy your goods, exchange views and disseminate news about your business. So if you already have a website why don’t you create a page on facebook that will represent you or your company? Landing pages created on our Facebook Page Templates base will certainly attract the attention of the visitors and turn them into your fans.

    0
  42. 2194

    David Henderson

    July 30, 2010 3:18 am

    WOW! This article was so inspiring, just so much we can do with FB fan pages! I’m inspired and encouraged to do so much now.

    0
  43. 2245

    This may have changed, but FB told me in order to get a bespoke fan page, you needed a £50k ad spend with them. Then they give you an iframe from which you can link to your pages, which can be hosted on whatever server you like. It’s quite flexible if you have a big client.

    0
  44. 2296

    Facebook pages are truly amazing. I’ve been creating them for ages and I’m still pushing the boundaries of what’s possible. This article is inspiring from a big brands point of view but it’s also possible for businesses to get a page on Facebook on a shoestring budget.

    Check out my blog “Your Facebook Customers Need YOU!” on the Narvi Digital Media website for my views : http://bit.ly/bPKzcb

    – James

    0
  45. 2347

    Phil @ Bravo Charlie TV

    August 9, 2010 5:46 am

    Excellent resource, thank you so much.

    0
  46. 2398

    Thanks!! very helpful

    0
  47. 2449

    Just in time. Thanks, smashing mag!

    0
  48. 2500

    Hi,
    You may also want to look at http://www.facebook.com/thinklive

    thanks
    Arun

    0
  49. 2551

    Wow…I think I will forward to this post to our designer so he can redo our companys fan page. I still find it amazing how powerful and influential Facebook has become. It has a become a hobby for some people which is quite sad if you think about it. I can’t see it being replaced anytime soon…unfortunately.

    0
  50. 2602

    Many of these screenshots were made BEFORE Facebook changed the default page width from 760px to 520px. Facebbok wants more attention on their advertisments. I do regret this point of view…

    0

↑ Back to top