How to Create a Custom Facebook Page

Posted on by Resources for Photographers6

This is the 2nd tutorial in our Resources for Photographers section, and today, we are going to show you how to build your own customized entry tab for your public Facebook Page.  This tutorial is geared toward photography businesses and portrait charities, but really — any organization who has a presence on Facebook can benefit from a custom page.

The goal for creating a custom landing tab is so that your new visitors will see your unique brand when they first visit your public Facebook Page, instead of the default Wall or Info tabs.  This helps bring more exposure to your brand, as well as encourage visitors to “Like” your page and connect.

Some examples of companies who are utilizing custom tabs include: 1-800-Flowers, Volkswagen, REI, VH1, and Pepsi.  Pretty neat, right?  Here’s how to get started on building your own…

Step 1 — Add the Static FBML App to Your Page.

Go the the Static FBML application and click the “Add to my Page” link beneath the logo.

Step 2 — Add Text or HTML Code to the New Tab.

Go to your Facebook Page, click “Edit Page”, scroll down to the FBML app, and click the “Edit” link.

You’ll see a box that looks like the image below. Give your tab a title (here, we use “Welcome”), and add any text, HTML, or FBML code that you want to appear on your new tab.

NOTE: Any images, stylesheets, etc., will need to be hosted remotely, so be sure to upload those to your server and use the absolute link with your domain name.

Step 3 — Activate Your New Custom Tab.

On your Admin page, scroll down to the FBML app and click the “Application Settings” link.  Click “remove” to delete the new box from your Boxes tab (you don’t need this, it’s redundant), and click “add” to add the newly created tab to your page.  When you view your Page, you should see the new tab. If not, click the “+” and select the tab.  You can also drag/drop it into the desired position.

Step 4 — Set Default Tab for New Visitors.

View your Wall tab and click on “Settings.”

Under “View Settings,” find the “Default Landing Tab for Everyone Else.”  Select the drop-down menu and choose your newly created tab.

Step 5 — You’re All Done!

Log out of Facebook and navigate to your public Page.  By default, you should land on your new custom tab. (All new visitors logged into FB, as well as any user not logged in, will land on your default tab).

Here’s a screen-shot of what Shutter Mission’s Facebook page currently looks like to new visitors:

Bonus

  • As of today, the max width for tabs is 760px.  However, Facebook has been saying since late 2009 that this width would be shrinking to 520px some time in 2010. We’ve read that this will be happening in July, but who knows for sure. We chose to use the 520px width in our design so it wouldn’t break the layout when the new dimensions are put into place by Facebook. Just a little something to keep in mind when designing your new custom tabs.  UPDATE: The Facebook Page tab width is officially changing to 520px on August 23, 2010.
  • You can use external style sheets in your tabs, but we find it easier to use inline styles or internal style sheets. YMMV.
  • If you need to add more than one custom tab, go to your FB admin Page, scroll down to the FBML app, click “Edit”, scroll to the bottom and click “Add another FBML box.”
  • Need more inspiration? Check out this impressive collection of custom Facebook Pages.
  • UPDATE: We’ve added a Photoshop template of our splash page to help you get started. Just click the “download” link below!

{filelink=3}

Questions / Comments?

We’d love to hear if this tutorial was helpful.  Hit us up with any questions, suggestions for future tutorials, or post a link to your FB page in the comments so we can check it out!

Hello, I'm Amanda Shoemaker...

I'm the Editor for Shutter Mission. I love photography, building web sites, and volunteering. What are you passionate about? !

6 Responses to “How to Create a Custom Facebook Page”

  1. Shelly Keefe says:

    Awesome! Thanks for the tutorial! I always wondered that! Oh, and by the way, love seeing my pics there! :)

  2. Thanks, Shelly! w00t!

  3. Laura says:

    This was sooo helpful! I already created my own and love it, thanks so much!! You can check it out here: http://www.facebook.com/LauraSharkeyPhotography

  4. It looks awesome, Laura! I’m so happy the tutorial helped!

    I like that you used Flickr to host your splash image. That’s a great idea!

    Thanks for sharing your link!

  5. MsClassy says:

    What a great tutorial! I was curious, how did you get the footer to look so professional as well?

  6. Hi, it's takes just a bit of HTML/CSS to achieve the footer. You can “view source” on the FB page to see the code, if you like.

    Thanks for stopping by :)

Leave a Reply

Do you have Gravatar for your blog?  Get one here!