How to Create a Landing Page for your Facebook Fan Page

by Diana Urban on March 15, 2010

Facebook Icon
email

*NOTE* As of March 2011, Facebook no longer allows the use of custom FBML tabs. Click here to read how to easily add an iFrame Reveal Tab to your Facebook page.

If you are an admin of a Facebook fan page, you’ll know that there aren’t many ways to customize a fan page with only its default applications. Although you can post different types of content, the design of and layout of your page is the same as a regular Facebook profile. Creating a Facebook landing page will help your fan page stand out.

There are several Facebook applications you can install on your fan page that will allow you to create a customized landing page. These pages can be used to encourage viewers to become a fan of your page, promote products and deals, or provide coupons or other incentives.

Here are some examples of Facebook pages with customized landing pages:

Here are the steps to follow to create your own Facebook landing page:

1. Add the Static FBML application

The first thing to do is add the Static FBML application. Static FBML allows you to add advanced functionality to your page. It’s basically a blank canvas to which you can use HTML or FBML (Facebook Markup Language) to create a mini-webpage right on your fan page.

addstaticfbml

Upon clicking “Add to Application,” select the page you’d like to add Static FBML to and click “Add to Page”.

2. Add content to your Facebook landing page

After adding the application to your pace, click “Edit Page” below your page’s profile image. Scroll down to the FBML application and click “Edit”.

editfbml

The “Box Title” will be the name of your tab. The main text field is where you can add content and standard HTML. Just like any website, you can add images (hosted elsewhere), text, links, and other formatting. Do not add HTML, HEAD, or BODY tags.

editapplication

3. Set up a tab for the landing page

Click “Edit Page” below your page’s profile image. Scroll down to the FBML application and click “Application Settings”.

applicationsettings

Each FBML page can function as a full tab (which we’re doing here) or a box in the left-hand column of your page’s wall tab. When creating a landing page, make sure the “Tab” setting is added and the “Box” setting is removed.

fbml settings

4. Make the FBML tab the default landing page

If you want this customized tab to be the default landing page, so that it’s the first thing a new user sees upon entering your fan page, go back to your page settings and select “Wall Settings”.

wall settings

In the “Default Landing Page for Everyone Else” dropdown, select your new custom FBML tab.

wallsettingsdefault

5. Test your new FBML tab

Make sure that your FBML tab looks right. To make sure that your FBML page appears as the default tab for non-fans, log out of Facebook and visit your fan page.

ustandoutfanpage

Have you created a customized Facebook landing page for your Facebook fan page? Showcase yours by linking to your fan page in the comments below!

Related Posts:

Article by

Diana Urban (formerly Diana Freedman) is the founder of ustandout.com, a guide for making your web presence stand out using social media and other web marketing tactics. Diana works in advertising as a User Experience Manager at HubSpot in Boston. Start socializing with Diana by following her on Twitter.


Like this post? Want more from U Stand Out? Subscribe via RSS to get updated with all the latest content.


fb-ebook-cta-bottom
  • http://twitter.com/PrayMaddyMcCann twitter.com/PrayMaddyMcCann

    Thanks! Really helpful!Fanpages seem the way forward don’t they!

  • timware

    Great post, with very helpful graphics!

    Yesterday I posted a pretty thorough FAQ for Static FBML which your readers might find useful.

    Also, your readers should know that Facebook intends, in “early 2010″, to reduce the width of application tabs (such as Static FBML) from the current 760 pixels to 520 pixels. So designers/coders might want to just start designing at the reduced width to avoid having to redo their tab when Facebook implements their changes.

    Cheers, Tim

  • http://ustandout.com Diana Freedman

    Hi Tim,

    Thanks for your comment! That's a very good point regarding the resize to 520 pixels. The resize was supposed to happen at the end of January, then by March 1st, and things still haven't changed. But yep, it's a good idea to adhere to a 520 pixel width to avoid a redesign.

  • http://www.planetwebfoot.com/ Social Networking Software

    This is great information! I just started a fan page on FB and was a bit disappointed with the lack of functionality. Will come back here and post a link when I get my new landing page up and running!

  • http://www.matthewburgess.com/ Matthew Burgess

    This is a great tutorial. Thanks for taking the time to write it up. I'm going to “fan” you on Facebook now, and I look forward to more great info. – Matthew Burgess

  • http://www.matthewburgess.com/ Matthew Burgess

    Have you seen any way to be notified when someone becomes a fan of a fan page?

  • http://ustandout.com Diana Freedman

    Thanks for your comment! Yes, come back and post the link to your FB page, I'd love to see it. :-)

  • http://ustandout.com Diana Freedman

    Thanks!

  • http://ustandout.com Diana Freedman

    You can check the “Insights” (navigate to it from the left-hand column on your Facebook page) and download the stats by clicking “export data.” This way, you'll be able to see how many new fans your page has each day.

    In terms of notifications, Facebook has actually just started sending out weekly emails to all admins of Facebook pages letting you know how many fans each of your pages has acquired in the past week, and how many total fans your page has. But I haven't heard of a way to receive a notification each time you get a new fan… I will update you if I learn otherwise!

  • http://www.pulsepointdesign.com/ Kelli Standish

    We just went live with a new custom Fan Page for one of our author clients, Marlo Schalesky. You can check it out here! http://www.facebook.com/pages/Marlo-Schalesky/103475746357601?v=app_389355083668

  • http://www.pulsepointdesign.com/ Kelli Standish

    Matthew and Diana, “like” your own posts. You'll get e-mails from every commenter.

  • mrsquiggleswrth

    This is great, but is there any way to create a landing page for people who are already fans?

  • mrsquiggleswrth

    This is great, but is there any way to create a landing page for people who are already fans?

  • http://www.nikolasallenart.com Nikolas Allen

    THANK YOU so much for this excellent tutorial and helpful graphics (I was able to glean an important piece of HTML code from one of the screenshots).

    I had this post bookmarked for awhile. Finally put it to use yesterday when I launched my new Facebook biz page: “Art Brand Plan – Branding and Marketing for the Ambitious Creative”

    My page is all about links, tips and tutorials regarding to branding, marketing and social media, so you better believe I'll be sending people back to U Stand Out to take advantage of all your excellent resources!

    Since you asked, here's how my landing page turned out (now I'm off to get 25 Likes, so I can shorten up that URL! :)

    http://www.facebook.com/pages/Mount-Shasta-CA/A…

  • Anonymous

    Great post Diana..!! Talking about a 520 pixel width design, if fbml supports fluid width then it would be good for designers to use a fluid width structure so that they need not worry about any changes to the content area. It will always be “pixel perfect” :)

  • http://www.stagticket.com Sergio

    What a great post Diana. I’ve used some really valuable information from it to spice up my fanpage. I’m presently stuck in trying to figure something out on my fanpage and i’m hoping you might be able to help!

    Is there a way to leave content on a fanpage that is ONLY visible by Fans? I was hoping to promote my fanpage with a promo code of my site. For all those that become fans, they would have access to this code.

  • http://twitter.com/jhozo Jhoanna Alfonzo

    Thank you

  • Kt Rajasekar

    can i know how to add social plug-ins to FBML. i.e add comments plugin.

  • http://ustandout.com Diana Freedman

    Hi there! I just wanted to let you know that as of March 2011, Facebook no longer allows the use of custom FBML tabs. Click here to read how to easily add an iFrame Reveal Tab to your Facebook page: http://ustandout.com/facebook/add-iframe-reveal-tab-facebook-page

  • Ilana Gonzalez

    How can I make this work for my fan page?? It doesnt seem to have the select a default tab option on it. I created a FBML tab but I cant make it the landing page for my non-fans. What can I do??

  • Pingback: Anthony Killeens Blog – Facebook Fan Pages: A walkthrough

Previous post:

Next post: